Listen to shopify cart update quantity

Question

I am writing a Shopify app and I would want to listen to the shopify cart update event. I know that when user clicks on remove or increase the item quantity. Shopify send a POST request to the backend to update the card. My app calculates the shipping value based on shopify cart item quantity. I add my app script to the shopify via script-tag.

I tried to listen to the quantity input but this event only fires one. I think shopify updates the input DOM after every cart update so it may remove my listener.

 $('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});

How can I listen to the cart update event? It seems to be a simple question but I really cannot find any answer regarding to Shopify!

Answer 1

So there are 2 ways that a Shopify cart may get updated. Either via submitting form or using Ajax API. Assuming, you have already solved the form submission case by calling your calculate shipping function on page load. For Ajax based cart updates there is no standard event. Some themes may fire an event on cart update, but in case of a generic app, it is not possible to rely on them due to no defined standard behavior.

So what you can do is to listen to AJAX calls and call your function if it matches your conditions. Shopify Docs for Ajax API lists the 4 types of POST request that may update the Cart. So by patching the open function of XMLHttpRequest we add an event listener for load that fires when the request finished successfully. In the event callback, we check if the URL was the one used for updating cart, then call update shipping function.

const open = window.XMLHttpRequest.prototype.open;

function openReplacement() {
  this.addEventListener("load", function () {
    if (
      [
        "/cart/add.js",
        "/cart/update.js",
        "/cart/change.js",
        "/cart/clear.js",
      ].includes(this._url)
    ) {
      calculateShipping(this.response);
    }
  });
  return open.apply(this, arguments);
}

window.XMLHttpRequest.prototype.open = openReplacement;

function calculateShipping(cartJson) {
  console.log("calculate new shipping");
  console.log(JSON.parse(cartJson));
}

Idea taken by answer from Nicolas

ajaxComplete was not used because it only listens to requests made using jQuery.

Passing response to your Shipping function saves the additional Get Cart Ajax call.

Update

If the above code does not work for you or does not catch all the calls, see my other answer that also listens to all Fetch API calls if that is being used to update cart.

Listen to Cart changes using Fetch API