用于监视购物车活动的脚本标记 XHR 事件侦听器不再起作用 [英] script tag XHR event listener for monitoring cart activities does not work anymore

问题描述

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

I have an app which will add this script tag into the store.

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

In the past I use script tag with this script to monitor customer's cart activities. When the script tag detect a XHR, it will fire some data to my backend.

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 监听器没有触发.

But today I don't know why the action of changing the cart and adding item into cart cannot trigger the XHR listener anymore. However, this script tag is still working in my old store. But if I install it to a new store, it does not trigger anything. I check the script tag is normally running in that new store, but the problem is the XHR listener did not trigger.

有人有什么想法吗?

推荐答案

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

I configured a new Dev store on Shopify and tried your code as well as similar code from my other answer that listens to XHR calls. But it did not work. On debugging a bit, I found that it listens to calls made using jQuery or XHR but not for Shopify Cart. This led me to find out that cart updates were done using Fetch API. So, we also need to listen to all fetch calls. It can be done so using

(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 逻辑匹配没有经过彻底测试.

If it matches the URL, you can call your function with custom data. The URL logic matching is not tested thoroughly.

以上代码适用于我最新的 Shopify Debut 主题.

The above code is working for me on latest Shopify Debut theme.

从 Yury Tarabanko 获取覆盖代码

这篇关于用于监视购物车活动的脚本标记 XHR 事件侦听器不再起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！