用于监控购物车活动的脚本标签 XHR 事件侦听器不再起作用

Question

我有一个应用程序可以将此脚本标签添加到商店中。

过去，我使用脚本标签和此脚本来监控客户的购物车活动。 当脚本标签检测到 XHR 时，它会将一些数据发送到我的后端。

var oldXHR = window.XMLHttpRequest;

function newXHR() {
  console.log('XHR detected!')
  var realXHR = new oldXHR();
  realXHR.addEventListener(
    "load",
    function () {
      if (realXHR.readyState == 4 && realXHR.status == 200) {
        if (realXHR._url === "/cart.js" || realXHR._url === "/cart/change.js") {
           // do something....
        }
      }
    },
    false
  );
  return realXHR;
}
window.XMLHttpRequest = newXHR;

但是今天我不知道为什么更改购物车和将商品添加到购物车的操作无法再触发 XHR 侦听器。 然而，这个脚本标签在我的旧商店中仍然有效。但如果我将其安装到新商店，它不会触发任何内容。我检查脚本标签在该新商店中正常运行，但问题是 XHR 监听器没有触发。

有人有什么想法吗？

Answer 1

我在 Shopify 上配置了一个新的开发商店，并尝试了您的代码以及我的其他答案中监听 XHR 调用的类似代码。但这没有用。经过一番调试，我发现它监听使用 jQuery 或 XHR 进行的调用，但不监听 Shopify Cart 的调用。这让我发现购物车更新是使用 Fetch API 完成的。因此，我们还需要监听所有的 fetch 调用。可以使用

来完成

(function(ns, fetch) {
  if (typeof fetch !== 'function') return;

  ns.fetch = function() {
    const response = fetch.apply(this, arguments);

    response.then(res => {
      if ([
          `${window.location.origin}/cart/add.js`,
          `${window.location.origin}/cart/update.js`,
          `${window.location.origin}/cart/change.js`,
          `${window.location.origin}/cart/clear.js`,
        ].includes(res.url)) {
        res.clone().json().then(data => console.log(data));
      }
    });

    return response;
  }

}(window, window.fetch))

如果与 URL 匹配，您可以使用自定义数据调用您的函数。 URL逻辑匹配没有经过彻底测试。

上面的代码适用于我最新的 Shopify Debut 主题。

从 Yury Tarabanko 获取覆盖代码