Event

liquid-ajax-cart:queue-end

An event which is fired at the document when a Liquid Ajax Cart has executed all the Shopify Cart API Ajax requests from the Queue and it is switching back to the “idle” mode.

How it works

Liquid Ajax Cart doesn’t perform Shopify Cart API Ajax requests immediately, it adds them to the Queue. When a request is executed, it is removed from the Queue. If there is no other request to perform, Liquid Ajax Cart triggers the liquid-ajax-cart:queue-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.

document.addEventListener("liquid-ajax-cart:queue-end", function() {
  console.log("A queue of requests is finished");
  console.log("The current cart state is: ", window.liquidAjaxCart.cart);
});

Sending requests from the event listener

If you want to send a Shopify Cart API request from a liquid-ajax-cart:queue-end event listener, you have a chance to get into infinity loop of requests:

  • a queue of requests is finishes and fires the liquid-ajax-cart:queue-end event,
  • your event listener initiates a request,
  • Liquid Ajax Cart creates a new queue of requests and puts the request there
  • when the new queue is finishes, it fires the liquid-ajax-cart:queue-end event …

In order to prevent this, make sure that you have a strong condition that won’t let the loop happen:

let ranOnce = false;

document.addEventListener("liquid-ajax-cart:queue-end", function(event) {
  // condition to prevent infinity loop:
  if (!ranOnce) {
    ranOnce = true;

    // send your request
    window.liquidAjaxCart.add(...);
  }
});