Difference between revisions of "Ecommerce Cart"

Revision as of 16:49, 7 October 2015

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.

Settings

Use Ecommerce Settings, installed with the Invoice Manager to handle most online purchase 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
• By Name

1. Allow Prices in Catalog: When checked, pricing is displayed with an item in the catalog. Pricing is required to allow ordering.
2. "Retail Price" Caption: This is for comparison only. Leave blank if you do not need this.
3. "Regular Price" Caption: This is the normal price for the item when the buyer is not eligible for a sale or group discount.
4. Allow Custom Prices: When checked, items with a 'custom price' will display the custom pricing.
5. "Custom Price" Caption: When Allow custom prices is checked, this caption is used to identify the custom price.
6. "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.
7. "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.
8. "Manufactured By Caption: When included, this caption precedes the name of the source of this item, as selected for each item.
9. Catalog Thumbnail Width: This is the width of all thumbnail images displayed in the catalog.
10. Catalog Image Width: This is the width of all images that are not thumbnails displayed in the catalog.
11. 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