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
