收听购物车更新数量 [英] Listen to shopify cart update quantity

问题描述

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

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

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

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

推荐答案

所以有两种方式可以更新购物车。通过提交表单或使用Ajax API。假设您已经通过调用页面加载上的Calculate Shipping函数解决了深渊翻滚表单问题。对于基于AJAX的购物车更新，没有标准事件。某些主题可能会在购物车更新时触发事件，但对于一般应用程序，由于没有定义标准行为，因此无法依赖它们。

因此，您可以做的就是监听Ajax调用，并在函数与您的条件匹配时调用它。Shopify Docs for Ajax API列出了可能更新购物车的4种POST请求类型。因此，通过修补XMLHttpRequest的open函数，我们为load添加了一个在请求成功完成时触发的事件侦听器。在事件回调中，我们检查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));
}

构思采集者answer from Nicolas

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

将响应传递给Shipping函数可保存附加的Get Cart Ajax调用。

更新

如果上面的代码对您无效或未捕获所有调用，请参阅我的另一个答案，该答案也会侦听所有Fetch API调用(如果该API调用用于更新购物车)。

Listen to Cart changes using Fetch API

这篇关于收听购物车更新数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！