Liquid Ajax Cart v1.7.0

  • A JavaScript asset for Shopify
  • v1.7.0
  • OS 2.0 compatible
  • 19 KB minified
Ajaxifies cart sections and product forms, provides JavaScript API
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
You can't add more of this item to your cart
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.
All 3 Balloon T-Shirt are in your cart.
Add to cart
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.”
codeshopify.com