Difference between revisions of "Ecommerce Cart"

From Contensive Wiki
Jump to: navigation, search
(→‎Catalog Layout)
(→‎Group Policies)
 
(57 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
; Catalog : The list of items which may be purchased online
 
; Catalog : The list of items which may be purchased online
 
; Order Process : The series of steps taken to purchase the items selected.
 
; Order Process : The series of steps taken to purchase the items selected.
 +
; People Record : A record in the system that identifies one person. Each person can have three addresses -- primary address, billing address, and shipping address
 +
; Order : (aka invoice, receipt) The document that represents a charge to the account. it is an order before it is charged (billed), an invoice when it is charged but not paid, and a receipt when it is paid.
  
−
== Settings ==
+
==Roles==
−
Use Ecommerce Settings, installed with the [[Invoice Manager]] to handle most online purchase settings. <br />
+
; Customer : The people record of the individual using the ecommerce cart.
 +
; Account : The entity charged for the order. If the customer has an account set in their Billing tab, that account is charged. if they do not, a new account is created, set in their Billing tab, charged, and the customer is set as the primary contract and billing contact.
 +
; Account Primary Contact : The people record of the individual to be the primary contact for an account. See ecommerce for more details.
 +
; Account Billing Contact : The people record of the individual to be the billing contact for an account. Account notifications are sent to the billing contact. See ecommerce for more details.
  
−
== Purchase Process ==
+
==How To==
 +
 
 +
==Reference==
 +
 
 +
=== Settings ===
 +
Use Ecommerce Settings, installed with the [[Invoice Manager]] to handle most online purchase settings. The following settings are handled with Ecommerce Cart Settings. <br />
 +
 
 +
====Catalog====
 +
#'''Catalog Listing Columns:''' This is the number of columns displayed when many items are listed out, such as search results and when an entire category is selected.
 +
#'''Catalog Listing Items:''' This is the number of items displayed per page.
 +
#'''Catalog Item Sort Order:''' How items are sorted on the catalog; options include: By Alpha Sort Order Field, By Alpha Sort Order Then Oldest First, By Date, By Date Reverse and By Name
 +
#'''Allow Prices in Catalog:''' When checked, pricing is displayed with an item in the catalog. Pricing is required to allow ordering.
 +
#"'''Retail Price" Caption:''' This is for comparison only. Leave blank if you do not need this.
 +
#"'''Regular Price" Caption:''' This is the normal price for the item when the buyer is not eligible for a sale or group discount.
 +
#'''Allow Custom Prices:''' When checked, items with a 'custom price' will display the custom pricing.
 +
#'''"Custom Price" Caption:''' When Allow custom prices is checked, this caption is used to identify the custom price.
 +
#'''"Sale Price" Caption:''' When an item includes a sale price, and is marked on sale, this is the caption that displays with the sale price.
 +
#'''"Your Price" Caption:''' The lowest possible price is calculated for each item, based on regular price, sales price and any Group Discounts. This caption is used to display that price.
 +
#'''"Manufactured By Caption:''' When included, this caption precedes the name of the source of this item, as selected for each item.
 +
#'''Catalog Thumbnail Width:''' This is the width of all thumbnail images displayed in the catalog.
 +
#'''Catalog Image Width:''' This is the width of all images that are not thumbnails displayed in the catalog.
 +
#'''Catalog Text:''' Provides a place to edit copy content in the catalog home, search tab, account tab, order list, account select list and add account tab.
 +
 
 +
====Checkout====
 +
Checkout settings control the process of purchasing the items in a cart. If you will be using PayPal or an online credit card processor, see the settings below. Configure your online payment gateway with Payment Process Settings.
 +
#'''Email from-address for order receipt:''' This is the email address the appears as the 'From Address' on receipts sent to customers.
 +
#'''Price Level Free Shipping:''' When allowed, orders over the Free Shipping Price Level will be given free shipping. The total price is before tax and shipping calculations, but includes all other discounts. Free shipping applies only to those shipping methods with 'Free Shipping at a Price Level' checked.
 +
#'''Price Level Discount:''' When checked, orders over a specified price total will be given a discount. The total price is before tax and shipping calculations, but includes all other discounts. For example, for a 10% discount on orders over $200, enter 200 in Price Level and 10 in Discount Percentage.
 +
#'''Order Process Text:''' Contains all text that appears on the order pages as a customer goes through the order process.
 +
 
 +
====Accepting PayPal Payments====
 +
With PayPal Express checkout, your visitors will see a PalPal link that takes them to the PayPal site to process charges. After the purchase is complete, they return to your site. To use PayPal, you must create a PayPal account on the PayPal site and update these fields.
 +
#'''Allow Payment by PayPal:''' Check this box if you want to use PayPal Express checkout.
 +
#'''PayPal Business Name:''' When you create your PayPal seller account, this is the username they assign to you.
 +
#'''PayPal Post URL:''' The PayPal Post URL below should be one of the following:
 +
##for testing - https://www.sandbox.paypal.com/cgi-bin/webscr
 +
##for production - https://www.paypal.com/cgi-bin/webscr
 +
 
 +
====Shipping====
 +
Shipping options are configured through the ecommerce settings page.
 +
 
 +
====Group Policies====
 +
Go to Admin>>Settings>>Shopping Cart Settings
 +
 
 +
Use Group Policies to apply special discounts and privileges available to only those people in specific groups. There are two kinds of Group Discounts, Custom Price Discount and Percentage Discount. When Allow Custom Price is checked, members of that group will be eligible for the 'custom price' in any item. When a non-zero Percentage Discount is entered below, anyone in that group receives that discount off of the 'Regular Price'. This discount does not apply to 'Sales Price' or 'Custom Price'. The final price for each item, labeled with the caption 'Your Price', will be the lowest of the calculated price for each pricing strategy.
 +
 
 +
#'''Block Contact Update Group:''' If a group is selected, anyone logged in and in this group will not be able to update their contact information. Use this setting to protect user settings that may be controlled by another source such as a synchronization from another database.
 +
#All groups in the system are listed here with the option to enter a % discount, to check the "Allow Custom Price" option and to check the "Allow Ordering" option (which applies to items with Order Button Mode set to Group Policy).
 +
 
 +
====Sales Tax====
 +
Sales tax will be automatically included on the order based on the state of the shipping address. Individual state sales tax rates are set in the record for the state. The checkout process calculates the tax required but it is up to you to handle all state tax filings. You have the option to edit state tax rates here.
 +
 
 +
====Inventory Management====
 +
Use Inventory Management to notify you when an items quantity is low. For each item, enter the Inventory on hand, and Inventory low. Each time an item is purchased, the quantity on hand is decreased. When the quantity is below the Inventory Low number, a notification is sent by email.
 +
 
 +
#'''Allow Inventory Management:''' Enables this feature on the website.
 +
#'''Inventory Notification Email:''' Enter the email address for the person who should be notified of items with a low quantity on hand.
 +
 
 +
=== Purchase Process ===
 
The series of steps taken to purchase an order online.
 
The series of steps taken to purchase an order online.
  
−
=== Step 1: Catalog Shopping ===
+
==== Step 1: Catalog Shopping ====
 
The customer can add items to their shopping cart using the order button for each item. They can add items on the catalog, but remove and modify their cart in the Order Review.
 
The customer can add items to their shopping cart using the order button for each item. They can add items on the catalog, but remove and modify their cart in the Order Review.
  
 
The customer does does not need to be logged in, although if items have discounts available, they will not show until the customer authenticates.
 
The customer does does not need to be logged in, although if items have discounts available, they will not show until the customer authenticates.
−
=== Step 2: Order Review ===
+
==== Step 2: Order Review ====
 
The customer can modify the items in their order. No tax or shipping information is available.
 
The customer can modify the items in their order. No tax or shipping information is available.
  
−
=== Step 3: Authentication ===
+
==== Step 3: Authentication ====
 
If the customer already has a user identity on the website, they can log-in. If you do not, they have to create a user identity by entering email, username, password, first name and last name.
 
If the customer already has a user identity on the website, they can log-in. If you do not, they have to create a user identity by entering email, username, password, first name and last name.
  
Line 28: Line 91:
 
If the customer logs into a current user identity, and that user already has an order started, the two orders will be merged.
 
If the customer logs into a current user identity, and that user already has an order started, the two orders will be merged.
  
−
=== Step 4: Contact and Shipping ===
+
==== Step 4: Contact and Shipping ====
−
=== Step 5: Purchase ===
+
==== Step 5: Purchase ====
−
=== Step 6: Receipt ===
+
==== Step 6: Receipt ====
  
−
== Template Design and Implementation ==
+
=== Template Design and Implementation ===
−
Managing design is accomplished with a layout records. One layout record includes all the html required for the catalog, and another includes all the html required for the order process.
+
Managing design is accomplished with two layout records, the list layout and the detail layout. These are records in the layout table and are selected in the Catalogs table for each catalog on the site.
  
−
=== Catalog Layout ===
+
Database data is added to the catalog layouts using either of two methods, html element style classes, and simple replacements.
−
The catalog requires two layouts
+
* html element classes - use a specific class for an html element and the system will replace its contents with the item's data when the catalog page is rendered.
−
* CatalogList
+
* simple replacement - For some elements like links, include the specific replacement text in the layout and it will be replaced when the catalog is rendered.
−
* CatalogDetails
+
  
−
The system populates the layouts by identifying elements based on class names. For example, to create a region that populates with the itemName, add this to your layout:
+
The system populates the layouts by identifying elements based on class names. For Ecommerce Cart, all replacement class use the prefix 'ec'. For example, to create a region that populates with the ecItemName, add this to your layout:
  
 
  <nowiki>
 
  <nowiki>
−
<span class="itemName"></span></nowiki>
+
<span class="ecItemName"></span></nowiki>
  
−
This is a list of possible item values that can be included:
+
To conditionally include markup that will be removed if a field is not available, add the suffix 'Wrapper' to the class name. For example, if an item has no name, this markup would remove the caption:
  
 
  <nowiki>
 
  <nowiki>
−
<span class="itemThumbnail"></span>
+
<span class="ecItemNameWrapper">Name: <span class="ecItemName"></span></span>
−
<span class="itemImage"></span>
+
−
<span class="itemName"></span>
+
−
<span class="itemOverview"></span>
+
−
<span class="itemAvailability"></span>
+
−
<span class="itemCategory"></span>
+
−
<span class="itemMoreInfoLink"></span>
+
−
<span class="itemYourPrice"></span>
+
−
<span class="itemOptions"></span>
+
−
<span class="itemOrderButton"></span>
+
−
<span class="item"></span>
+
 
</nowiki>
 
</nowiki>
  
−
To conditionally include markup that will be removed if a field is not available, add the suffix 'Block' to the class name. For example, if an item has no name, this markup would remove the caption:
+
The screens and required elements are listed here:
  
−
<nowiki>
+
=====Catalog List Screen=====
−
<span class="itemNameBlock">Name: <span class="itemName"></span></span></nowiki>
+
This screen lists the appropriate items and the item categories. The description for the item included here comes from the OVERVIEW in the Item record. There should be a click for MORE INFORMATION that will take the user to the Item Detail screen.
 +
 
 +
Each item in the list is wrapped in an element with class ecListItem. The list of items is wrapped in an element with class ecList.
 +
 
 +
When the page is assembled, each item will populate a row from the template based on the element with class ecListItem.
 +
 
 +
The completed template will be wrapped in a form tag with the appropriate action. The html for the row should include an order button with class="eclistItemOrderButton" that submits the form. When the row is created, the name of this element will be modified.
  
−
The screens and required elements are listed here:
 
−
* catalogList - This screen lists the appropriate items and the item categories. Each item in the item is wrapped in an element with class repeaterItem. The list of items is wrapped in an element with class repeaterList
 
 
  <nowiki>
 
  <nowiki>
−
<div id="catalogList" style="display:none;">
+
    <div class="ecListEmpty">
−
     <ul class="repeaterList">
+
      <!-- This element, ecListEmpty, is removed if items are found. -->
−
         <li class="repeaterItem">
+
      No Items were found.
 +
    </div>
 +
     <ul class="ecList">
 +
      <!-- This element, ecList, is removed if no items are found. -->
 +
         <li class="ecListItem">
 +
            <div class="ecItemName">Sample Item Name</div>
 +
            <div class="ecItemOrderButtonWrapper"><input type="submit" class="ecItemOrderButton" name="will_be_replaced" value="Order"></div>
 
         </li>
 
         </li>
−
     </ul>
+
     </ul></nowiki>
−
</div></nowiki>
+
 
−
* catalogDetail - This screen shows the details of an item.
+
This is a list of html element classes that can be included:
 +
 
 
  <nowiki>
 
  <nowiki>
−
<div id="catalogDetails" style="display:none;">
+
<span class="ecItemName"></span>
 +
<span class="ecItemThumbnail"></span>
 +
<span class="ecItemImage"></span>
 +
<span class="ecItemCopy"></span>
 +
<span class="ecItemOverview"></span>
 +
<span class="ecItemAvailability"></span>
 +
<span class="ecItemCategory"></span>
 +
<span class="ecItemPriceLines"></span>
 +
<span class="ecItemOptions"></span>
 +
<span class="ecCategoryNavList"></span></nowiki>
 +
 
 +
SHORT TERM -- This is a list of simple replacements. LONG TERM -- these elements will be handled with style class elements, and the layout load will add the replacements in for speed
 +
* ecItemDetailLinkHref - is replaced with a url to the item's details page
 +
* ecListNextHref - is replaced with a url to the next page in a paginated catalog list
 +
* ecListPreviousHref - is replaced with a url to the previous page in a paginated catalog list
 +
* ecListFirstHref - is replaced with a url to the first page in a paginated catalog list
 +
* ecItemImageSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
 +
* ecItemThumbSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
 +
* ecFilterBreadCrumb - If provided in the layout, this is a clickable list of current catalog filters
 +
 
 +
=====Catalog Detail Screen=====
 +
This screen shows the details of an item. The item details shown comes from the FULL DESCRIPTION field in the Item record.
 +
 
 +
The entire details page is wrapped in a form element, and all ordering is done through the form. The order button should be an html button or submit input. If the item has options, they will be added to a region designated by the ecItemOptions class.
 +
<nowiki>
 +
<div id="ecCatalogDetails">
 
     <!-- your catalog details screen layout -->
 
     <!-- your catalog details screen layout -->
 
</div></nowiki>
 
</div></nowiki>
  
−
=== Order Process Layout ===
+
This is a list of html element classes that can be included:
 +
 
 +
<nowiki>
 +
<span class="ecItemThumbnail"></span>
 +
<span class="ecItemImage"></span>
 +
<span class="ecItemName"></span>
 +
<span class="ecItemOverview"></span>
 +
<span class="ecItemAvailability"></span>
 +
<span class="ecItemCategory"></span>
 +
<span class="ecItemYourPrice"></span>
 +
<span class="ecItemOptions"></span>
 +
<span class="ecItemOrder"></span></nowiki>
 +
 
 +
 
 +
 
 +
SHORT TERM -- This is a list of simple replacements. LONG TERM -- these elements will be handled with style class elements, and the layout load will add the replacements in for speed
 +
* ecItemImageSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
 +
* ecItemThumbSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
 +
 
 +
=====Catalog Button panel=====
 +
Each section is wrapped in a div named its corresponding section
 +
*The Catalog section is wrapped in a div named ecCatalogSection
 +
*The Account section is wrapped in a div named ecAccountSection
 +
*The Checkout section is wrapped in a div named ecCheckoutSection
 +
 
 +
==== Order Process Layout ====
 
tbd
 
tbd
 +
 +
==Test Cases==
 +
 +
==Revision History==

Latest revision as of 19:24, 14 March 2018

The ecommerce cart creates an online catalog and order process that integrates with the Invoice Manager. See the Invoice Manager documentation for most terms, roles and settings.

Terms

Catalog 
The list of items which may be purchased online
Order Process 
The series of steps taken to purchase the items selected.
People Record 
A record in the system that identifies one person. Each person can have three addresses -- primary address, billing address, and shipping address
Order 
(aka invoice, receipt) The document that represents a charge to the account. it is an order before it is charged (billed), an invoice when it is charged but not paid, and a receipt when it is paid.

Roles

Customer 
The people record of the individual using the ecommerce cart.
Account 
The entity charged for the order. If the customer has an account set in their Billing tab, that account is charged. if they do not, a new account is created, set in their Billing tab, charged, and the customer is set as the primary contract and billing contact.
Account Primary Contact 
The people record of the individual to be the primary contact for an account. See ecommerce for more details.
Account Billing Contact 
The people record of the individual to be the billing contact for an account. Account notifications are sent to the billing contact. See ecommerce for more details.

How To

Reference

Settings

Use Ecommerce Settings, installed with the Invoice Manager to handle most online purchase settings. The following settings are handled with Ecommerce Cart Settings.

Catalog

  1. Catalog Listing Columns: This is the number of columns displayed when many items are listed out, such as search results and when an entire category is selected.
  2. Catalog Listing Items: This is the number of items displayed per page.
  3. Catalog Item Sort Order: How items are sorted on the catalog; options include: By Alpha Sort Order Field, By Alpha Sort Order Then Oldest First, By Date, By Date Reverse and By Name
  4. Allow Prices in Catalog: When checked, pricing is displayed with an item in the catalog. Pricing is required to allow ordering.
  5. "Retail Price" Caption: This is for comparison only. Leave blank if you do not need this.
  6. "Regular Price" Caption: This is the normal price for the item when the buyer is not eligible for a sale or group discount.
  7. Allow Custom Prices: When checked, items with a 'custom price' will display the custom pricing.
  8. "Custom Price" Caption: When Allow custom prices is checked, this caption is used to identify the custom price.
  9. "Sale Price" Caption: When an item includes a sale price, and is marked on sale, this is the caption that displays with the sale price.
  10. "Your Price" Caption: The lowest possible price is calculated for each item, based on regular price, sales price and any Group Discounts. This caption is used to display that price.
  11. "Manufactured By Caption: When included, this caption precedes the name of the source of this item, as selected for each item.
  12. Catalog Thumbnail Width: This is the width of all thumbnail images displayed in the catalog.
  13. Catalog Image Width: This is the width of all images that are not thumbnails displayed in the catalog.
  14. Catalog Text: Provides a place to edit copy content in the catalog home, search tab, account tab, order list, account select list and add account tab.

Checkout

Checkout settings control the process of purchasing the items in a cart. If you will be using PayPal or an online credit card processor, see the settings below. Configure your online payment gateway with Payment Process Settings.

  1. Email from-address for order receipt: This is the email address the appears as the 'From Address' on receipts sent to customers.
  2. Price Level Free Shipping: When allowed, orders over the Free Shipping Price Level will be given free shipping. The total price is before tax and shipping calculations, but includes all other discounts. Free shipping applies only to those shipping methods with 'Free Shipping at a Price Level' checked.
  3. Price Level Discount: When checked, orders over a specified price total will be given a discount. The total price is before tax and shipping calculations, but includes all other discounts. For example, for a 10% discount on orders over $200, enter 200 in Price Level and 10 in Discount Percentage.
  4. Order Process Text: Contains all text that appears on the order pages as a customer goes through the order process.

Accepting PayPal Payments

With PayPal Express checkout, your visitors will see a PalPal link that takes them to the PayPal site to process charges. After the purchase is complete, they return to your site. To use PayPal, you must create a PayPal account on the PayPal site and update these fields.

  1. Allow Payment by PayPal: Check this box if you want to use PayPal Express checkout.
  2. PayPal Business Name: When you create your PayPal seller account, this is the username they assign to you.
  3. PayPal Post URL: The PayPal Post URL below should be one of the following:
    1. for testing - https://www.sandbox.paypal.com/cgi-bin/webscr
    2. for production - https://www.paypal.com/cgi-bin/webscr

Shipping

Shipping options are configured through the ecommerce settings page.

Group Policies

Go to Admin>>Settings>>Shopping Cart Settings

Use Group Policies to apply special discounts and privileges available to only those people in specific groups. There are two kinds of Group Discounts, Custom Price Discount and Percentage Discount. When Allow Custom Price is checked, members of that group will be eligible for the 'custom price' in any item. When a non-zero Percentage Discount is entered below, anyone in that group receives that discount off of the 'Regular Price'. This discount does not apply to 'Sales Price' or 'Custom Price'. The final price for each item, labeled with the caption 'Your Price', will be the lowest of the calculated price for each pricing strategy.

  1. Block Contact Update Group: If a group is selected, anyone logged in and in this group will not be able to update their contact information. Use this setting to protect user settings that may be controlled by another source such as a synchronization from another database.
  2. All groups in the system are listed here with the option to enter a % discount, to check the "Allow Custom Price" option and to check the "Allow Ordering" option (which applies to items with Order Button Mode set to Group Policy).

Sales Tax

Sales tax will be automatically included on the order based on the state of the shipping address. Individual state sales tax rates are set in the record for the state. The checkout process calculates the tax required but it is up to you to handle all state tax filings. You have the option to edit state tax rates here.

Inventory Management

Use Inventory Management to notify you when an items quantity is low. For each item, enter the Inventory on hand, and Inventory low. Each time an item is purchased, the quantity on hand is decreased. When the quantity is below the Inventory Low number, a notification is sent by email.

  1. Allow Inventory Management: Enables this feature on the website.
  2. Inventory Notification Email: Enter the email address for the person who should be notified of items with a low quantity on hand.

Purchase Process

The series of steps taken to purchase an order online.

Step 1: Catalog Shopping

The customer can add items to their shopping cart using the order button for each item. They can add items on the catalog, but remove and modify their cart in the Order Review.

The customer does does not need to be logged in, although if items have discounts available, they will not show until the customer authenticates.

Step 2: Order Review

The customer can modify the items in their order. No tax or shipping information is available.

Step 3: Authentication

If the customer already has a user identity on the website, they can log-in. If you do not, they have to create a user identity by entering email, username, password, first name and last name.

There are a few restrictions when creating a user identity

  • The email address must be valid, and unique in the system
  • The username must be unique in the system and meet the website's security settings

If the user has already created an order, creating a user identity will update with this contact information.

If the customer logs into a current user identity, and that user already has an order started, the two orders will be merged.

Step 4: Contact and Shipping

Step 5: Purchase

Step 6: Receipt

Template Design and Implementation

Managing design is accomplished with two layout records, the list layout and the detail layout. These are records in the layout table and are selected in the Catalogs table for each catalog on the site.

Database data is added to the catalog layouts using either of two methods, html element style classes, and simple replacements.

  • html element classes - use a specific class for an html element and the system will replace its contents with the item's data when the catalog page is rendered.
  • simple replacement - For some elements like links, include the specific replacement text in the layout and it will be replaced when the catalog is rendered.

The system populates the layouts by identifying elements based on class names. For Ecommerce Cart, all replacement class use the prefix 'ec'. For example, to create a region that populates with the ecItemName, add this to your layout: 

<span class="ecItemName"></span>

To conditionally include markup that will be removed if a field is not available, add the suffix 'Wrapper' to the class name. For example, if an item has no name, this markup would remove the caption: 

<span class="ecItemNameWrapper">Name: <span class="ecItemName"></span></span>

The screens and required elements are listed here:

Catalog List Screen

This screen lists the appropriate items and the item categories. The description for the item included here comes from the OVERVIEW in the Item record. There should be a click for MORE INFORMATION that will take the user to the Item Detail screen.

Each item in the list is wrapped in an element with class ecListItem. The list of items is wrapped in an element with class ecList.

When the page is assembled, each item will populate a row from the template based on the element with class ecListItem.

The completed template will be wrapped in a form tag with the appropriate action. The html for the row should include an order button with class="eclistItemOrderButton" that submits the form. When the row is created, the name of this element will be modified. 

    <div class="ecListEmpty">
       <!-- This element, ecListEmpty, is removed if items are found. -->
       No Items were found.
    </div>
    <ul class="ecList">
       <!-- This element, ecList, is removed if no items are found. -->
        <li class="ecListItem">
            <div class="ecItemName">Sample Item Name</div>
            <div class="ecItemOrderButtonWrapper"><input type="submit" class="ecItemOrderButton" name="will_be_replaced" value="Order"></div>
        </li>
    </ul>

This is a list of html element classes that can be included: 

<span class="ecItemName"></span>
<span class="ecItemThumbnail"></span>
<span class="ecItemImage"></span>
<span class="ecItemCopy"></span>
<span class="ecItemOverview"></span>
<span class="ecItemAvailability"></span>
<span class="ecItemCategory"></span>
<span class="ecItemPriceLines"></span>
<span class="ecItemOptions"></span>
<span class="ecCategoryNavList"></span>

SHORT TERM -- This is a list of simple replacements. LONG TERM -- these elements will be handled with style class elements, and the layout load will add the replacements in for speed

  • ecItemDetailLinkHref - is replaced with a url to the item's details page
  • ecListNextHref - is replaced with a url to the next page in a paginated catalog list
  • ecListPreviousHref - is replaced with a url to the previous page in a paginated catalog list
  • ecListFirstHref - is replaced with a url to the first page in a paginated catalog list
  • ecItemImageSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
  • ecItemThumbSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
  • ecFilterBreadCrumb - If provided in the layout, this is a clickable list of current catalog filters
Catalog Detail Screen

This screen shows the details of an item. The item details shown comes from the FULL DESCRIPTION field in the Item record.

The entire details page is wrapped in a form element, and all ordering is done through the form. The order button should be an html button or submit input. If the item has options, they will be added to a region designated by the ecItemOptions class. 

<div id="ecCatalogDetails">
    <!-- your catalog details screen layout -->
</div>

This is a list of html element classes that can be included: 

<span class="ecItemThumbnail"></span>
<span class="ecItemImage"></span>
<span class="ecItemName"></span>
<span class="ecItemOverview"></span>
<span class="ecItemAvailability"></span>
<span class="ecItemCategory"></span>
<span class="ecItemYourPrice"></span>
<span class="ecItemOptions"></span>
<span class="ecItemOrder"></span>


SHORT TERM -- This is a list of simple replacements. LONG TERM -- these elements will be handled with style class elements, and the layout load will add the replacements in for speed

  • ecItemImageSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
  • ecItemThumbSrc - is replaced with a link to the items image (for details page), or thumbnail for the listing page
Catalog Button panel

Each section is wrapped in a div named its corresponding section

  • The Catalog section is wrapped in a div named ecCatalogSection
  • The Account section is wrapped in a div named ecAccountSection
  • The Checkout section is wrapped in a div named ecCheckoutSection

Order Process Layout

tbd

Test Cases

Revision History

Retrieved from "http://wiki.kmacloud.net/index.php?title=Ecommerce_Cart&oldid=3714"