Javascript 使用AJAX更新Shopify中的购物车编号

Javascript 使用AJAX更新Shopify中的购物车编号,javascript,jquery,json,ajax,shopify,Javascript,Jquery,Json,Ajax,Shopify,抱歉,如果这是在其他地方,但我找不到更好的方法来做这件事 我想在任何时候添加、删除产品或更改数量时,使用AJAX实时更新购物车总数 我有它的工作,但必须有一个更好的方式。不断地进行民意调查以寻求改变是不对的,我当然不想以内存泄漏告终 现在,我从JSON获取项目计数,然后通过每秒轮询一次来更改div中的数字,这给用户一种错觉,即当他们更改某些内容时,数字正在更新 我尝试过在“添加到购物车”按钮中添加一个侦听器(有效)以及在数量选择器上进行侦听(无效) 我相信我只是个傻瓜,所以我非常感谢你的帮助。代

抱歉,如果这是在其他地方,但我找不到更好的方法来做这件事

我想在任何时候添加、删除产品或更改数量时,使用AJAX实时更新购物车总数

我有它的工作,但必须有一个更好的方式。不断地进行民意调查以寻求改变是不对的,我当然不想以内存泄漏告终

现在,我从JSON获取项目计数,然后通过每秒轮询一次来更改div中的数字,这给用户一种错觉,即当他们更改某些内容时,数字正在更新

我尝试过在“添加到购物车”按钮中添加一个侦听器(有效)以及在数量选择器上进行侦听(无效)

我相信我只是个傻瓜,所以我非常感谢你的帮助。代码如下:

// Fetch the cart in JSON and change cart quantity on the fly after first product added to cart
  function doPoll(){
    setTimeout(function() {
      $.getJSON('/cart.js', function(cart) {
        $('.cart-count').html(cart.item_count);
        doPoll();
    }, 1000);
  }
使现代化 所以修复实际上非常简单。我无法在购物车中的特定元素上附加侦听器的原因是购物车尚未通过ajax加载(duh!)

因此,我所做的只是删除常量轮询,而是在页面上的ajax完全加载时运行我的函数:

$( document ).ajaxComplete(function() {
    //Do stuff here
});

如果您还没有实现任何其他方式来添加到购物车,那么它非常简单


如果查看前面提到的AJAX函数文件,特别是第101行和第113行的函数,您可以看到这些函数与购物车更新相关。添加您的代码
$('.cart count').html(cart.item_count)
回调(购物车)之前然后你就可以走了。

事实上这更简单。如果发生ajax驱动的cart调整,则Timber将为您提供一个可覆盖的钩子。只需覆盖shopfifyapi.onCartUpdate

e、 g

除此之外,您的购物车计数也可通过liquid在页面加载中使用,因此,如果您将两者结合起来,您将被涵盖:

<div class="cart-count">{{ cart.item_count }}</div>
{{cart.item_count}

在你的
scripts.js
文件中检查三个功能-购物车/添加、购物车/更新、购物车/删除和分享你发现的内容。抱歉,你能澄清一下吗?在你的Shopify主题部分,会有一个scrips.js.liquid文件,这是一个默认主题。这样,您将拥有一组与购物车相关的特定功能。如果你能分享它们,帮助会更容易。我应该澄清一下-我使用的是基于木材()的定制主题。这里是与购物车相关的AJAX函数:但我在函数中引用的是使用API调用/cart.js,这就是我之前的工作。。它是从基本主题开始工作的,但后来我添加了第二个.cart count div(在cart弹出抽屉中),然后它就从那里走下坡路了,哈哈。我会看看我是否可以在。。。或者回到核心功能,只移动div而不是复制它对此延迟深表歉意。。我发现了问题所在-修改了我的q以包含答案。谢谢你给我指出了正确的方向-我绝对不会改变核心文件。函数重写是一条路要走。
<div class="cart-count">{{ cart.item_count }}</div>