用于监视购物车活动的脚本标记 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获取覆盖代码