v2.1.1
Support the select element as a quantity input, bug fixes. Read more

Build a Shopify Ajax-cart without JavaScript coding

A JavaScript library that ajaxifies your Shopify theme using Bundled section rendering — just apply the data-ajax-cart-section attribute to the Ajax-cart content and wrap product forms in the <ajax-cart-product-form> custom tag.

Installation Differences from v1

What's inside

Liquid Ajax Cart is a well-tested JavaScript code that covers most of the scenarios for building an Ajax-cart. In order to apply a specific Ajax functionality to an element, add a corresponding data-attribute or wrap in a custom tag, provided by the library.

You don't need to write Ajax functionality from scratch, test it, or copy-paste from a previous projects anymore.

23.8 KB
Size of the minified version

Ajax “Add to cart”

Wrap a product form in the <ajax-cart-product-form> custom tag — Liquid Ajax Cart will perform a Shopify Cart API Ajax request once a user submits the product form.

<ajax-cart-product-form>
  {% form 'product', product %}
    <!-- form content -->

    <div data-ajax-cart-errors="form"></div>
  {% endform %}
</ajax-cart-product-form>

Re-rendering Ajax cart content

Apply the data-ajax-cart-section attribute to a Shopify cart section — Liquid Ajax Cart will re-render the section after each Shopify Cart API Ajax request.

<div class="my-ajax-cart" data-ajax-cart-section>
  <h2>Cart ({{ cart.item_count }})</h2>

  <div class="my-ajax-cart__content">
    <!-- Ajax cart content -->
  </div>
</div>

Cart item quantity input

Wrap a cart item quantity input, the “Plus” and “Minus” buttons in the ajax-cart-quantity custom tag and apply the corresponding data-attributes — Liquid Ajax Cart will perform a Shopify Cart API Ajax request once a user changes the input value or clicks the buttons.

<ajax-cart-quantity>
  <button data-ajax-cart-quantity-minus>Minus one</button>
  <input data-ajax-cart-quantity-input="{{ line_item_index }}" value="{{ line_item.quantity }}" type="number" />
  <button data-ajax-cart-quantity-plus>Plus one</button>
</ajax-cart-quantity>

Error messages

Add an element with the data-ajax-cart-errors attribute — Liquid Ajax Cart will insert Shopify Cart API error responses to the element.

<div data-ajax-cart-errors="{{ line_item.key }}">
  <!--
    Errors from the request responses
    related to the line item with the specified key
    will appear here
  -->
</div>

CSS classes

Liquid Ajax Cart adds the cart related classes to the html tag so that you can style the page based on the cart state.

/* When the cart is empty */
.js-ajax-cart-empty .my-cart-items-counter {
  display: none;
}

/* When an Ajax request is in progress */
.js-ajax-cart-processing .my-loading-indicator {
  display: block;
}

JavaScript API

Liquid Ajax Cart provides methods for executing Shopify Cart API Ajax requests, as well as properties and events to extend functionality.

// Listen for the "liquid-ajax-cart:request-end" event which is fired
// after a Shopify Cart API Ajax request is performed
document.addEventListener('liquid-ajax-cart:request-end', event => {
  const {requestState} = event.detail;

  // If the "add to cart" request is successful
  if (requestState.requestType === 'add' && requestState.responseData?.ok) {

    // Add the CSS class to the "body" tag
    document.body.classList.add('js-show-ajax-cart');
  }
});

No styles

Liquid Ajax Cart doesn't provide a layout for Ajax carts and doesn't apply any CSS styles, so the appearance is up to you.

._           _ _ _
| |__  _   _(_) | |_
| '_ \| | | | | | __|
| |_) | |_| | | | |_
|_.__/ \__,_|_|_|\__|
  __
 / _| ___  _ __
| |_ / _ \| '__|
|  _| (_) | |
|_|  \___/|_|
     _
  __| | _____   _____
 / _` |/ _ \ \ / / __|
| (_| |  __/\ V /\__ \
 \__,_|\___| \_/ |___/

From a GitHub discussion:

I managed to make the 98% of my lateral cart in about 15% of the estimated time