Cart Layouts

 Last Edited: Oct 24, 2019

Prerequisites

-You have completed How to Create a Shopping Cart and Guest Checkout


Folder Structure

Cart layouts are stored in the following structure:

  • layouts
    • modules
      • module_14
        • product
          • name_of_my_cart_layout
            • list
              • wrapper.liquid
              • item.liquid

wrapper.liquid

The wrapper.liquid file should contain the code for the main section of code that wraps around the loop of Products in the Cart. It should include the following liquid to insert the loop of Products:

my_cart_layout/wrapper.liquid -- Including the item.liquid file.

{%- include 'modules/siteglide_ecommerce/ecommerce/get/get_products', item_layout: 'item' -%}

It should also contain the controls required for the Cart as a whole. You can add the following buttons:

my_cart_layout/wrapper.liquid -- To empty the Cart by calling the Siteglide JavaScript function.

<button onclick="s_e_cart_empty(true)>Empty Cart</button>

my_cart_layout/wrapper.liquid -- To update the Cart by calling the Siteglide JavaScript function.

<button onclick="s_e_cart_update(true,'{{context.authenticity_token}}')>Empty Cart</button>

my_cart_layout/wrapper.liquid -- Link to the Checkout Page

<a href="/checkout>Proceed to checkout</a>

The following table shows how to output useful data about your Cart as a whole:

Field Name
Liquid Tag
Total Items in Cart
{{context.exports.cart_total_quantity.data}}
Total Price as an Integer
{{context.exports.cart_total_price.data}}
Total price of Products as a decimal
{% include 'ecommerce/price_total', format_type: 'formatted' -%}
Cart Currency Symbol
{{context.exports.cart_currency.data}}

If you have added Product Attributes to the Products in the Siteglide Admin, you can also access the cart_product_attributes object with the following liquid:

{{ context.exports.cart_product_attributes }}

Normally though, Attributes will be handled in the next step- the item.liquid file.


item.liquid

The item.liquid file should contain the code which is rendered for each iteration of the loop of Products. Building the Cart's item.liquid file is similar to building an item.liquid layout file for a Product List View. Learn more about the available fields here.

There are some additional points to bear in mind when creating a cart layout's item.liquid file:

my_cart_layout/item.liquid -- Removing an individual Product from the Cart:

<button onclick="s_e_cart_remove(true,{{this.cart_data.cart_id}})></button>

my_cart_layout/item.liquid -- Increasing the Quantity of a Product in the Cart

<input type="number" name="quantity" min="1" value="{{this.cart_data.quantity}}" onchange="s_e_cart_update_quantity(event.target.value,{{this.cart_data.cart_id}},'{{context.authenticity_token}}')/>

my_cart_layout/item.liquid -- Outputting the Attributes the User chose for this item

{% include 'ecommerce/cart_product_attributes' -%}

Controlling Inventory

In order to make sure Users do not increase the quantity of items in their Cart, when the Product is out of stock, you could use a simple if statement:

my_cart_layout/item.liquid -- Only show quantity control if Inventory is high enough.

{% if this.inventory.id != blank and this.inventory.quantity == '0' -%} {% endif %}

To improve this so that the User cannot increase the value by a greater number than is allowed by the stock level, you could add a "max" attribute to the quantity input:

my_cart_layout/item.liquid -- Adding a maximum to the quantity input element

<input type="number" name="quantity" min="1" max="{{this.inventory.quantity}}" value="{{this.cart_data.quantity}}" onchange="s_e_cart_update_quantity(event.target.value,{{this.cart_data.cart_id}},'{{context.authenticity_token}}')" />

Related Docs and Reference

See the Product Layout Reference Doc for fields you can use throughout your Product Layouts.