Difference between revisions of "Ecommerce Cart"

Revision as of 19:34, 22 September 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.

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

Each required catalog screen is contained in a div wrapper, marked display:none. AS the code needs each section, it is converted to display:block.

<div id="catalogList" style="display:none;">
    <!-- your catalog list screen layout -->
</div>
<div id="catalogDetails" style="display:none;">
    <!-- your catalog details screen layout -->
</div>

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. It can include any of the following elements in any order. Each item can have a wrapper that is marked display:none if the item does not contain required information.

For instance, if the template includes <span class="itemImageBlock">image caption<span class="itemImage">theImage</span></span> if no image is available, the image caption would be blocked

Order Process Layout

tbd