Cart Layouts
How to customise the Shopping Cart Layout
- You have completed How to Create a Shopping Cart and Guest Checkout
Cart layouts are stored in the following structure.
- layouts
- modules
- module_14
- product
- name_of_my_cart_layout
- list
- wrapper.liquid
- item.liquid
- list
- name_of_my_cart_layout
- product
- module_14
- modules
To create a new layout, right-click on the product folder to add a folder with the name of your layout, then create the list folder and wrapper and liquid files inside it as shown.
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:
It's strongly recommended to hide the Cart using Liquid logic when it is empty. This logic can either go inside your wrapper.liquid file, or directly in the Page.
<button onclick="s_e_cart_empty(true)>Empty Cart</button>
See the full Article on updating the Cart's quantity here.
You can also run this same function when a different JavaScript event is fired, for example, an onchange event on the quantity <select> element, or onload.
Of course, this is just an ordinary link. It will need updating with the slug of your Checkout Page: <a href="/checkout>Proceed to checkout</a>
The following reference shows how to output useful data about your Cart as a whole:
Field Name | Liquid Tag |
Total Quantity | {{context.exports.cart_total_quantity.data}} |
Shipping Price | {% include 'ecommerce/price_shipping', format_type: 'formatted' -%} |
Shipping Price Before Tax | {% include 'ecommerce/price_shipping_before_tax', format_type: 'formatted' -%} |
Shipping Price Tax Amount | {% include 'ecommerce/price_shipping_tax_amount', format_type: 'formatted' -%} |
Total Item Price | {% include 'ecommerce/price_total_item_cost', format_type: 'formatted' -%} |
Total Item Price Before Tax | {% include 'ecommerce/price_total_item_before_tax', format_type: 'formatted' -%} |
Total Item Tax Amount | {% include 'ecommerce/price_total_item_tax_amount', format_type: 'formatted' -%} |
Total Price Reduction (due to Discounts) | {% include 'ecommerce/price_total_reduction', format_type: 'formatted' -%} |
Final Total Price Before Tax | {% include 'ecommerce/price_total_before_tax', format_type: 'formatted' -%} |
Final Total Tax Amount | {% include 'ecommerce/price_total_tax_amount', format_type: 'formatted' -%} |
Final Total Price | {% include 'ecommerce/price_total', format_type: 'formatted' -%} |
If you have added Product Attributes to the Products in the Siteglide Admin, you can also access the cart_product_attributes with the following liquid: {{ context.exports.cart_product_attributes }}
Normally though, Attributes will be handled in the next step- the item.liquid file.
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:
<button onclick="s_e_cart_remove(true,{{this.cart_data.cart_id}})"></button>
See the full Article on updating Product quantities here.
Note that, after updating this input field, the User will also have to click the "Update Cart" button, though this is covered in the wrapper.liquid file- as it covers the whole Page.
{% include 'ecommerce/cart_product_attributes' -%}
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 liquid if statement:
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:
