Using the eCommerce Server Controls
Ektron provides a complete set of eCommerce 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.s that let you set up an online marketplace where customers (site visitors) can purchase merchandise, services or content. Customers interact with these server controls on your site.
- Cart—view products in a shopping cart, create new carts, and apply discounts.
- Checkout—check out.
- Currency Select—select a currency.
- MyAccount—view and change their account information.
- OrderList—view a list of processed orders.
- Product—view a product's details and add it to their shopping cart.
- ProductList—search for products or view a list of products.
- Recommendation—get recommendations on other products.
Most eCommerce server controls let customers move from one control to another via template properties that let you define the location of another server control. For example, if you define the path to the Cart server control in the Product server control’s TemplateCart property, customers are directed to the Cart control when they click the Product control's Add to Cart button.
Ektron’s server controls let you insert standard methods and properties within the Visual Studio environment. This means that you can see the effect of your changes in real time; you don’t have to modify a page and then compile to see results.
You can insert server controls using drag and drop or programmatically. You can also use databinding to retrieve and display data from Ektron.
Ektron provides a complete set of eCommerce server controls that let you set up an online marketplace where customers can purchase merchandise, services or content.
The following list shows typical actions a customer might perform when visiting your eCommerce site and how you can facilitate these actions.
- Viewing account information—Create a link in the master page that leads to the template containing the MyAccount server control. This link should be available from any page.
- Viewing previous and current orders—Create a link in the master page that leads to the template containing the OrderList server control. This link should be available from any page.
- Changing the currency type—Add the CurrencySelect server control to a master page. This server control should be available from any page.
- Searching for products—Either create a link to the template containing the ProductSearch server control. Or, on the master page, add a textbox that passes the text to a hidden ProductSearch server control and post the results to a separate template. This link or textbox should be available from any page.
- Viewing a list of products—Create a template that contains the ProductList server control. This template might be the first page customers see when they view the eCommerce portion of your site. Whenever you want to display a list of products based on a catalog, taxonomy or a list content IDs. For example, you could create a list of products in a panel on the right side of your website.
- Viewing a product’s details—Create a template that contains the Product server control. Use this whenever a customer needs to view details of a product. Set any of the following server control’s TemplateProduct property to the path of this control. This makes a product’s title being displayed by one of these controls a clickable link that takes the customer to this control.
- ProductSearch
- ProductList
- OrderList
- Cart
- Recommendation
- Viewing additional products associated with another product—Add the Recommendation server control to a template that contains a Product server control and set the Recommendation control’s DynamicProductParameter property to the QueryString parameter that’s used to pass a products ID. When ever you want to present a customer with cross-sell and upsell opportunities associated with a given product.
- Adding a product to their shopping cart—Set the TemplateCart property in the following server controls to the path of the Cart server control. Setting this property is one of the requirements for the Add to Cart button or link to appear in these controls.
- ProductSearch
- ProductList
- Product
- Recommendation
NOTE: In addition to setting the above property, a product must be in-stock, not archivethe state of content upon reaching its end date. What happens next is determined by your choice at the content's Schedule tab > Action on End Date options field. Choices are * Archive and remove from site (expire) * Archive and remain on site * Add to CMS Refresh Reportd and buyable. Otherwise, the Add to Cart button or link does not show for a product.
- Use this when you want to let customers add products to their shopping cart.
- Viewing products in their shopping cart—When a customer adds a product to their cart, they are sent to the Cart server control. You should also create a link in the master page that leads to a template containing this control. The link should be available from any page.
- Checking out and paying for their selected product—Add the Checkout server control to a template and add that template’s path to the Cart server control’s TemplateCheckout property. When you do, the Checkout button in the Cart server control becomes active. You must set this up for customers to checkout.
Customizing eCommerce Server Controls with Event Hooks
The eCommerce server controls contain event hooks so you can customize or manipulate them. To use these event hooks, create a handler for each needed event in the code-behind of the ASPX page that contains an eCommerce server control. Then, in that page’s OnInit method, hook each event.
- PhaseChange—Used only in 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. and called when the current phase is about to change. Supervise phase changes and allow or prevent changing as needed. It also lets you jump to a specified phase. For example, you could jump to a passed phase, prevent the phase from changing from the current one under certain conditions, or jump to a phase that is not necessarily the next one in line.
- PreProcessXml—Called immediately before the control’s XML is transformed. Inspect or manipulate the server control’s XML before being processed. This is the only time the XmlDoc property should be used to access the controls XML.
- PostProcessXml—Called immediately after the control’s XML is transformed. Work with processed transformed XML output inside the Text property before sending it to the browser. This allows simple string manipulation of the server control’s markup.
- FilterAjaxCallback—Called when an Ajax-Callback event occurs. Inspect or modify callback parameters. For example, you could use this event to receive custom values entered in a page.
- PostLogin—Used only in the Checkout server control and called immediately after a (possibly new) user logs in with this control. Calls custom code immediately after a returning user logs in with an email and password. Or, immediately after a new customer fills out the billing info screen. For example, you could add code that lets new customers sign up for Web Alerts after they add their information to the billing screen.
Using the Cart Server Control
A customer typically reaches the Cart server control from a product description or list page. A product description page contains a Creating Product Types and Catalogs. Product list pages contain server controls that create a list of products, such as ProductList, ProductSearch or Recommendation controls. These controls contain a button or link that allows a customer to add the product to the cart. For reference information, see Cart.
You could also create a link to the cart from a master page or menu that lets customers view their cart. This link lets a customer navigate directly to the cart when they arrive at your site.
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. See Also: Creating a New Cart.
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.
- Create New Cart button.
- Item name link.
- Cart name edit button.
- Item quantity field.
- Delete item button.
- Continue Shopping button.
- Apply coupon button.
- Empty cart button.
- Checkout button.
- Delete cart button.
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
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:
- Click Create New Cart in the Saved Cart area. The button is replaced with a text box.
- Enter the name of the new cart in the text box.
- 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
In the Cart server control, a product’s title is a link. When clicked, it takes you to the product’s detail page. To navigate 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 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
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. The image below shows the Atrium Table quantity change to 3.
) 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
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: Using the ProductList Server Control and Using the eCommerce 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
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
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
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
A customer can delete a saved cart by clicking Delete Cart.
Using the Checkout Server Control
Customers typically arrive at this server control by clicking Checkout on the Cart server control. They also might reach this server control from a Checkout link you create on your site. For reference information, see Checkout.
IMPORTANT: When using the Checkout server control, your website should have an SSL certificate installed. Set its IsSSLRequired property to True. This protects your customers’ payment information during transmission. Do not use a self-signed SSL certificate—obtain one from a trusted certificate authority.
The control provides a navigational aid that indicates the customer's step in the checkout process. At any point, the customer can move forward to the next step or back to a previous one. When appropriate, some steps do not appear. For example, if merchandise is not tangible, the shipping screen does not appear.
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
TemplateRecoverPasswordproperty.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 (circled below) for customers who do not want to set up an account on your site. To enable this feature, set the
AllowGuestcheckoutproperty of the Checkout server control totrue.—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
GuestOrderViewproperty is set totrue. See Also: Managing Customer Orders
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
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)
Applying Field Validation for non-U.S. Postal Codes
- Search the XSLTs for
EktronCheckout_PostalField. The standard US Postal RegEx is applied to all input fields of this class. - 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.
- 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 below 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
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
When a logged-in customer adds a new address, it is stored with the account information in Ektron.
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.
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.
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
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
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_NotRequiredis 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_BillingInfois replaced withparam__internally. The last portion,CustomField, is how the field will be referenced (see below).
Step2: Get the Value of the Field
In the codebehind 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).
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.
Using the Currency Select Server Control
The CurrencySelect server control lets a customer select the monetary type he will use to make purchases. When a currency is selected, eCommerce server controls use it for that order. If the customer closes the browser, the currency needs to be selected again the next time the site is visited.
For a currency to appear in the CurrencySelect server control, enable it in the Workarea > Settings > Commerce > Currencies screen. See Also: Configuring Currencies
CurrencySelect Properties
The following are Ektron-specific 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. properties. You can find information about native .NET properties such as font, height, width and border style in Visual Studio® help.
- Authenticated (String)
Indicates if you are logged into the CMS Explorer and can use it to browse to content, collections, and so on. See Also: Browsing Your Ektron Site Using CMS Explorer.
- CacheInterval (Double)
The number of seconds that a 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.’s data is cached. The default is 0 (zero). For example, if you want to cache the data for 5 minutes, set to 300. See Also: Caching with Server Controls.
- 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>
See Also: Displaying Custom XML in Ektron’s Server Controls.
- DisplayXslt (String)
If desired, enter a relative or absolute path to an Xslt that determines the display of the page.. By default, the control uses
CurrencySelect.xsl. This file is located insiteroot\Workarea\Xslt\CommerceIMPORTANT: If you specify an external file, do not store this file in the Workarea folder. If you store this file in the Workarea folder, the file will be lost when you upgrade.
- DoInitFill (Boolean)
By default, Fill occurs during the Page_Init event. Set to false if you want to postpone the fill-action until later. In this case, Fill is automatically called during the Page Render event. You might do this if you need to set or change a property on the control in code-behind and have it render with your changes shown.
- Hide (Boolean)
Hides or displays the output of the control in design time and run time.
- True—Hide the control output.
- False—Display the control output.
- Language (Integer)
Set a language for viewing content; shows results in design-time (in Visual Studio) and at run-time (in a browser).
- Stylesheet (String)
Specify the path to a style sheet for use with this server control. The location can be relative or absolute. Leave blank to use the default style sheet.
- SuppressWrapperTags (Boolean)
Suppresses the output of the span/div tags around the control.
- True—Suppress wrap tags.
- False (default)—Allow wrap tags.
Using the MyAccount Server Control
If the customer is not logged in and arrives at this control, one of the following happens:
- the visitor receives a message about not being logged in. This happens when the server control’s
RedirectUrlproperty is empty and theweb.configfile’s<add key=”ek_RedirectToLoginURL” value=”” /> value is blank. - the visitor is redirected to a login page and once logged in, is sent back to the template containing the MyAccount server control. This happens when either the server control’s
RedirectUrlproperty contains the path of a template that contains a Login server control or when theweb.configfile’s<add key=”ek_RedirectToLoginURL” value =”” /> valueis set to the path of a template that contains a Login server control. If the control’sRedirectUrlproperty and theweb.configfile contain different locations, theRedirectUrlproperty in the control overrides theweb.configfile.
For information about the MyAccount server control properties, see MyAccount.
Typically, the information displayed in this control is collected the first time a customer goes through the checkout process. A customer’s information might appear in the Personal Information area before they have been through the checkout process if they are a current Ektron user or registered membership user.
If a logged-in customer arrives at this server control and is missing required information, it must be entered before continuing. For example, a customer needs to provide a Last Name or E-mail Address.
As a developer, you need to create a link to this control in a site location that appears only after log in. For example, you might place the link on a menu or on a master page that appears after a customer logs in.
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
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
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.
Using the OrderList Server Control
Customers also can reach this control through a link at the end of the Checkout process. The link appears when the Checkout server control’s TemplateOrderHistory property contains the path to the template containing the OrderList server control. For information about the OrderList server control properties, see OrderList.
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.
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 navigate among pages with the links provided.
A customer can click the confirmation number to view the Order Details screen.
To navigate 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
TemplateProductproperty, 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.
Using the Product Server Control
This control handles each class of product Ektron provides such as Products, Kits, Bundles or Subscriptions without having to make any adjustments to the control. For information about the Product server control properties, see Product.
Customers typically reach this server control when they click a product from either the ProductSearch or ProductList server control. When customers clicks a product, title or image in either of these controls, they are forwarded to the Product server control.
In addition, customers can reach this control from the Cart server control. In that control, customers click a product’s title and are taken to the Product server control.
When a customer has viewed the product and decided to purchase it, they click Add to Cart in the control.
Displaying a Product
A product is an item that has no kit, bundle or subscription information associated with it.
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: Using the eCommerce Server Controls
- 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: Using the eCommerce Server Controls
- Add to Cart—This button appears in the server control when:
- a path to the Cart server control is defined in the
Templatecartproperty - 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
ShowAddToCartproperty 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
ShowAddToCartproperty 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.
- a path to the Cart server control is defined in the
Using the Add to Cart Button with Aliasing
When a product has an alias path associated with it:
- Make sure the
TemplateCartproperty’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.
See Also: Using the eCommerce Server Controls
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.
See Also: Using the eCommerce Server Controls
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.
See Also: Using the eCommerce Server Controls
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.
Using the ProductList Server Control
The ProductList 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. displays a list of products on a Web page. For information about the Product server control properties, see Product.
NOTE: Private catalog entries appear in display of the Product List server control only if the user is logged in and has at least Read-Only permissions for its catalog folder. See Also: Making Content Private
You decide which products appear by selecting a SourceType and populating either the SourceId or the IdList property, depending on the source type. You can choose from these source types.
- Products for a selected catalog—Set the
SourceTypeproperty to Catalog, and enter the ID of the catalog in theSourceIdproperty. - Products across multiple catalogs—Set the
SourceTypeproperty to CatalogList, and enter a comma-separated list of catalog IDs in theIdListproperty. - Products for a selected taxonomya content-level categorization system that uses one-to-many relationships (such as Ronald Reagan is to Actor, Governor, and President) to create a scalable organization of content. A taxonomy lets your site visitors navigate content independent of the folder structure.—Set the
SourceTypeproperty to Taxonomy, and enter the ID of the Taxonomy in theSourceIdproperty. - Products across multiple taxonomies—Set the
SourceTypeproperty to TaxonomyList, and enter a comma-separated list of taxonomy IDs in theIdListproperty. - Products for a selected collectionA list of Ektron content links for display on a Web page.—Set the
SourceTypeproperty to Collection, and enter the ID of the Collection in theSourceIdproperty. - A list of products—Set the
SourceTypeproperty to IdList, and enter a comma-separated list of product IDs in theIdListproperty.
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, ContentReview server control should be associated with each product. (See Also: User-Ranking of Content) 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.
Using the Recommendation Server Control
Prerequisite
Cross sell or upsell products have been assigned to a catalog entry.
Typically, this control appears on a page along with a Product server control. By using this control in conjunction with the Product control, a customer can view the details of a product and also receive suggestions on additional purchases. A customer can click the title to view the suggested product to view its details. For information about the Recommendation server control properties, see Recommendation.
For example, if your site is selling a hat, mitten and scarf set, you might use this server control to cross-sell winter jackets. You could also use the control to up-sell a more expensive hat, mitten and scarf set, or a set that includes additional items.
See Also: Recommending Related Products to a Customer
The RecommendationType property determines whether the Recommendation server control is used for up-selling or cross-selling.
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.
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
TemplateCartproperty 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
TemplateCartproperty’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); }