Using a Cart and Checkout Page

The following example will create an e-commerce system using a Cart and Checkout Page. The e-commerce system will contain an Asset Listing of the produce that is for sale. There will be an Ecommerce Default Delivery Method and a SecurePay eSec Payment Gateway to allow users to enter their delivery details and pay for their purchases. Tax and weight-based delivery fees will be charged on each item.

Bookmarks to the headings on this page:

  1. Setting Up the Cart and Checkout Page
  2. Adding the Products
  3. Adding Weight Metadata to the Products
  4. Creating and Configuring the Item Asset Listing
  5. Creating an Ecommerce Default Delivery Method
  6. Setting Up the Delivery Form Questions
  7. Adding an Setting Up a Payment Gateway
  8. Creating a Delivery Fee Based on Weight
  9. Defining the Layout of the E-Commerce Store
  10. How Does this E-Commerce System Work for a Public User
  11. Final Steps

Tip: Remember that you must Commit any asset changes that you make.

Setting Up the Cart and Checkout Page

The Cart and Checkout Page
The Cart and Checkout Page

  1. Add a Checkout Page under your Site in the Asset Map, named Checkout.
  2. Add a Cart under your Site in the Asset Map, titled Shopping Cart. The Cart and Checkout Page assets will appear in the Asset Map, as shown in the figure below.
  3. On the Details screen of the Cart, in the Ecommerce Checkout Asset field, select the Checkout asset from the Asset Map. This will link the Checkout Page to the Cart.
  4. In the Cart Items to List field, select Product. This will allow Product assets to be added to the Cart.
  5. In the Update Cart Button Text field, enter Update. This will use the word Update on the update button of the Cart.

Adding the Products

The Item Folder
The Items Folder

Now that we have set up our Cart and Checkout Page, items for the site need to be created.

To do this:

  1. Create a Folder outside your site, named Items. The Folder will appear in the Asset Map, as shown in the figure to the right.
  2. Add a Product asset to the Items Folder with the following attributes:

    i) In the Product Name field, enter Lettuce.

    An Item
    Example Item


    ii) In the Value field, enter 1.99.

    iii) In the Calculate Tax During Checkout field, select Yes.

    The Lettuce item will appear in the asset map, as shown in the figure to the right.
  3. Add a Product asset to the Items Folder with the following attributes:

    i) In the Product Name field, enter Carrot.

    ii) In the Value field, enter 0.75.

    iii) In the Calculate Tax During Checkout field, select Yes.
  4. Add a Product asset to the Items Folder with the following attributes:

    i) In the Product Name field, enter Pumpkin.

    ii) In the Value field, enter 5.35.

    iii) In the Calculate Tax During Checkout field, select Yes.
  5. Add a Product asset to the Items Folder with the following attributes:

    i) In the Product Name field, enter Tomato.

    Items in the Items Folder
    Example Items


    ii) In the Value field, enter 1.19.

    iii) In the Calculate Tax During Checkout field, select Yes.
  6. Add a Product asset to the Items Folder with the following attributes:

    i) In the Product Name field, enter Eggplant.

    ii) In the Value field, enter 3.65.

    iii) In the Calculate Tax During Checkout field, select Yes. Once you have added all the products, five assets will appear in the Items Folder in the Asset Map, as shown in the figure to the right.

    To set up the Product items, a Metadata Schema must be applied to the Items Folder with the weight information.
  7. Create a Metadata Schema under your Site, named Item Information.
  8. Add a section to the Metadata Schema and a Text fields titled Weight, as shown in the figure below.

    The Weight metadata field
    Weight Metadata Field

  9. Apply the Metadata Schema to the Items Folder and its children.

Adding Weight Metadata to the Products

Now that each item has been added to the Items folder and a Metadata Schema applied, the weight
metadata field needs to be configured.

To do this:

  1. Right click on the Lettuce Product asset under the Items Folder in the Asset Map and select the Metadata screen.
  2. In the Weight metadata field, enter 0.2.
  3. Right click on the Carrot Product asset under the Items Folder in the Asset Map and select the Metadata screen.
  4. In the Weight metadata field, enter 0.2.
  5. Right click on the Pumpkin Product asset under the Items Folder in the Asset Map and select the Metadata screen.
  6. In the Weight metadata field, enter 2.3.
  7. Right click on the Tomato Product asset under the Items Folder in the Asset Map and select the Metadata screen.
  8. In the Weight metadata field, enter 0.2.
  9. Right click on the Eggplant Product asset under the Items Folder in the Asset Map and select the Metadata screen.
  10. In the Weight metadata field, enter 0.5.

Creating and Configuring the Item Asset Listing

To list items on a Site, allowing users to browse and purchase items, an Asset Listing Page needs to be added.

To do this:

  1. Create an Asset Listing Page under your Site, titled Buy Our Produce.
  2. On the Details screen, select Product in the Asset Types to List field.
  3. In the Root Node field, select the Items Folder.

    The items will now be listed on the Buy Our Fruit page, as shown in the figure below. 

Items on the Asset Listing
Items on the Asset Listing

The listed items now need to be able to be added to the Cart and we want to let users purchase up to ten of each item.

To do this:

  1. Right click on the Asset Listing Page in the Asset Map and select the Asset Selections screen.
  2. In the Add New Selection? field, enter buy and click Commit. New fields will appear in the Asset Selections section.
  3. In the Input Style field, select Text Field.
  4. Select the Restrict Values to Range tick-box.
  5. In the From/to field, enter the range of 0 to 10. This will allow users to purchase up to ten of each item.
  6. Click Commit. The selection will appear in the Asset Selections section, as shown in the figure below.       

    The Asset Selections section
    The buy Asset Selection

  7. In the Add New Target? field, enter add_to_cart and click Commit. New fields will appear In the Asset Targets section.
  8. In the Button Label field, enter add to cart.
  9. In the Target (or Asset) field, select the Shopping Cart asset from the Asset Map. This will allow the buy selection to add items to the Cart when the add to cart button is selected.
  10. Click Commit. The target will appear in the Asset Target section, as shown in the figure below.

    11. The Asset Targets section
    The add_to-cart Asset Target

For the Asset Selection to function correctly a Dynamic Parameter needs to be created in the Cart.

To do this:

  1. Right click on the Cart in the Asset Map and select the Details screen.
  2. Create a Dynamic Parameter with the parameter as Add an Item to the Cart and the source as GET Variable Name and click Commit.
  3. In the GET Variable Name field, enter buy, as shown in the figure below.       

    The Add an Item to the Cart Dynamic Parameter
    The Add an item to the cart Dynamic Parameter

    The item Asset Listing will now be able add items to the Cart.

Creating an Ecommerce Default Delivery Method

The Default Delivery
 The Default Delivery Method

Add an Ecommerce Default Delivery Method to allow users to enter their delivery details.

To do this:

  1. Create an Ecommerce Default Delivery Method under your Site, titled Home Delivery, as shown in the figure to the right.
  2. Right click on the Checkout Page and select the Processing Components screen.
  3. In the Delivery Methods field, select the Home Delivery delivery method. The Checkout Page is now linked to the delivery method.

To set up the Ecommerce Default Delivery Method:

  1. Right click on the Form Contents asset under the delivery method in the Asset Map and select the Details screen. The fields on this screen are similar to those on the Form Contents screen of a Custom Form.
  2. Add seven questions to the delivery form, as follows: Name (text), Address (text), State/Territory (select), Postcode (numeric), Country (country), Contact Number (numeric), Email Address (email address).

    These questions will appear in the Current Questions section of the Details screen, as shown in the figure below.       

    The Delivery Form questions
    The Delivery form questions

Setting Up the Delivery Form Questions

Name Question

To set up the Name question:

  1. Right click on the Name question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.
Address Question

To set up the Address question:

  1. Right click on the Address question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Height field, enter 3. This will display a multi-line text field on the form for this question.
  3. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.
State/Territory Question

To set up the State/Territory question:

  1. Right click on the State/Territory question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Options field, enter the following options into the fields provided: QLD, NSW, ACT, VIC, TAS, NT, SA and WA.
  3. In the Allow Empty Option field, select No. This will mean that users will be required to select a state or territory.
Postcode Question

To set up the Postcode question:

  1. Right click on the Postcode question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Width field, enter 4. This will mean that the question field will be four characters wide.
  3. In the Maximum Length field, enter 4. This will mean that users will only be able to enter up to four characters in this field.
  4. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.
Country Question

To set up the Country question:

  1. Right click on the Country question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Available Countries field, select Australia. This will only allow users to select Australia in their delivery address.
Contact Number Question

To set up the Contact Number question:

  1. Right click on the Contact Number question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Width field, enter 10. This will mean that the question field will be ten characters wide.
  3. In the Maximum Length field, enter 10. This will mean that users will only be able to enter up to ten characters in this field.
Email Address Question

To set up the Email Address question:

  1. Right click on the Email Address question under the Delivery Details Section in the Asset Map and select the Details screen.
  2. In the Required Entry field, select Required. This will mean that users will be required to answer this question on the form.

Adding and Setting Up a Payment Gateway

The Payment Gateway
The Payment Gateway

A payment gateway needs to be added to allow users to pay for their orders.

To do this:

  1. Add a SecurePay eSec Payment Gateway under your Site, titled Payment, as shown in the figure to the right.
  2. On the Details screen, in the Test Mode field, select On. This will allow the payment gateway to be used for testing purposes.

    3. Tip: To create a fully functional SecurePay eSec Payment Gateway you need to acquire a Merchant ID from your bank and complete a Merchant Application at the eSec Payments Gateway website. For more information, refer to the SecurePay eSec Payment Gateway chapter in the manual.

  3. The payment gateway needs to now be linked to the Ecommerce Default Delivery Method. To do this:

    i) Right click on the Ecommerce Default Delivery Method asset in the Asset Map and select the Details screen.

    ii) In the Payment Gateway field, select the Payment payment gateway.

    The delivery method is now linked to the payment gateway.

Creating a Delivery Fee Based on Weight

A delivery fee needs to be charged to each order based on the weight of the items being purchased.

To do this:

  1. Right click on the Checkout Page in the Asset Map and select the Region Specific Options screen.

    2. The Weight field
    The Weight field

  2. In the Country Question field, select the Country question under the Home Delivery's Form Contents asset. The user's answer to this question will determine the fees charged.
  3. In the Item Weight Source field, select the Weight metadata field from the Item Information Metadata Schema, as shown in the figure to the right. This will indicate to the Checkout Page the weight of the products.
  4. In the Price Per Weight Metric field, select Australia and enter 0.50 in the Price field. This will charge a fifty cent fee for every kilogram the order weighs.

Defining the Layout of the E-Commerce Store

Asset Listing Page
Page Contents and Default Format Bodycopies

A default layout has already been created for the Buy Our Produce Asset Listing, as shown in the figure below.

The default layout of the Item Listing Page
The default layout of the Item Asset Listing Page

As you can see, the buy Asset Selection field and add to cart button that was set up, is not on the page. The page also needs a heading and information about the items. To add these features, we need to change this layout.

To change this layout:

  1. Right click on the Page Contents Bodycopy of the Asset Listing Page in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Page Contents Bodycopy
     The WYSIWYG Editor on the Page Contents Bodycopy

    The add to cart button has been added to the page to allow users to add items to the cart. A heading and page information has also been added.
  3. Right click on the Default Format Bodycopy of the Asset Listing Page in the Asset Map and select the Edit Contents screen.
  4. The content shown in the figure below is entered into the WYSIWYG Editor.       

    The WYSIWYG Editor on the Default Format Bodycopy of the Item Asset Listing
    The WYSIWYG Editor on the Default Format Bodycopy

    The Buy Asset Selection has been added before the item to allow users to enter in the number of the items to add to the cart. The price of the item has also been added.

    The new layout of the Buy Our Produce Asset Listing is shown in the figure below.  

    The new layout of the Item Listing Page
    The new layout of the item Asset Listing

Cart
Page Contents and Default Format Bodycopies

As there is no default layout for the Cart, the Page Contents and Default Format Bodycopies must be configured to create a layout for the page.

To do this:

  1. Right click on the Page Contents Bodycopy of the Cart in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYGE Editor on the Page Contents Bodycopy
    The WYSIWYG Editor on the Page Contents Bodycopy

    A listing of the added items has been added to the page as well as the total cost of the order. Update and checkout buttons have also been added as well as a heading and update message.
  3. Right click on the Default Format Bodycopy of the Cart in the Asset Map and select the Edit Contents screen.
  4. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Default Format Bodycopy of the Cart
    The WYSIWYG Editor on the Default Format Bodycopy

    The quantity Asset Selection has been added to allow users to update the quantity of their items in the Cart. The price of each group of items has also been added.

    The new layout of the Cart is shown in the figure below.  

    The new layout of the Cart
    The new layout of the Cart

Checkout Page
Confirmation and Receipt Bodycopies

To use the keyword replacements Confirmation Summary and Receipt Summary on the Checkout Page Bodycopies, we need to configure the layout of the Confirmation and Success Bodycopies of the Ecommerce Default Delivery Method.

To do this:

  1. Right click on the Confirmation Bodycopy of the Ecommerce Default Delivery Method in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Confirmation Bodycopy
    The WYSIWYG Editor on the Confirmation Bodycopy

    The Confirmation Summary
    The Confirmation Summary

    The answers to the delivery form questions will now be displayed when the keyword replacement Confirmation Summary is used, as shown in the figure to the right.
  3. Right click on the Success Bodycopy of the Ecommerce Default Delivery Method in the Asset Map and select the Edit Contents screen.
  4. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Success Bodycopy
    The WYSIWYG Editor on the Success Bodycopy

    The Receipt Summary
    The Receipt Summary

    The answers to the delivery form questions will now be displayed when the Receipt Summary keyword replacement is used, as shown in the figure to the right.
Checkout Bodycopy

As there is no default layout for the checkout page, the Checkout Bodycopy must be configured to create a layout for the page.

To do this:

  1. Right click on the Checkout Bodycopy of the Checkout Page in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Checkout Bodycopy
    The WYSIWYG Editor on the Checkout Bodycopy

    The confirmation button has been added to the page. The delivery selector and delivery interface has also been added to allow users to fill out the delivery form. The page has been given a heading and a list of the items in the cart has also been added.

    The new layout of the checkout page is shown in the figure below.  

    The new layout of the Checkout Page
    The new layout of the Checkout Page

Confirmation Bodycopy

When a user completes the delivery form on the checkout page, a confirmation page is shown for them to confirm their information and order details. As there is no default layout for the confirmation page, the Confirmation Bodycopy must be configured to create a layout for the page.

To do this:

  1. Right click on the Confirmation Bodycopy of the Checkout Page in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Confirmation Bodycopy
    The WYSIWYG Editor on the Confirmation Bodycopy

    The delivery form summary and cart summary has been added to the page as well as the confirm order and return to checkout buttons. The page has been given a heading and instructions are listed for the user.

    The new layout of the confirmation page is shown in the figure below.  

    The new layout of the Confirmation Page
    The new layout of the Confirmation Page

Receipt Bodycopy

Once a user has paid for their order, a receipt page is shown for them with information on the order and their payment. As there is no default layout for the receipt page, the Receipt Bodycopy must be configured to create a layout for the page.

To do this:

  1. Right click on the Receipt Bodycopy of the Checkout Page in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Receipt Bodycopy
    The WYSIWYG Editor on the Receipt Bodycopy

    A thank you message, receipt and cart summary has been added to the page.

    The new layout of the receipt page is shown in the figure below.  

    The new layout of the Receipt Page
    The new layout of the Receipt Page

Formatting the Ecommerce Default Delivery Method Form
Format Bodycopy

A default layout has already been created for the delivery form, as shown in the figure below. 

The default layout of the Delivery Form
The default layout of the Delivery Form

We need to change the layout of the delivery form and include additional information by customising the format of the Form Contents.

The Format Bodycopy of the Default Delivery Method
The Format Bodycopy

To do this:

  1. Right click on the Form Contents asset under the Ecommerce Default Delivery Method in the Asset Map and select the Details screen.
  2. In the Customise Format? field, select Yes.
  3. Click Commit. The Format Bodycopy will appear in the Asset Map, as shown in the figure to the right.
  4. Right click on the Format Bodycopy in the Asset Map and select the Edit Contents screen.
  5. The content shown in the figure below is entered into the WYSIWYG Editor.  

    The WYSIWYG Editor on the Format Bodycopy
    The WYSIWYG Editor on the Format Bodycopy

    The form errors have been added, as has information about the delivery form. The layout of the questions has also been altered.

    The new layout of the delivery form is shown in the figure below.     

    The new layout of the Delivery Form
    The new layout of the Delivery Form

How Does this E-Commerce System Work for a Public User?

Now that the E-commerce system has been set up, it is made available on the site so users can purchase the items available in the store. The checkout process that the user will go through is as follows:

  1. The user will browse the Buy Our Produce page and determine the items they want to purchase. In this example, the user has decided to buy one Lettuce, three Carrots, one Pumpkin, four Tomatoes and one Eggplant, as shown in the figure below.  

    The Buy Our Produce Page
    The Buy Our Produce page

  2. When the user clicks the add to cart button, they will be taken to the Cart where they can update their purchased products or proceed to the checkout process, as shown in the figure below. Once they are satisfied with their order, they will click Proceed to Checkout.  

    The Cart with Items
    The Cart with items  

  3. The user is taken to the Checkout Page where they can choose their delivery method. The Checkout page for this order is shown in the figure below.  

    The Checkout Page
    The Checkout page of the Checkout asset

    As you can see, a tax of $1.80 GST has been added to the order and the user has selected the Home Delivery delivery method. Once the user has completed the delivery details form, they will click the Go To Confirmation button.
  4. On the Confirmation Page, the user can overlook the details of their order before proceeding to the payment process. The Confirmation Page for this order is shown in the figure below.  

    The Confirmation Page
    The Confirmation Page of the Checkout asset

    As you can see, a delivery fee of $2.30 has been applied to the order, determined by the weight of the ordered items. The delivery details completed in the previous step are also listed on this page. When the user is satisfied these details are correct, they will click the Confirm Order button.
  5. When the user has confirmed their order details, they will be taken to the SecurePay eSec Payment Gateway, as shown in the figure below. The payment gateway will list the payment that is to be processed and allow the user to input their credit card details. Our payment gateway is currently in Test Mode meaning that no payments will be issued. When creating your own, operational e-commerce system, you will need to turn Test Mode to Off on the SecurePay eSec Payment Gateway Details screen. For more information, refer to the SecurePay Payment Gateway chapter in this manual.  

    The SecurePay eSec Payment Gateway
    The SecurePage eSec Payment Gateway

    A processing payment transaction
    Processing Transaction

  6. When the user completes the payment form and clicks Pay, the payment will process, as shown in the figure to the right. When the payment has been processed and approved, the user will be taken to the Receipt Page, as shown in the figure below. A thank you message and order and delivery details are displayed on this page.  

    The Receipt Page
    The Receipt Page of the Checkout asset

    The Ecommerce Order
    The Ecommerce Order asset

  7. An Order asset will appear in the Asset Map with the information the user has entered into the form, as shown in the figures to the right and below.  

    The Order Details on the Ecommerce Order
    Order details in the Ecommerce Order asset

Final Steps

The e-commerce system is now set up with a fully functioning Cart and Checkout Page. Before making it Live to the public you should check the following things:

  • The e-commerce system functions correctly and allows you to add an item from the item Asset List to your Cart, complete the delivery form and pay for the purchases.
  • The layout of each page is correct.
  • The delivery fees are calculated and displayed correctly.
  • The SecurePay eSec Payment Gateway works correctly and is in test mode. Please note that if
    you are applying this example to your own e-commerce store you will need to change the payment gateway to Live. For more information, refer to the SecurePay eSec Payment Gateway chapter.

Once you have checked these things and you are happy with the way the e-commerce system works, change the Status of all the assets in the Site to Live and grant Public Read Permission.