Ecommerce Cart
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.
Contents
Terms
- Catalog
- The list of items which may be purchased online
- Order Process
- The series of steps taken to purchase the items selected.
Settings
Use Ecommerce Settings, installed with the Invoice Manager to handle most online purchase settings.
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
- 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.
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 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.
Catalog Layout
The catalog requires two layouts
- CatalogList
- 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:
<span class="itemName"></span>
This is a list of possible item values that can be included:
<span class="itemThumbnail"></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>
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:
<span class="itemNameBlock">Name: <span class="itemName"></span></span>
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
<div id="catalogList" style="display:none;"> <ul class="repeaterList"> <li class="repeaterItem"> </li> </ul> </div>
- catalogDetail - This screen shows the details of an item.
<div id="catalogDetails" style="display:none;"> <!-- your catalog details screen layout --> </div>
Order Process Layout
tbd