data-ajax-cart-bind-state

Add the data-ajax-cart-bind-state attribute to an HTML element, pass a State object property as the attribute’s value and Liquid Ajax Cart will display the state property’s value within the HTML element and refresh it when the cart gets updated.

<div data-ajax-cart-bind-state="cart.item_count" > 
  <!-- Cart item count appears here --> 
</div>

<!-- The best practice is to use [data-ajax-cart-bind-state] on top of Liquid expressions.
The liquid expression {{ cart.item_count }} displays the amount 
even if Liquid Ajax Cart is not loaded: -->
<div data-ajax-cart-bind-state="cart.item_count" >
  {{ cart.item_count }}
</div>

<!-- Use the "money_with_currency" formatter
to show money related values -->
<div data-ajax-cart-bind-state="cart.total_price | money_with_currency">
  {{ cart.total_price | money_with_currency }}
</div>

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: state.cart.currency
}).format(value / 100);

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

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

You can define your own formatters using the stateBinderFormatters configuration parameter.

data-ajax-cart-bind-state

Reference