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

Question

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

我想在添加、删除或更改数量时使用 AJAX 实时更新购物车总数。

我有它的工作，但必须有一个更好的方法。 不断轮询更改感觉是错误的，我当然不想以 memory 泄漏告终。

现在，我从 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 完全加载时运行我的 function：

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

Answer 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>

Answer 2

如果您还没有实现任何其他方式添加到购物车，这很简单。

如果您查看您提到的 AJAX 函数文件，尤其是第 101 行和第 113 行的函数，您会发现这些函数与购物车更新有关。 添加您的代码$('.cart-count').html(cart.item_count); callback(cart);前callback(cart); 你会很高兴去的。

Answer 3

没有 Jquery 的更新解决方案。 您可以使用 fetch 然后使用返回的数据来填充购物车计数。

      fetch('/cart.js')
      .then(response => response.text())
      .then((responseText) => {
        data = JSON.parse(responseText);
        var counterEl = document.querySelectorAll('.js-cart-item-count');

        counterEl.forEach((element) => {
          element.innerHTML = data.item_count
        })
      })