An attribute which transforms the user’s click on the
routes.cart_add_url,
routes.cart_change_url,
routes.cart_clear_url,
routes.cart_update_url
and line_item.url_to_remove links
into a Shopify Cart API Ajax request.
Liquid Ajax Cart subscribes to the click event of the data-ajax-cart-request-button elements.
When the event is fired, Liquid Ajax Cart checks if the value of the element’s href attribute is a valid
routes.cart_add_url, routes.cart_change_url, routes.cart_clear_url, routes.cart_update_url or line_item.url_to_remove URL.
If the URL is valid, Liquid Ajax Cart turns the URL into a FormData object and sends it as a Shopify Cart API Ajax request.
The most popular use cases are “Remove cart item” and “Clear cart” buttons.
It might be used for an “Add to cart” button, “Plus” and “Minus” cart item quantity buttons, but it is recommended to use other approaches for these cases.
<div class="my-cart" data-ajax-cart-section>
<h2>Cart</h2>
<div class="my-cart__items">
{% for item in cart.items %}
<div><a href="{{ item.url }}">{{ item.title }}</a></div>
<div>Price: {{ item.final_price | money }}</div>
<a data-ajax-cart-request-button href="{{ item.url_to_remove }}">
Remove
</a>
<!-- ... --><div class="my-cart" data-ajax-cart-section>
<h2>Cart</h2>
<a data-ajax-cart-request-button href="{{ routes.cart_clear_url }}">
Clear cart
</a>
<!-- ... -->Liquid Ajax Cart sends a Shopify Cart API Ajax immediately when a user clicks a data-ajax-cart-request-button button.
It might be a disadvantage in case of “Plus” and “Minus” buttons.
For example if a user wants to increase a cart item quantity by three by clicking a “Plus” button three times,
they will have to wait for Liquid Ajax Cart to finish a Shopify Cart API Ajax request after each click.
To provide a better user experience, it is recommended to use the <ajax-cart-quantity> custom tag
for the “Plus” and “Minus” buttons. This custom tag waits for some time before sending a Shopify Cart API Ajax request,
letting a user click the button more than once without the “loading” state delay.
If you still want to use the data-ajax-cart-request-button for the case, this is how to do it:
<div class="my-cart" data-ajax-cart-section>
<h2>Cart</h2>
<div class="my-cart__items" data-ajax-cart-section-scroll>
{% for item in cart.items %}
{% assign item_index = forloop.index %}
<hr />
<div><a href="{{ item.url }}">{{ item.title }}</a></div>
<div>Price: {{ item.final_price | money }}</div>
<div>
Quantity:
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" >
Minus one
</a>
<input data-ajax-cart-quantity-input="{{ item_index }}"
name="updates[]"
value="{{ item.quantity }}"
type="number"
form="my-ajax-cart-form" />
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}">
Plus one
</a>
</div>
<!-- ... -->If you have an “Add to cart” link, you can ajaxify it by adding the data-ajax-cart-request-button to it.
But it is recommended to use the Shopify product forms to create “Add to cart” buttons and ajaxify them as explained in the “Product forms” guide. There are a few advantages when using ajaxified product form rather than links:
<ajax-cart-product-form> custom tag, that is intended to ajaxify product forms, has the loading attribute. This lets you show a dedicated loading indicator for the “Add to cart” button using CSS only.data-ajax-cart-errors attribute within the ajaxified product forms to show error messages without writing JavaScript.data-ajax-cart-request-button elements switch to the “loading” state when there is any Shopify Cart API Ajax request in progress.If you still want to use an “Add to cart” link with the data-ajax-cart-request-button attribute, this is how to do it:
<!-- You have to use a variant ID with the "routes.cart_add_url" route -->
{% assign variant_id = 40875540775100 %}
<a data-ajax-cart-request-button
href="{{ routes.cart_add_url }}?id={{ variant_id }}&quantity=1" >
Add to cart
</a>hrefIt is recommended to use the data-ajax-cart-request-button with a real link because they works even without JavaScript and if Liquid Ajax Cart isn’t loaded.
But if you can’t use the a tag with the href parameter,
add the data-ajax-cart-request-button attribute to any HTML element
and provide a valid routes.cart_add_url, routes.cart_change_url, routes.cart_clear_url, routes.cart_update_url or line_item.url_to_remove URL as the attribute’s value:
<button data-ajax-cart-request-button="{{ item.url_to_remove }}">
Remove
</button>
<div data-ajax-cart-request-button="{{ routes.cart_clear_url }}">
Clear cart
</div>The data-ajax-cart-request-button elements become inactive when there is any Shopify Cart API Ajax request in progress.
If you want to make them visually disabled when they are inactive, use the js-ajax-cart-processing CSS class
which is added by Liquid Ajax Cart when there is a Shopify Cart API Ajax request in progress.