我正在编写一个 Shopify 应用程序，我想收听 shopify 购物车更新事件。我知道当用户点击删除或增加项目数量时。 Shopify 向后端发送 POST 请求以更新卡。我的应用程序根据 shopify 购物车商品数量计算运费。我通过 script-tag 将我的应用脚本添加到 shopify。
我试图监听数量输入，但这个事件只触发一个。我认为 shopify 在每次购物车更新后都会更新输入 DOM，因此它可能会删除我的侦听器。
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
如何收听购物车更新事件？这似乎是一个简单的问题，但我真的找不到任何关于 Shopify 的答案！
【问题讨论】：
标签： shopify shopping-cart shopify-app
因此 Shopify 购物车可以通过 2 种方式进行更新。通过提交表单或使用 Ajax API。假设您已经通过在页面加载时调用计算运输功能解决了表单提交问题。对于基于 Ajax 的购物车更新，没有标准事件。某些主题可能会在购物车更新时触发事件，但对于通用应用，由于没有定义的标准行为，因此无法依赖它们。
因此，您可以做的是监听 AJAX 调用并在符合您的条件时调用您的函数。 Shopify Docs for Ajax API 列出了可能更新购物车的 4 种 POST 请求类型。因此，通过修补 XMLHttpRequest 的 open 函数，我们为 load 添加了一个事件侦听器，该侦听器在请求成功完成时触发。在事件回调中，我们检查该 URL 是否是用于更新购物车的 URL，然后调用 update shipping 函数。
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));
}
ajaxComplete 没有被使用，因为它只监听使用 jQuery 发出的请求。
将响应传递给您的 Shipping 函数可以节省额外的 Get Cart Ajax 调用。
更新
如果上述代码对您不起作用或无法捕获所有调用，请参阅我的其他答案，该答案还会监听所有 Fetch API 调用（如果用于更新购物车）。
【讨论】：
在分段主题中更新购物车中的商品数量字段
第 1 步：您访问 Shopify 后台，点击在线商店并转到主题。
第 2 步：找到您要编辑的主题，然后按操作，然后按编辑代码。
第 3 步：查看 Sections，点击 cart-template.liquid。如果你没有使用没有地址的主题，你可以访问模板目录并点击cart.liquid。
第 4 步：在输入标签中找到写为 update[item.id] 的短语。
第 5 步：将名称更改为 name="updates[]" 的值。
第 6 步：每当您在输入标签中看到更新 [] 的名称值时，重复上述步骤。
第 7 步：点击保存，您就成功更新了商品数量字段..
【讨论】：