cart

The cart template handles the rendering of the cart page, where customers review the items they intend to purchase before checking out.

Location

The cart template is located in the templates directory of the theme.

└── theme
    ├── layout
    ├── templates
    │   ...
    │   ├── cart.json
    │   ...
    ...

Usage

The template injects no data of its own. It reads the global cart object, which is available in every template. Send the customer to checkout with cart.cart_submit_url.

{% for item in cart.items %}
  <!-- line item: item.image, item.quantity, item.price -->
{% endfor %}

<a href="{{ cart.cart_submit_url }}">{{ 'cart.checkout' | t }}</a>

There are two ways to change line items. Pick one per theme.

{% form %} tag

Wrap controls in a {% form 'cart' %}. It navigates to /cart on submit, so updates cost a full page reload but need no JavaScript.

YouCan JS SDK

Call youcanjs.cart.updateItem() and youcanjs.cart.removeItem() from your section script for async updates with no reload. See the SDK docs.

await youcanjs.cart.updateItem({ cartItemId, productVariantId, quantity: 2 });
await youcanjs.cart.removeItem({ cartItemId, productVariantId });