听shopify购物车更新数量

如何解决听shopify购物车更新数量

我正在编写Shopify应用程序，我想听听shopify购物车更新事件。我知道当用户单击删除或增加项目数量时。 Shopify将POST请求发送到后端以更新卡。我的应用程序根据shopify购物车商品数量计算运费。我通过脚本标签将应用程序脚本添加到shopify中。

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

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

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

解决方法

因此，有两种方式可以更新Shopify购物车。通过提交表单或使用Ajax API。假设，您已经通过在页面加载时调用计算运送功能来解决表单提交的情况。对于基于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发出的请求。

将响应传递到您的“运送”功能可保存其他“获取购物车Ajax”调用。

更新

如果上面的代码对您不起作用或无法捕获所有调用，请查看我的其他答案，该答案还将侦听所有Fetch API调用（如果用于更新购物车）。

Listen to Cart changes using Fetch API

,

以分段主题更新购物车中的项目数量字段

步骤1：您访问Shopify管理员，点击在线商店，然后转到主题。

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

第3步：查看“部分”，然后单击cart-template.liquid。如果您使用的主题没有地址，则可以访问Template目录，然后单击cart.liquid。

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

第5步：将名称更改为name =“ updates []”的值。

步骤6：每当在输入标记中看到update []的名称值时，请重复上述步骤。

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