Product forms

Liquid Ajax Cart initiates a Shopify “add to cart” Ajax request when a user submits a product form, lets you display a loading indicator, re-renders data-ajax-cart-section elements if the request is successful, shows an error message if something went wrong.

Ajaxify a product form

Liquid Ajax Cart works with valid Shopify product forms.

Build or find a product form that you want to ajaxify. Typically, it has a structure similar to this:

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

  <button type="submit" name="add">
      Add to cart
  </button>
{% endform %}

Once you click the “Add to cart” button, it should redirect you to the cart page and add the product to the cart.

To ajaxify the form, wrap it in the <ajax-cart-product-form> custom tag — it initiates an “add to cart” Ajax request when a user submits the form. If the request is successful, Liquid Ajax Cart re-renders data-ajax-cart-section elements as well.

<ajax-cart-product-form>
  {% form 'product', product %}
    <!-- form content -->
  
    <button type="submit" name="add">
      Add to cart
    </button>
  {% endform %}
</ajax-cart-product-form>

Error messages

Shopify may return an error message in response to an “add to cart” request when a user attempts to add more items to the cart than are available in stock.

To display the error message, add an element with the data-ajax-cart-errors attribute within the ajaxified product form. Set the value of the attribute to the string form. if Shopify responds with an error message, Liquid Ajax Cart will insert the error message into the element.

<ajax-cart-product-form>
  {% form 'product', product %}
    <!-- form content -->
  
    <button type="submit" name="add">
      Add to cart
    </button>
    <div data-ajax-cart-errors="form"></div>
  {% endform %}
</ajax-cart-product-form>

Loading state

When the <ajax-cart-product-form> element initiates an Ajax request, it adds the processing attribute to itself and freezes the “Add to cart” button. Use the attribute to signify that the product form is currently in the process of adding a product to the cart.

/* Show a loading indicator */
ajax-cart-product-form[processing]:before {
  content: 'Loading';
  display: block;
}

/* Make the "Add to cart" button look visually disabled while loading */
ajax-cart-product-form[processing] [type="submit"] {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

JavaScript event

To execute your JavaScript code after a product is added to the cart, you should subscribe to the liquid-ajax-cart:request-end event.

This is how you can add a CSS class to the body element to open your Ajax-cart when a product is added to the cart:

// 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');
  }
});

The detailed explanation on how to interact with Liquid Ajax Cart using JavaScript is in the “Lifecycle, events, API” guide.