data-ajax-cart-bind

An attribute which displays the value of a liquidAjaxCart.cart object’s property, such as the number of cart items, or the cart total price, outside of the data-ajax-cart-section elements. Liquid Ajax Cart updates the displayed value when the cart is changed.

How it works

Add the data-ajax-cart-bind attribute with the name of the liquidAjaxCart.cart object’s property, whose value you want to show, to any HTML element — Liquid Ajax Cart inserts the value of the property into the HTML element as the inner content and updates it when the value is changed.

Use cases

The most popular use cases are displaying the number of cart items and the cart total price in the header of a webpage.

Number of cart items

The number of cart items is stored in the item_count property of the liquidAjaxCart.cart object. Pass the item_count as the value for the data-ajax-cart-bind attribute.

<span class="header__cart-quantity">
  (
  <span data-ajax-cart-bind="item_count">
    <!-- Cart item count appears here -->
  </span>
  )
</span>

The best practice is to use the data-ajax-cart-bind on top of Liquid expressions. The liquid expression {{ cart.item_count }} lets you show the number of cart items until Liquid Ajax Cart is initialized and if JavaScript is disabled.

<span class="header__cart-quantity">
  (
  <span data-ajax-cart-bind="item_count">
    <!-- Cart item count appears here -->
    {{ cart.item_count }}
  </span>
  )
</span>

Cart total price

The cart total price is stored in the total_price property of the liquidAjaxCart.cart object. Pass the total_price as the value for the data-ajax-cart-bind attribute. Use the money_with_currency formatter with money related properties.

<span class="header__cart-total">
  (
  <span data-ajax-cart-bind="total_price | money_with_currency">
    <!-- Cart total price appears here -->
  </span>
  )
</span>

The best practice is to use the data-ajax-cart-bind on top of Liquid expressions. The liquid expression {{ cart.total_price | money_with_currency }} lets you show the cart total price until Liquid Ajax Cart is initialized and if JavaScript is disabled.

<span class="header__cart-total">
  (
  <span data-ajax-cart-bind="total_price | money_with_currency">
    <!-- Cart total price appears here -->
    {{ cart.total_price | money_with_currency }}
  </span>
  )
</span>

Formatters

The attribute supports formatters and there is the money_with_currency formatter out of the box. The money_with_currency uses the Intl JavaScript object and Shopify.locale value:

return Intl.NumberFormat(window.Shopify.locale, {
  style: 'currency',
  currency: window.liquidAjaxCart.cart.currency
}).format(passedValue / 100);

If the Shopify.locale or the Intl are not available, the formatter returns the following:

// 100.00 USD
return `${ (value / 100).toFixed(2) } ${ window.liquidAjaxCart.cart.currency }`;

Use the binderFormatters configuration parameter to define custom formatters.