Shopping cart

Description

The shopping cart summary is displayed in the overall layout of your online shop using {module_shoppingcartsummary}. The summary is displayed when a customer adds an item to the cart. The default layout of this module is shown below:

Accessible from

This layout is not created by default. You will first need to create it using the Develop tab or via sFTP, (see the Custom templates article for more info on how to create layouts) as described below:

Creating the template

  1. Open a code editor of your choice, however for this article we will be using the Business Catalyst Develop mode. Open the Develop mode by clicking the Develop tab in the top ribbon menu of the admin.
  2. Click the New file icon and give your file a name with a .tpl extension, for example cartsummary.tpl
  3. Remove all the HTML default markup as it is not needed for custom templates. Customize how you would like the shopping cart summary to look by using the below tags:
    Liquid tag Legacy tag Description
    {{cartUrl}} {tag_cartUrl} renders the URL to the cart summary page, which can be either OrderRetrievev2.aspx or OrderRetrieve.aspx (the old, legacy v1 version)
    {{itemCount}} {tag_itemCount} renders the number of the items in the cart or 0 if none.
    {{totalAmount}} {tag_totalAmount} renders the total money amount of the items (with two decimals) or 0.00 if the items don't have prices or there are no items in the cart
    {{currencyFormat}} {tag_currency} renders the coin of the current country, which is either the site country or the country of the order (if set)
    {tag_totalAmountWithCurrency} renders both coin and total amount (this is only for the sake of convenience, you might want to use it instead of {tag_currency}{tag_totalAmount})
    {tag_isEmpty} renders 0 or 1 (for when the cart is empty - used to display a different message when there are no items)
    {{countryCode}} {tag_countryCode} the country code of the currency used
    {{items}}   an array containing the products in the cart

    To loop the products inside the shopping cart you will need to use a FOR loop:

        <ul>
        {% for item in items %}    <li>
        	<a href="{{item.smallImage}}">
              <img src="{{item.smallImage}}"/>
              <span>{{item.name}} - </span>
              <span>{{item.totalPrice}}</span>
            </a>
        </li>
        {% endfor %}    </ul>
        <div>Total cost - {{currencyFormat}}{{totalAmount}}</div>
        <a class="cartSummaryLink" href="{{cartUrl}}">View Cart</a>

    Below is another example of a layout:

    
        <div class="cartSummary empty{tag_isEmpty}">
        <div class="cartSummaryItem">Shopping cart is empty</div>
        </div>
    
        <div class="cartSummary notEmpty{tag_isEmpty}">
        <div class="cartSummaryItem">{{itemCount}} item(s), Total {{currencyFormat}}{{totalAmount}}</div>
        <div><a class="cartSummaryLink" href="{{cartUrl}}">View Cart</a></div>
    
        </div>

    Note: If you are using the above example, ensure that you add the below to your CSS to change the table class based on whether an item is added to the cart or not.

      .empty0 { display:none; }

      .notEmpty1 { display:none; }

  4. Save this file by clicking Publish

Assigning the template

  1. Locate the {module_shoppingcartsummary} module on your site. By default this can be found in Site Manager > Module Templates > Online Shop Layouts > Overall Layout.
  2. Replace this module with: {module_shoppingcartsummary template="/path/to/template.tpl"}
    - for example {module_shoppingcartsummary template="/cartsummary.tpl"}
  3. Save the layout.

Test the new layout out by adding a product to the cart on the front end of your website.

Note: If the tpl file is not found, the module renders as if not having the parameter.