data-ajax-cart-request-button

Add the data-ajax-cart-request-button to links that lead to Shopify routes.cart_add_url, routes.cart_change_url, routes.cart_clear_url, routes.cart_update_url and line_item.url_to_remove routes to ajaxify them.

The most popular usecases are “Plus”, “Minus” and “Remove” buttons for a cart line item:

<form action="{{ routes.cart_url }}" method="post">
  <div data-ajax-cart-section>
    <h2>Cart</h2>
    
    <div class="my-cart__items">
      {% for item in cart.items %}
        {% assign item_index = forloop.index %}
        <div><a href="{{ item.url }}">{{ item.title }}</a></div>

        <div>
          Quantity:

          <!-- Ajaxified "Minus one" button -->
          <a data-ajax-cart-request-button
            href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" > 
            Minus one 
          </a>

          {{ item.quantity }}

          <!-- Ajaxified "Plus one" button -->
          <a data-ajax-cart-request-button 
            href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}"> 
            Plus one 
          </a>
        </div>

        <div>Total: <strong>{{ item.final_line_price | money }}</strong></div>

        <!-- Ajaxified "Remove" button -->
        <a data-ajax-cart-request-button href="{{ item.url_to_remove }}">
          Remove
        </a>
      {% endfor %}
    </div>
    
    <button type="submit" name="checkout">
      Checkout — {{ cart.total_price | money_with_currency }}
    </button> 
  </div>
</form>

An “Add to cart” button without a form:

<!-- "id" parameter is a variant id -->
<a href="{{ routes.cart_add_url }}?id=40875540775100&quantity=1" data-ajax-cart-request-button>Add to cart</a>

A “Clear cart” button:

<a href="{{ routes.cart_clear_url }}" data-ajax-cart-request-button>Clear cart</a>

It is a good practice to use routes.cart_*_url links because they will work even without JavaScript.

But if you can’t use the a tag with the href parameter, Liquid Ajax Cart still offers the same functionality for any HTML element: add the data-ajax-cart-request-button attribute to an HTML element and provide a routes.cart_*_url route as an attribute’s value:

<button data-ajax-cart-request-button="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" >
  Minus one 
</button>

<div data-ajax-cart-request-button="{{ routes.cart_change_url }}?id={{ item.key }}&quantity=0" > 
  Remove
</div>

<span data-ajax-cart-request-button="{{ routes.cart_clear_url }}" > 
  Clear cart
</div>

Inactive state

The data-ajax-cart-request-button elements become inactive when there is a Shopify Cart Ajax API request in progress.

Liquid Ajax Cart adds the js-ajax-cart-request-in-progress CSS class to the body tag so you can show a loading indicator or make the controls visually disabled.

Reference