Customizing the shopping cart

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Business Catalyst provides a shopping cart with your online store. When visitors browse through catalogs on your online store, they can add products to the shopping cart. The shopping cart calculates any tax and shipping charges.

Shopping Cart Layout

From the shopping cart summary, the customer then clicks through to the cart. The Shopping Cart layout details all the products in the cart including taxes, cost and total. This is where the customer chooses the relevant shipping options and/or discount codes. Every field, color, layout and options on this page are completely customizable.
 

Customise the shopping cart layout

You can display a range of order information on the shopping cart, such as shipping options, discount codes, tax, and gift vouchers.

To customize the shopping cart:

  1. Select Site Manager > Module Templates and click Online Shop Layouts.
  2. Select Shopping Cart.
  3. Insert additional content in the layout by selecting tags from the Tag Insert menu on the editor toolbar.

    The tags represent dynamic content in the shopping cart. For example, to display the name of a product added to the cart, insert the {tag_productname}. When published, the name of the product is displayed in the cart.

  4. Remove content by deleting tags in the editor.
  5. Rearrange the content by moving the tags in the editor.
  6. Click Save.

For a complete list of the tags that can be used, check the Shopping cart layout reference page.

Using Liquid to customise the layout

If you need more control over your layout you can use Liquid to output your items from the shopping cart while using Liquid logic tags and Liquid filters.

Let's first see what variables you have on your shopping cart layout, use <pre>{{ this | json }}</pre>

Please notice you have complete control over all aspects of your cart, from the items in the cart:

"items": [
    {
      "name": "Cool Dress",
      "description": "XXS",
      "url": "/dresses/cool-green-dress-with-red-bell",
      "quantity": 1,
      "quantityInputOnChange": "UpdateItemQuantity(this.value,349779,0,9691399,395222,'','AU')",
      "removeOnClick": "UpdateItemQuantity(0,349779,0,9691399,395222,'','AU')",
      "code": "ASFGWQE11-XXS",
      "imagePath": "/assets/frontend/pages/img/products/p1_sq.jpg",
      "body": "Lorem ipsum dolor ut sit ame dolore adipiscing elit",
      "custom1": "",
      "custom2": "",
      "custom3": "",
      "custom4": "",
      "productTaxPercentage": 0.0,
      "productTotal": 43.989,
      "productTotalExceptTax": 39.989999999999995,
      "productAmountExceptTax": 39.989999999999995,
      "productAmountIncludingTax": 43.989,
      "productTaxRate": 0.1,
      "productTaxAmount": 3.9990000000000023
    },
    {
      "name": "Panda World T-Shirt",
      "description": "M;blue",
      "url": "/all-t-shirts/mens-t-shirts/panda-world-t-shirt",
      "quantity": 4,
      "quantityInputOnChange": "UpdateItemQuantity(this.value,349779,0,9683563,395223,'','AU')",
      "removeOnClick": "UpdateItemQuantity(0,349779,0,9683563,395223,'','AU')",
      "code": "SHDA9ZVVWY-M",
      "imagePath": "/shop/tshirt2.jpg",
      "body": "Casual T-Shirt made from high quality bio cotton.",
      "custom1": "",
      "custom2": "",
      "custom3": "",
      "custom4": "",
      "productTaxPercentage": 0.0,
      "productTotal": 44.0,
      "productTotalExceptTax": 40.0,
      "productAmountExceptTax": 10.0,
      "productAmountIncludingTax": 11.0,
      "productTaxRate": 0.1,
      "productTaxAmount": 1.0
    }
  ]
  ...

To currency, shipping, tax, totals and others:

"countryCode": "AU",
"currencyFormat": "$",
"shippingPrice": 0.0,
"shippingTaxRate": 0.0,
"shippingTaxAmount": 0.0,
"shippingTotal": 0.0,
"clearCartOnClick": "ClearCart('60ef5fca-9e64-4797-80a6-25fca248221e',0)",
"quoteUrl": "https://client2.worldsecuresystems.com/OrderRetrievev2.aspx?[...]",
"buyUrl": "https://client2.worldsecuresystems.com/OrderRetrievev2.aspx?[...]",
"buyButtonOnClick": "ValidateCart(349779)",
"totalTaxPercentage": 0.0,
"totalUnits": 5,
"productSubTotal": 79.989,
"productTaxTotal": 8.0,
"productGrandTotal": 87.989,
"invoiceDiscountAmount": 0.0,
"giftVoucherAmount": 0.0,
"invoiceTotal": 87.99,
"invoiceTotalExceptTaxAmount": 79.989,
"orderId": 349779,
"discountCode": "",
"discountCodeOnChange": "ApplyDiscountCode(this.value,349779,0)",
"giftVoucher": "",
"giftVoucherOnChange": "ApplyGiftVoucher(this.value,349779,0)",

The items in the cart need to be looped through to output the data stored in this.items, but for the other properties, you would need to call only the this object and the property name. We've pasted below a simple showcase of Liquid in action to output the carts' table.

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Total</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        {% for item in this.items -%}
        <tr>
            <td><a href="{{item.url}}">{{item.name}} ({{item.description}})</a></td>
            <td>{{this.currencyFormat}}{{item.productAmountExceptTax}}</td>
            <td>
                <input onchange="{{item.quantityInputOnChange}};return false;" type="text" value="{{item.quantity}}">
            </td>
            <td>{{item.productTaxRate}}%</td>
            <td>{{this.currencyFormat}}{{item.productTotal}}</td>
            <td><a href="#" onclick="{{item.removeOnClick}};return false;">Remove</a></td>
        </tr>
        {% endfor -%}
    </tbody>
</table>

 

  • You can now add the item.removeOnClick onclick action to any html element to use when removing product from cart.
  • You can round taxes or prices to your liking using the round filter.
  • You can add decision tags like IF, IF else to the entire shopping cart.
  • You can show a Total Tax Amount by summing {{productTaxTotal}} and {{shippingTaxAmount}}.
  • You can show a small part of the products' description by using the truncate filter or use the custom fields.

For an example done 99% in Liquid, please check How-to build a Liquid powered Shopping Cart Layout.

The Shopping Cart URL

You will notice the Shopping cart URL always has a CatalogueID parameter is added when coming from a catalogue or product, for example http://client2.worldsecuresystems.com/OrderRetrievev2.aspx?CatalogueID=271019

When you click the View Cart from a regular webpage (contact/about us/home), the CatalogueID parameter is always set to 0. 

This parameter can be retrieved using the Liquid global variable - {{globals.get.CatalogueID}} and can be used:

  • to build breadcrumbs using the catalogID the user came from
  • to return the user to the last catalog visited after clearing the cart. The Clear cart link displays the message Shopping cart is empty. Continue Shopping. the link of that message will take you to the last page you visited before entering the cart. If that ID is 0, then it will take you back to the Home Page.