Liquid Ajax Cart lets you display user cart data, such as the number of cart items or the total cart price,
outside the data-ajax-cart-section elements as well.
Usually this information is located in the header of a webpage.
The following Liquid code might be used to show the number of cart items and the total cart price:
<span class="header__cart-quantity">
{{ cart.item_count }}
</span>
<span class="header__cart-total">
{{ cart.total_price | money_with_currency }}
</span>However, those values are static and will update only after a page refresh.
To enable updates without requiring a page refresh, apply the data-ajax-cart-bind attribute
to the elements and provide a property from the liquidAjaxCart.cart object, that you want to display.
For displaying the number of cart items, use the item_count property,
while for showing the cart total price, employ the total_price property.
The attribute supports formatters. In order to display price values, use the money_with_currency formatter.
Liquid Ajax Cart updates the content of the data-ajax-cart-bind elements
when the Shopify cart state is changed.
<span data-ajax-cart-bind="item_count" class="header__cart-quantity">
{{ cart.item_count }}
</span>
<span data-ajax-cart-bind="total_price | money_with_currency" class="header__cart-total">
{{ cart.total_price | money_with_currency }}
</span>In order to show or hide the cart totals if the cart is empty or not empty,
use the js-ajax-cart-empty and js-ajax-cart-not-empty
CSS classes.