Flow of the Cart server control

A customer typically arrives at this control by clicking Add to Cart in the Product, ProductList, ProductSearch or Recommendation server controls. The following image depicts the flow of the Cart server control.

—Image—

Cart server control areas

The Cart server controlA server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. consists of 2 major areas. The top part (My Cart) represents the cart with which the customer is currently working. The bottom (My Saved Carts) represents a visitor’s saved carts. Saved cart information appears only when a customer is logged in.

—Image—

The My Cart area displays the Item, SKU, Quantity, List Price, Sale Price, Subtotal and Total. From this cart, a customer can remove items, update the quantity and subtotal information, apply coupons and check out. The customer can also choose to continue shopping or empty the cart.

The My Saved Cart area contains a list of carts the customer has saved and are awaiting checkout. This allows the customer to select products and save them for future purchase. This area contains:

• the name of each cart
• the last time it was updated
• how many items in each cart
• the subtotal of each cart
• options to
  • delete a saved cart
  • create a new cart
  • continue shopping

Clicking a saved cart makes it the current cart, and displays its products in the Your Cart area. A customer can then proceed to check out.

Working with a cart

This section explains how a logged-in customer would use the Cart server control. The following figure helps you locate key features of the Cart.

—Image—

1. Create New Cart button.
2. Item name link.
3. Cart name edit button.
4. Item quantity field.
5. Delete item button.
6. Continue Shopping button.
7. Apply coupon button.
8. Empty cart button.
9. Checkout button.
10. Delete cart button.

Adding an item to a cart

Adding an item to a cart

Items are added to a cart when a customer clicks Add to Cart in the following server controls.

• Product
• ProductList
• ProductSearch
• Recommendation

When Add to Cart is clicked, the item is appended to the current cart’s list of items. If the customer does not have a cart, one is created.

Creating a new cart

Creating a new Cart

A customer automatically creates a new cart the first time a product is added to it. If needed, a customer can create multiple carts while using the Cart server controlA server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified.. This allows for the grouping of products being purchased. For example:

• customers create carts based on concepts, such as, Son’s Birthday or Item Type.
• customers use separate payment types. For example, a customer places some products on one credit card and the rest on another. By having 2 carts, a customer can proceed with 2 separate checkouts.
• customer needs to prioritize purchases. For example, a customer wants to purchase certain products, but cannot afford them right now. The customer can add these products to a separate cart, then continue to purchase affordable products now. This helps customers remember purchases they want to make, driving additional sales for your site.

To create a new cart:

1. Click Create New Cart in the Saved Cart area. The button is replaced with a text box.
2. Enter the name of the new cart in the text box.
3. Click OK.

When the customer clicks OK, the cart is added to the list of Saved Carts and becomes the active cart. A customer can then click Continue Shopping to select products to add to the new cart.

Displaying an item's information

Displaying an item’s information

In the Cart server control, a product’s title is a link. When clicked, it takes you to the product’s detail page. To go back to the cart, click your browser's Back button.

By default, the server control uses the product’s QuickLink information to provide a path to the product. You can override this functionality by adding a new path to the TemplateProduct property.

Assigning or changing the name of the cart

Assigning or changing the name of the cart

Assigning a name to a cart makes it easier for customers to identify a cart in their saved cart list. A customer can assign or change the name of a cart by clicking Edit () next to the cart’s name.

When clicked, the button and name are replaced with a text box that allows the customer to enter a new name for the cart.

Changing an item's quantity

Changing anitem’s quantity

To change a product’s quantity, enter the new amount in the Quantity column’s textbox, located in the same row as the product you want to change. Next, click Update Subtotal. This recalculates the price of the product and updates the subtotal.

Removing an item from the cart

Removing an Item from the cart

A customer can remove a product from the cart by clicking Remove From Cart () in the Quantity column. When the customer clicks the button, the product is removed from the cart, and the subtotal is updated.

Continuing to shop

Continuing to shop

A customer can continue to shop by clicking Continue Shopping. This redirects the visitor to a template defined in the cart server control’s TemplateShopping property. For example, you might send the customer to a page containing a ProductList or ProductSearch server control. See also: ProductList and ProductSearch templated server controls.

As a developer, you need to add the path to this page to the TemplateShopping property. If the page is in the same folder as the page that contains the Cart server control, just enter the page’s name.

Applying coupons

Applying coupons

If coupons are defined in the Workarea and the EnableCoupons property is set to True, a customer can enter coupons to discount the purchase. How coupons affect the purchase is defined in the Workarea > Settings > Commerce > Catalog > Coupons. See also: Using coupons.

To apply a coupon, a customer clicks Apply Coupon.

The button area changes to text box where the customer can enter the Coupon Code. The customer then enters a code and clicks OK. Next, the discount appears above the Subtotal, and the customer can continue to shop, check out, view other carts, or delete the coupon by clicking Remove Coupon.

Emptying the current cart

Emptying the current cart

To remove all products from the current cart, a customer clicks Empty Cart. When clicked, a dialog box appears and the customer can click OK or Cancel.

Checking out

Checking out

When a customer is satisfied that the cart contains all products they want, the quantity of each product is correct and all coupons have been applied, the customer can click Checkout. At that point, the customer is redirected to the page that hosts the Checkout server control. The path to the page is defined in the TemplateCheckout property. If the page containing the Checkout server control is in the same folder as the Cart server control, just enter the page name.

If a cart includes an item that is out of stock, the Checkout button is disabled (hidden).

Deleting a saved cart

Deleting a saved cart

A customer can delete a saved cart by clicking Delete Cart.

The following chart represents the options and processes of the Checkout Server Control.

Logging in or setting up an account

The login portion of the Checkout server control accommodates these types of customers.

• Existing customers

  If an existing customer is not logged in when the customer reaches this server control, it prompts the customer to log in. Optionally, this screen could have a link that lets an existing user to recover a password. To enable this link, add a template path to the control's TemplateRecoverPassword property.

  After a customer who previously purchased from this site logs in, billing and shipping information is retrieved and appear by default. The visitor can review and edit this information. However, Ektron does not store credit card numbers, so that information must be entered each time.

• First-Time Customer. customers who have not logged in before but who wish to create an account

  If a customer has not purchased from your site before and wants to set up an account, the customer clicks Create Profile and Checkout. On the new screen, the customer enters billing information including a password. After completing that screen, a membership user account is created, and the customer is logged in. The new user can then proceed through the checkout. The next time this visitor logs in, the customer is treated as an existing customer.

• Guest Account Registration. customers who wish to make one-time only purchase and not set up an account.

  The Checkout server control provides a guest checkout feature for customers who do not want to set up an account on your site. To enable this feature, set the AllowGuestcheckout property of the Checkout server control to true.

  —Image—

  

  If a user clicks Checkout Without Profile, the customer proceeds to a version of the billing screen that does not ask for a password. The rest of the checkout is the same.

  Although the customer can proceed through the checkout like other customers, if the customer wants to checkout in the future, the customer must re-enter billing and shipping information. Customers who use the guest checkout feature can view their orders using the Order List server control if its GuestOrderView property is set to true. See also: Order workflow.

Checkout screens

The Checkout server controlA server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. has several sections, each representing a portion of the checkout process.

Billing information

Billing information

Prompts customers to enter or update billing information, including:

• Name
• Company (Optional)
• Street Address, City, State, Postal Code, Country

  NOTE: If a customer chooses a country other than the United States, no field validation is applied to the postal code by default. To apply country-specific postal code validation, see Applying field validation for non-U.S. postal codes.

• Phone
• email address (appears when a visitor is creating a new account or doing a guest checkout)
• Password (appears when a visitor is creating a new account or doing a guest checkout)

—Image—

Applying field validation for non-U.S. postal codes

Applying field validation for non-U.S. postal codes

1. Search the XSLTs for EktronCheckout_PostalField. The standard US Postal RegEx is applied to all input fields of this class.
2. Remove that class.

   WARNING! Be careful to remove only this class name; otherwise, the CSS styling may not be applied properly and the layout will be altered.

3. Add an attribute to each postal-code input field in the XSLTs with the following name: data-ektron-validation-regex. Then, add the desired RegEx as the value of this attribute. The RegEx expression will validate the user's input.

For the RegEx expression, you should be able to find one for the target country via a Web search. Alternatively, you can start here: http://www.regular-expressions.info/.

Canadian postal code solution

The following example shows how to apply field validation for Canada.

Attribute for U.S. postal code regex:

<xsl:attribute name="data-ektron-validation-regex">/^\d{5}(-\d{4})?$/
</xsl:attribute>

Attribute for Canadian postal code regex:

<xsl:attribute name="data-ektron-validation-regex">/^([ABCEGHJKLMNPRSTVXY]
  \d[ABCEGHJKLMNPRSTVWXYZ])\ {0,1}(\d[ABCEGHJKLMNPRSTVWXYZ]\d)$/
</xsl:attribute>

The following sample shows the entire postal code input block taken from billing info XSLT. Three checkout-related files that need these changes (Checkout_BillingInfo.xsl, Checkout_BillingInfoEntry.xsl and Checkout_ShippingInfo.xsl) are updated in the sample for Canadian-only postal codes.

<input class="EktronCheckout_PostalCode EktronCheckout_Row_RightContents" >
  <xsl:attribute name="name">EktronCheckout_BillingInfo_PostalCode_
    <xsl:value-of select="$ControlId"/></xsl:attribute>
  <xsl:attribute name="id">EktronCheckout_BillingInfo_PostalCode_
    <xsl:value-of select="$ControlId"/></xsl:attribute>
  <xsl:attribute name="value"><xsl:value-of select="/root/billingInfo/postalCode"/>
    </xsl:attribute>
  <xsl:attribute name="data-ektron-validation-regex">/^([ABCEGHJKLMNPRSTVXY]
    \d[ABCEGHJKLMNPRSTVWXYZ])\ {0,1}(\d[ABCEGHJKLMNPRSTVWXYZ]\d)$/</xsl:attribute>
</input>

Shipping information

Shipping information

Add or edit shipping information. By default, it uses the billing address as the shipping address. From this screen, customers can:

• add new addresses
• edit or delete existing addresses
• if more than one address is entered, pick address for current order
• proceed to the next step or back to the previous page

—Image—

When a logged-in customer adds a new address, it is stored with the account information in Ektron.

Shipping method

Shipping method

Select the type of shipping for products. Shipping methods that appear are defined in the Workarea > Settings > Commerce > Shipping > Methods. See also: Configuring shipping methods.

—Image—

Review order

Review order

Displays information about products being purchased: their price, shipping charges, discounts, and taxes. At this point, if customers want to modify their cart, they click Edit your cart. For example, a customer wants to apply a coupon to the cart. For this link to work properly, add the path to the template that contains the Cart server controlA server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. to the Checkout server control’s TemplateCart property.

—Image—

Submit order

Submit order

On the Submit Order page, a customer enters payment information. The customer can pay by check, credit card, or PayPal, depending on what has been set up in the eCommerce Payment Options screen. When a customer enters the information, the customer clicks Submit. At that point, the charge is submitted to the payment gateway, and the order is posted in Ektron. See also: Processing orders.

—Image—

Order complete

Order complete

The Order Complete page displays a Thank You note, the order ID, and links to continue shopping or view an order’s history.

The Continue Shopping link appears when you add the path of a template that allows a customer to find products to the TemplateShopping property. For example, you send them to a template containing a ProductSearch or ProductList server control.

The Order History link appears when you add the path of a template containing the OrderList server control to the TemplateOrderHistory property.

Adding a custom field to the Checkout control

This example demonstrates how to add a custom field to the Checkout control's Billing Info entry screen.

Step1: Add a field to the XSL

Step1: Add a Field to the XSL

In the Workarea/XSLT/Commerce/Checkout/ folder, look for the Checkout_BillingInfo.xsl file. In the file, locate EktronCheckout_BillingInfo_Company_. Under the bulleted list item for company, add the following:

<li class="EktronCheckout_Required EktronCheckout_SerializableContainer">
      <label class="EktronCheckout_Row_LeftContents">		
	  <xsl:attribute name="for">
   EktronCheckout_BillingInfo_CustomField_<xsl:value-of select="$ControlId"/>
          </xsl:attribute>
        <span class="EktronCheckout_RequiredSymbol">*</span>
        A custom field
      </label>
      <input class="EktronCheckout_Company EktronCheckout_Row_RightContents">
         <xsl:attribute name="name">
   EktronCheckout_BillingInfo_CustomField_<xsl:value-of select="$ControlId"/>
         </xsl:attribute>
         <xsl:attribute name="id">
   EktronCheckout_BillingInfo_CustomField_<xsl:value-of select="$ControlId"/>
          </xsl:attribute>
         <xsl:attribute name="value">ABCXYZ</xsl:attribute>
      </input>
 </<li>
        

Important notes:

• EktronCheckout_Required. Denotes that the field is required and will impose validation. EktronCheckout_NotRequired is also acceptable.
• EktronCheckout_SerializableContainer. Tells the checkout control to process and include the field in this <li> tag with the callback.
• EktronCheckout_BillingInfo_CustomField_ . The name of the field, where EktronCheckout_BillingInfo is replaced with param__ internally. The last portion, CustomField, is how the field will be referenced.

—Image—

Step2: Get the value of the field

Step2: Get the value of the field

In the code-behind of the page with the Checkout control, you need the following imports:

using Ektron.Cms.Controls;
using Ektron.Cms.Controls.ECommerce;
using Ektron.Cms.Controls.ECommerce.Checkout;

Next, place the following into the Page_Init method:

cmsCheckout.FilterAjaxCallback += this.HandleFilterAjaxCallback;

Then implement the HandleFilterAjaxCallback method:

protected void HandleFilterAjaxCallback(object sender, 
FilterAjaxCallbackEventArgs e)
{
     string callbackParameters = e.EventArgs;
     System.Collections.Specialized.NameValueCollection data =
Ektron.Cms.Common.EkFunctions.ConvertToNameValueCollection(callbackParameters,
 true);
      string customFieldValue = data["param__customfield"];
}

Upon completing the Billing Info screen, the data is returned as part of the EventArgs, with the prefix param__ (note the double underscore).

—Image—

It can then be obtained directly by converting the string to a NameValueCollection (or other construct). Developers are free to call their own methods from here.

CurrencySelect properties

• Authenticated (String)
• CacheInterval (Double)
• CustomXml (Code-behind Only) (String)

  Lets you inject custom XML into the generated XML before being processed by the XSLTExtensible Stylesheet Language Transformations. Enter a string of XML that you want to make available to the XSLT as follows:

  <root><customXml>custom-xml-inserted-here</customXml></root>

• DisplayXslt (String)

  By default, the control uses siteroot\Workarea\Xslt\Commerce\CurrencySelect.xsl.

• DoInitFill (Boolean)
• Hide (Boolean)
• Language (Integer)
• Stylesheet (String)

   

• SuppressWrapperTags (Boolean)

A customer typically arrives at this control by clicking a link placed on a main page, master page, or menu. The following figure shows the flow of the MyAccount server control.

Editing personal information

The Personal Information area lets customers view and edit some information contained in their profile. By default, a customer can edit their First Name, Last Name, email Address, and Password. By adding a list of Custom User Property IDs to the CustomPropertyID property, you can let customers view and edit custom properties in their profile. See also: Creating custom user properties.

A customer can change the information in the Personal Information area by clicking Edit in the lower left corner of this area. The resulting page lets the person change any information in this area. When done, the customer clicks Save Changes to save the changes and return to the My Account page.

Editing a Billing Address

The Billing Address area lets customers view and edit their billing address information. A customer can edit their Name, Company, Address, City, State, Postal Code, Country, and Phone number. This information is used for billing purposes when the customer makes a purchase. Credit card companies typically want part or all of this information to match a customer’s credit card account information when making a purchase.

To edit a customer’s billing address, click Edit in the lower left corner of the Billing Address area. The resulting page let the person change any information in this area. When done, a customer clicks Save Changes to save the changes and return to the My Account page.

Editing a shipping address

The Shipping Address area lets customers view, edit, delete or add a new address to their shipping address information. The fields in this area are the same as those in the Billing Address area with 2 exceptions: a Same as Billing check box, and a Default Address check box. The Same as Billing Address check box lets customers place a check mark in the box and use their billing address information as their shipping address. The Default Address check box lets customers specify the current shipping address as the default they want to use when making future purchases.

To edit a customer’s shipping address, click Edit in the lower left corner of the Shipping Address area. The resulting page let the person change any information in this area. Note that a customer must uncheck Same as Billing to be able to edit the shipping address. Otherwise, it is locked to the billing address. When done, a customers clicks Save Changes to save the changes and return to the My Account page.

Adding a new shipping address

Adding a new shipping address

To add a new shipping address, the customer clicks Add New Address located in the bottom center of the Shipping Address area. The resulting page lets the person enter new shipping address information. Note that the Same as Billing checkbox is not available when adding a new address. When done, a customer clicks Save Changes to save the changes and return to the My Account page.

Deleting a shipping address

Deleting a shipping address

To delete a shipping address, the customer clicks Delete Address at the bottom of the Shipping Address area. The visitor is asked to confirm. If the customer does and there are no other shipping addresses, the billing address is used as the shipping address. If the shipping address is the same as the billing address, you cannot delete it.

The following image depicts the flow of the OrderList Server Control.

Viewing a customer orders list

When customers arrive at this server control, they see the View All Orders portion of the server control.

—Image—

This part of the server control displays a list of submitted orders. Customers can view each order's date, confirmation number, and status. When the number of orders exceeds the number defined in the MaxResults property, the list is paged and a user can go among pages with the links provided.

A customer can click the confirmation number to view the Order Details screen.

—Image—

To go back to the list of all orders, customers click View All Orders.

Viewing order details

• Status. The status of the order. See also: Order statuses.
• Order Date. The date the order was submitted. This is the date an order went through the checkout process.
• Order Number. The order's ID number.
• Ship To:. Information needed to ship the order to customer.
  • Person to whom the product is being shipped
  • Company Name (optional)
  • Street Address
  • City and State or Region
  • Country
  • Zip Code
  • Tracking Number. this field appears if a tracking number has been entered in the View Order screen in the Workarea.
• Bill To:. Displays information about who is being billed for the order.
  • Person paying for the order
  • Credit Card information. For security purposes, only the last 4 digits appear.
  • Company Name (optional)
  • Street Address
  • City and State or Region
  • Country
  • Zip Code
• Description. A list of products in the order. When the path to the product server control is entered in the TemplateProduct property, the product’s title becomes a hyperlink.
• Quantity. The total number of each product.
• Sale Price. The per unit price of each product.
• Total. The total amount paid for each product ordered. This is the Unit Price multiplied by the Quantity.
• Subtotal. The sum of all the order’s line products before additional charges or discounts, such as tax, shipping and coupons.
• Coupon Total. The total amount discounted, based on all applied coupons.
• Tax. The tax amount applied to this order. See also: Calculating an order’s tax amount.
• Shipping. The amount charged to ship the order to the recipient. See also: Configuring eCommerce shipping screens.
• Total. The sum of all charges, including all line items, tax, shipping and handling.

Displaying a product

A product is an item that has no kit, bundle or subscription information associated with it.

—Image—

When displaying a simple product, the Product server control displays the following information:

• Title (optional). The Title field in the product’s Smart Form. A content editor enters this information when creating a product in the Workarea. This area does not use the title of the product in Ektron’s Workarea.
• Description (optional). The Description field in the product’s Smart form. A content editor enters this information when creating a product in the Workarea.
• Image Gallery. The Media tab when creating or editing a product. The Gallery Display property for each image on the Media tab must be set to Yes. In the Image Gallery, images are displayed at their smallest size. When a customer clicks an image, the full size version appears. See also: ActiveTopics.
• Price. The Pricing tab when creating or editing a product. This is the price defined in the Our Sales Price area. This is not the list price. See also: ActiveTopics.
• Add to Cart. This button appears in the server control when:
  • a path to the Cart server control is defined in the Templatecart property
  • the product is buyable. When a product is not buyable, information about the product appears, but customers cannot add it to their cart. This property is set in the Workarea when creating or editing a product.
  • the ShowAddToCart property is set to True

  When customers click this button, the product is added to their cart and they are sent to a template containing the Cart server control.

  You can hide this button by setting the ShowAddToCart property to false. This lets you show details of a product, but not offer it for sale. For example, you have a product that is no longer for sale, but you want to allow people who purchased the product to view its details.

  Also, by using code-behind to dynamically set the property, you could create code that looks at your inventory system and hides the button depending on whether a product is in stock.

Using the Add to Cart button with aliasing

Using the Add to Cart button with aliasing

When a product has an alias path associated with it:

• Make sure the TemplateCart property’s path is relative to the site root. For example:

  TemplateCart="Developer/Commerce/CartDemo.aspx"

• Add the following to the code-behind page. This example is in C#:

  protected void Page_Init(object sender, EventArgs e)
  { Utilities.RegisterBaseUrl(this.Page); }

Displaying a bundled product

A bundled product is made up of multiple products that have been grouped together for sale as one product.

—Image—

See also: ActiveTopics.

When displaying a bundled product, the Product server control displays all information displayed in a Product as well as information about the individual components of the bundle.

The This Bundle Includes area includes products listed on the Items tab for a Product Bundle in the Workarea. A content editor adds existing products to this tab when creating the bundle.

Any products on the tab are displayed with the image, title and description for each product. A link to additional information about each product is also displayed.

Displaying a complex product

A Complex Product lets the customer choose between variations of a product. For example, if your site sells books, variant selections might be Paperback or Electronic.

—Image—

See also: ActiveTopics.

When displaying a Complex Product, the Product server control displays all of the information displayed in a Product in addition to information on product variants. The Variants area includes products listed on the Items tab. A content editor adds products to this tab when creating content.

Products on the Items tab are displayed with a radio button, image, title and description. A link to additional information about each product is also displayed. The radio buttons are used to select which product will be added to the cart.

Displaying a kit

A kit lets the customer select product options, which can affect the product’s price. There is no limit to the types of options you can add, nor to the number of items in an option. For example, a customer purchasing a computer can add RAM, a hard drive, and a larger monitor.

—Image—

See also: ActiveTopics.

When displaying a kit, the Product server control displays all information displayed in a product in addition to options and subtotal information.

The Options area displays product options based on the Item tab for a kit in the Workarea. Options are divided into groups. A radio button, name and price appears for each item. The radio button lets you select one item from each group.

The Subtotal area shows the updated cost of the product with all options.

There are several ways customers might arrive at the ProductList server control, such as

• when a list of products appears on the side of a page
• through a link in a master page
• when they click Continue Shopping on the Cart or Checkout server control.

Sorting the product list

The ProductList server control lets a customer sort by:

• Title
• SKU
• Price High to Low
• Price Low to High
• Highest Rated
• Lowest Rated and Most Ratings

You can set the default sort order by setting the SortMode property.

For the Highest Rated, Lowest Rated and Most Ratings sorting options to work as intended, a ContentReview server control should be associated with each product. This lets customers rate your products.

For example, place a ContentReview control on the Master page of the template that display products, and set its DynamicParameter property to ID. Then, when customers view the product, they can rate and comment on it.

Enabling the Add to Cart button

Customers can add a product to their cart directly from the Recommendation server control by clicking Add to cart next to a product. This link appears below the price and allows them to skip the product’s information page and add the product directly to their cart.

—Image—

By default, this button appears when the following conditions are met:

• The product is buyable. That is, there is a check mark in the Buyable property for a product in the Workarea. See also: Creating a catalog entry.
  —Image—

  

• The product has an In Stock quantity of at least one.
  —Image—

  

• The TemplateCart property has a cart’s template location defined.

In addition, if a product has an alias path associated with it, you need to:

• Make sure the TemplateCart property’s path is relative to the site root. For example:

  TemplateCart="Developer/Commerce/CartDemo.aspx"

• Add the following to the code-behind page. This example is in C#:

  protected void Page_Init(object sender, EventArgs e)
  { Utilities.RegisterBaseUrl(this.Page); }