Cart Layouts

how to customise the shopping cart layout 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 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 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 {% include 'modules/siteglide ecommerce/ecommerce/get/get products' item layout 'item' %} hiding the cart when empty 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 {% assign cart parsed = context session cart | parse json %} {% if cart parsed size > 0 %} {% else %} {% endif %} empty the cart \<button onclick="s e cart empty(true)>empty cart\</button> updating the cart's total see the full article on updating the cart's quantity here link to the checkout page 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 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 removing an individual product from the cart the s e cart remove function can be used to remove a line from the cart if the cart has several lines containing the same product, but with different attributes, only the targeted line and its attributes will be removed in this example, the function is called when a button is clicked and liquid is used to pass the cart id into the function \<button onclick="s e cart remove(true,{{this cart data cart id}})">\</button> you can optionally pass in a callback function to the third argument to be called after the row has been removed from the cart in order for this to work, you need to set reload (the first argument) to false increasing the quantity of a product in the cart 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 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 liquid if statement {% 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