【问题标题】：Updating the cart number in Shopify with AJAX使用 AJAX 在 Shopify 中更新购物车编号
【发布时间】：2016-05-02 12:47:10
【问题描述】：

抱歉，如果这是其他地方，但我找不到更好的方法。

我想在添加、删除或更改数量时使用 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 加载购物车（呃！）

所以我所做的只是删除了不断的轮询，而是在页面上的 ajax 完全加载时运行我的函数：

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

【问题讨论】：

在您的scripts.js 文件中检查三个功能 - 购物车/添加、购物车/更新、购物车//删除并分享您的发现。
对不起 HymnZ 你能澄清一下吗？
在您的 Shopify 主题部分中，将有一个 scrips.js.liquid 文件，这是一个主题默认值。在那里，您将拥有一组与购物车相关的特定功能。如果您可以分享它们，就会更容易提供帮助。
应该澄清一下 - 我正在使用基于 Timber (github.com/Shopify/Timber) 的自定义主题。与购物车相关的 AJAX 函数在这里：github.com/Shopify/Timber/blob/master/assets/… 但我在函数中引用的是使用 API 调用 /cart.js - docs.shopify.com/themes/development/getting-started/…

标签： javascript jquery json ajax shopify

【解决方案1】：

其实它更简单。如果发生 ajax 驱动的购物车调整，Timber 会给你一个可覆盖的钩子。只需覆盖 ShopifyAPI.onCartUpdate

例如

ShopifyAPI.onCartUpdate = function(cart){
    //do something new with the cart contents
    $('.cart-count').html(cart.item_count);
};

除此之外，您的购物车数量还可以通过液体在页面加载时获得，因此如果您将两者结合起来，您将得到保障：

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

【讨论】：

这是我之前的工作。它从基本主题开始工作，但后来我添加了第二个 .cart-count div（在购物车弹出抽屉中），然后一切都从那里走下坡路哈哈。我会看看我是否可以在......或者只是回到核心功能并只是移动 div 而不是复制它。
('.cart-count').each(function(){$(this).html(cart.item_count); });怎么样
对此延迟表示歉意。我发现了问题所在 - 修改了我的 q 以包含答案。

【解决方案2】：

如果你还没有实现任何其他添加到购物车的方法，那很简单。

如果您查看您提到的 AJAX 函数文件，尤其是第 101 和 113 行的函数，您可以看到这些函数与购物车更新有关。在callback(cart); 之前添加您的代码$('.cart-count').html(cart.item_count);，您就可以开始了。

【讨论】：

感谢您为我指明正确的方向 - 不过我绝对不会更改核心文件。函数覆盖是要走的路。