监听 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 调用并在符合您的条件时调用您的函数。 Shopify Docs for Ajax API lists the 4 types of POST request that may update the Cart. So by patching the open function of XMLHttpRequest we add an event listener for load 当请求成功完成时触发。在事件回调中，我们检查 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.

发出的请求

将响应传递给您的送货功能可以节省额外的获取购物车 Ajax 调用。

更新

如果上面的代码对您不起作用或没有接听所有电话，请参阅我的其他答案，如果正在使用它来更新购物车，它也会侦听所有 Fetch API 电话。

Listen to Cart changes using Fetch API

Answer 2

在分段主题中更新购物车中的商品数量字段

第 1 步：您访问 Shopify 后台，单击在线商店并转到主题。

第 2 步：找到您要编辑的主题，然后依次按“操作”和“编辑代码”。

第 3 步：查看“部分”，单击 cart-template.liquid。如果你不使用没有地址的主题，你可以进入Template目录并点击cart.liquid。

第 4 步：在输入标签中找到写为 update[item.id] 的短语。

第五步：将name改成name=”updates[]”的值。

第 6 步：每当您在输入标签中看到 updates[] 的名称值时，重复上述步骤。

第 7 步：点击保存，您成功更新了项目数量字段..

监听 shopify 购物车更新数量

Listen to shopify cart update quantity

shopify

shopping-cart

shopify-app