liquid-ajax-cart:request-end

An event which is fired at the document when Liquid Ajax Cart completes a Shopify Cart API Ajax request.

How it works

When a Shopify Cart API Ajax request is executed or cancelled, Liquid Ajax Cart updates the cart state in the liquidAjaxCart.cart property, updates the data-ajax-cart-section elements and all the cart related content, and then triggers the liquid-ajax-cart:request-end event.

The detailed explanation on when each event is fired and what exactly happens before and after each event is in the “Lifecycle, events, API” guide.

Use cases

Use this event when you want to:

• modify the page content depending on the request’s result or when the cart state (which is stored in the liquidAjaxCart.cart property) is updated;
• modify the data-ajax-cart-section elements content or add event listeners to them when the elements are re-rendered;
• track each successful cart-related user’s action, such as adding a product to the cart, removing a product from the cart, etc.

Code examples with this event:

• Open the Ajax-cart when a user adds a product to the cart;

Don’t use the event when you want to modify the cart state by performing an additional Shopify Cart API Ajax request based on a particular rule. There might be a few requests in the Queue, thus it is better to check the condition and initiate the additional request in a liquid-ajax-cart:queue-end event listener, when all the current requests are executed.

Structure

The event’s detail property contains an object with the following properties:

document.addEventListener("liquid-ajax-cart:request-end", function(event) {
  const {requestState, cart, previousCart, sections} = event.detail;

  // Print out all the available event data
  console.log({requestState, cart, previousCart, sections});
});

requestState

A Request state object, related to the request.

cart, previousCart

If a Shopify Cart API Ajax request is successful, Liquid Ajax Cart retrieves the cart state data from the response, saves it in the liquidAjaxCart.cart property, and returns the saved cart state data in the detail.cart property of the event. The detail.previousCart property of the event provides the cart state data that was kept in the liquidAjaxCart.cart property before the update.

If the request isn’t successful, thus it doesn’t have the cart state data, the properties detail.cart and detail.previousCart of the event are undefined.

sections

Liquid Ajax Cart re-renders the data-ajax-cart-section elements after each successful Shopify Cart API Ajax request.

The event’s detail.sections property contains an array with all HTML elements re-rendered after the request. If the request isn’t successful or the page doesn’t have the data-ajax-cart-section elements, then the detail.sections property contains an empty array.

document.addEventListener("liquid-ajax-cart:request-end", function(event) {
  const {sections} = event.detail;
  
  // Print out re-rendered sections
  console.log(sections);
  });

Result:

[
  {
    "id": "my-ajax-cart",
    "elements": [ Element {}, Element {} ]
  }
]

• id — Shopify section’s ID;
• elements — an array of the re-rendered data-ajax-cart-section elements.