Shopping cart summary

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

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

You can add links to the shopping cart by adding the shopping cart summary module. Customers can review their order or proceed to checkout.

By default, if no items are added to the cart, the message "Shopping cart is empty" is displayed. After a customer adds products to the cart, an order summary is displayed as follows:


 

You can add the link to the online store or to a page template so that customers can access their cart throughout the site. Do one of the following:

  • To add the link to the online store, go to Site Manager > Module Templates > Online Shop Layouts > Overall Layout and add {module_shoppingcartsummary}.
  • To have the summary available throughout the whole site, add {module_shoppingcartsummary} to a site template.

Note: The shopping cart link cannot be used multiple times on one page. Doing so causes refresh issues when customers add products.

Customizing the Shopping Cart Summary

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.

You can customize the layout of this summary with the tags available and using the concept of Custom Templates .

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.
    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:

    {tag_cartUrl} renders the URL to the cart summary page, which can be either OrderRetrievev2.aspx or OrderRetrieve.aspx (the old, legacy v1 version)
    {tag_itemCount} renders the number of the items in the cart or 0 if none.
    {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
    {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)
    {tag_countryCode} renders the country code (of the site or of the order, if set)

    Below is an example of a custom template using the above tags:

    <div class="cartSummary empty{tag_isEmpty}">
       <div class="cartSummaryItem">Shopping cart is empty</div>
    </div>
    <div class="cartSummary notEmpty{tag_isEmpty}">
       <div class="cartSummaryItem">{tag_itemCount} item(s), Total {tag_currency}{tag_totalAmount}</div>
       <div><a class="cartSummaryLink" href="{tag_cartUrl}">View Cart</a></div>
    </div>

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

    .empty0, .notEmpty1 { display:none; }
  4. Save this file by clicking Publish

Using Liquid in the template

In the example below, we will be using Liquid tags to output the same information as in the example above. We will check to see if the cart is empty, if it is, we show "Shopping cart empty", if not, we show the number of items added and the total. No additional CSS styles need to be added as Liquid will do all the logic and output accordingly.

{% if itemCount == 0 -%}
    <span>Shopping cart empty</span>
    {% else -%}
    <a href="{{cartUrl}}">{{itemCount}} item{% if itemCount != 1 -%}s{% endif -%}</a> | 
    <a href="{{cartUrl}}">{{currencyFormat}} {tag_totalAmount}</a> 
{% endif -%}

We can use Liquid tags to also output details of the cart items. Let's do this in a div hidden by default.

Once there are items in cart and we hover over our summary, a div will appear to show us details about the items currently in the cart. We will include the above snippet in the next example for clarity.

<div id="cart-summary"> 
    {% if itemCount == 0 -%}
    <span>Shopping cart empty</span>
    {% else -%}
    <a href="{{cartUrl}}">{{itemCount}} item{% if itemCount != 1 -%}s{% endif -%}</a> |
    <a href="{{cartUrl}}">{{currencyFormat}} {tag_totalAmount}</a> 
    {% endif -%}
    {% if itemCount > 0 -%}
    <div id="cart-items">
        <ul>
        {% for item in items -%}
          <li> 
            <a href="{{item.url}}">
                <img src="{{item.smallImage}}" alt="{{item.name}}" width="37" height="34" />
            </a>x {{item.quantity}}
             <strong><a href="{{item.url}}">{{item.name}}</a></strong>
             <em>{{currencyFormat}} {{item.price}}</em>
            </li>
        {% endfor -%}
        <li><a title="Go to Cart" href="{{cartUrl}}">View Cart</a></li>
        </ul>
    </div>
    {% endif -%}
</div>

Don't forget to add some styles to the elements to hide the items by default and show them when hovering the summary.

    #cart-items { display: none; }
    #cart-summary:hover #cart-items { display:block;}

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"}

    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.