听shopify购物车更新数量

Question

我正在编写 Shopify 应用程序，我想收听 shopify 购物车更新事件。我知道当用户点击删除或增加项目数量时。Shopify 向后端发送 POST 请求以更新卡。我的应用程序根据 shopify 购物车项目数量计算运费。我通过脚本标签将我的应用程序脚本添加到 shopify。

我试图听数量输入，但这个事件只触发一个。我认为 shopify 在每次购物车更新后都会更新输入 DOM，因此它可能会删除我的侦听器。

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

如何收听购物车更新事件？这似乎是一个简单的问题，但我真的找不到有关 Shopify 的任何答案！

Answer 1

因此，Shopify 购物车可以通过两种方式进行更新。通过提交表单或使用 Ajax API。假设您已经通过在页面加载时调用计算运费函数解决了表单提交案例。对于基于 Ajax 的购物车更新，没有标准事件。某些主题可能会在购物车更新时触发事件，但对于通用应用程序，由于没有定义的标准行为，不可能依赖它们。

因此，您可以做的是侦听 AJAX 调用并在它符合您的条件时调用您的函数。适用于 Ajax API 的 Shopify Docs列出了可能更新购物车的 4 种类型的 POST 请求。因此，通过修补XMLHttpRequest的 open 函数，我们添加了一个事件侦听器，用于在请求成功完成时触发的负载。在事件回调中，我们检查 URL 是否是用于更新购物车的 URL，然后调用更新运输函数。

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));
}

来自 Nicolas的回答的想法

没有使用ajaxComplete，因为它只侦听使用 jQuery 发出的请求。

将响应传递给您的 Shipping 函数可以节省额外的 Get Cart Ajax 调用。

更新

如果上面的代码对您不起作用或没有捕获所有调用，请参阅我的另一个答案，该答案也侦听所有 Fetch API 调用（如果用于更新购物车）。

使用 Fetch API 监听 Cart 的变化