[{"value":"Location","id":"location","hLevel":2,"level":1},{"value":"Content","id":"content","hLevel":2,"level":1,"children":[{"value":"Cart Object","id":"cart-object","hLevel":3,"level":2}]},{"value":"Usage","id":"usage","hLevel":2,"level":1,"children":[{"value":"Cart Line Items","id":"cart-line-items","hLevel":3,"level":2},{"value":"Proceed to Checkout","id":"proceed-to-checkout","hLevel":3,"level":2},{"value":"Remove Line Items from the Cart","id":"remove-line-items-from-the-cart","hLevel":3,"level":2},{"value":"Update Line Item Quantities","id":"update-line-item-quantities","hLevel":3,"level":2},{"value":"Show Cart and Line Item Discounts","id":"show-cart-and-line-item-discounts","hLevel":3,"level":2},{"value":"Display Line Item Properties","id":"display-line-item-properties","hLevel":3,"level":2}]}]

Cart

The cart template displays the shopping cart page, providing an overview of the items in the customer's cart. The overview is usually shown in a table format, with each item on a separate row.

Location

The cart template is in the theme's templates directory:

└── theme
    ├── templates
    |   ...
    |   ├── cart.json
    |   ...
    ...

Content

You can include the cart object in the cart template or within a section of the template.

Cart Object

You can utilize the Handlebars cart object to display details on the cart page.

Usage

When using the cart template, you should be familiar with the following:

Using cart line items
Letting customers proceed to checkout
Providing options to remove items from the cart
Updating item quantities
Showing discounts
Displaying item properties

Tip

If you use JSON templates, any HTML or Handlebars code needs to be included in the sections referenced by the template.

Cart Line Items

line_item represents a single row in the cart, recording the added product variant and quantity. For example, if a customer adds a medium and a large T-shirt to the cart, each T-shirt has its own line item.

The cart template should contain a table where each line item has a row:

 {{#for cart.items as |item|}}
  {{! line item info}}
 {{/for}}

Proceed to Checkout

To allow customers to proceed to checkout from the cart, you need to display the cart line items within the cart form helper.

 {{#form "cart"}}
   {{#for cart.items as |item|}}
    {{! line item info}}
   {{/for}}
  
   <button type="submit" name="checkout" class="button">Checkout</button>
 {{/form}}

Remove Line Items from the Cart

You can give customers the option to remove items from the cart. You can do this by including an <a> element in each line item, with the href attribute referencing the line_item object's url_to_remove property:

 {{#for cart.items as |item|}}
   {{! line item info}}
   
   <a href="{{ item.url_to_remove }}">Remove</a>
 {{/for}}

Tip

See the Cart API for more information on changing the cart using JavaScript.

Update Line Item Quantities

You can change the quantities in the cart using the routes.cart_change_url object and the /cart/change API with JavaScript.

Step 1: In the theme file theme.html, inject the routes.cart_change_url using a script tag:

 <html>
   <body>
     {{! content}}
     <script>
       window.routes = {
         cart_change_url: "{{ routes.cart_change_url }}",
       }
     </script>
   </body>
 </html>

Step 2: The data-key attribute of the line item references the line_item object's key property. Then, update the item quantity with a JavaScript request to the /cart/change API:

 {{! this is handlebars html }}
 {{#for cart.items as |item|}}
   <div class="cart_item" data-key="{{ item.key }}">
      {{! line item content}}
   </div>
 {{/for}}
  
 <script>
 fetch(`${window.routes.cart_change_url}`, {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
     Accept: `application/json`,
   },
   body: JSON.stringify({
     id: document.querySelectorAll('.cart_item')[0].getAttribute('data-key'), // update line_item key
     quantity: 2, // update quantity
   })
 })
 </script>

Show Cart and Line Item Discounts

Since discounts can apply to the whole cart or individual line items, you should show discounts in the cart summary and for each line item. For more details on discounts and how to display them, see Discounts.

Display Line Item Properties

When products are added to the cart, they can include line item properties. You can show these properties on the cart page by looping through each property:

{{#for cart.items as |item|}}
  {{#if item.properties.length > 0}}
     {{#for item.properties as |property|}}
       {{#if property.type == "text"}}
         <span>{{property.value}}</span>
       {{else if property.type == "link"}}
         <a class="button button--link" href="{{property.urls.[0]}}" target="_blank">{{property.value}}</a>
       {{/if}}
     {{/for}}
  {{/if}}
{{/for}}