Ajaxifing a cart section
Add the
data-ajax-cart-section attribute to the container that must be re-rendered when the user's cart gets changed
Use
routes.cart_change_url and data-ajax-cart-request-button for "Plus", "Minus" and "Remove" buttons
Add the
data-ajax-cart-quantity-input attribute to quantity input fields
Place a
data-ajax-cart-messages container for error messages
sections/my-cart.liquid
<!-- To ajaxify your cart section
add the data-ajax-cart-section attribute
to a container that must be re-rendered
when the user's cart gets changed -->
<form action="{{ routes.cart_url }}" method="post">
<div class="my-cart" data-ajax-cart-section>
<h2>Cart</h2>
{% for item in cart.items %}
<div class="my-cart__item">
<a href="{{ item.url }}">{{ item.title }}</a>
<div>Price: {{ item.final_price | money }}</div>
<div>
Quantity:
<!-- Use routes.cart_change_url for "Plus", "Minus", "Remove" buttons,
add the data-ajax-cart-request-button attribute to ajaxify them -->
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | minus: 1 }}">
<i class="minus-icon"></i>
</a>
<!-- Add the data-ajax-cart-quantity-input attribute to quantity input fields -->
<input data-ajax-cart-quantity-input="{{ forloop.index }}" value="{{ item.quantity }}" name="updates[]" type="number"/>
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity={{ item.quantity | plus: 1 }}">
<i class="plus-icon"></i>
</a>
</div>
<!-- Place a data-ajax-cart-messages container for error messages -->
<div data-ajax-cart-messages="{{ item.key }}"></div>
<div>Total: <strong>{{ item.final_line_price | money }}</strong></div>
</div>
{% endfor %}
<button type="submit" name="checkout">Checkout — {{ cart.total_price | money_with_currency }}</button>
</div>
</form>
{% schema %} { "name": "My Cart" } {% endschema %}
Cart
Balloon T-Shirt
Price: $25.00
Quantity:
3
Total: $75.00
Checkout — $75.00
Ajaxifying product forms
Product forms will be ajaxified automatically
Place a
data-ajax-cart-messages container for error messages
sections/product-template.liquid
<h1 class="product__title">
{{ product.title | escape }}
</h1>
<div class="product__price">
{{ product.selected_or_first_available_variant.price | money }}
</div>
<div class="product__description">
{{ product.description }}
</div>
<!-- Product forms will be ajaxified automatically -->
{% form 'product', product %}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<!-- Place a data-ajax-cart-messages container for error messages -->
<div data-ajax-cart-messages="form"></div>
<button type="submit" name="add">
Add to cart
</button>
{% endform %}
Balloon T-Shirt
$25.00
Upgrade your style with the brand-new funny print on our famous cotton Tshirt.
Using JavaScript API
Run your code before and after a Cart Ajax API request gets performed
Run your code when the cart state is updated
layout/theme.liquid
<script type="module">
import { subscribeToCartAjaxRequests, subscribeToCartStateUpdate } from '{{ "liquid-ajax-cart.js" | asset_url }}';
// Run your code before and after a Cart Ajax API request gets performed:
// Show a pop-up message after adding to cart
subscribeToCartAjaxRequests(( requestState, subscribeToResult ) => {
if ( requestState.requestType === 'add' ) {
subscribeToResult( requestState => {
if ( requestState.responseData?.ok ) {
let productName = requestState.responseData.body.title;
if ( requestState.responseData.body.items?.length === 1 ) {
productName = requestState.responseData.body.items[0].title;
}
alert(`${ productName ? '«' + productName + '» is' : 'Products are' } successfully added`);
}
});
}
});
// Run your code when the cart state is updated:
// Highlight a promo block when the cart total is $100 or more
subscribeToCartStateUpdate( state => {
const triggerAmount = 10000; // $100
const promoBlock = document.querySelector('.promo-block');
if ( state.status.cartStateSet && promoBlock ) {
if ( state.cart.total_price >= triggerAmount ) {
promoBlock.classList.add('promo-block--highlighted');
} else {
promoBlock.classList.remove('promo-block--highlighted');
}
}
});
</script>
“My favourite thing about this library is that there is absolutely no styles so you can do whatever you like with it.”
