更新

Question

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

2016-05-02

9122

javascript jquery json ajax shopify

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

我想在添加、删除产品或更改数量时使用 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
});

Answer 1

实际上它更简单。如果发生 ajax 驱动的购物车调整，Timber 会为您提供可覆盖的钩子。只需覆盖 ShopifyAPI.onCartUpdate

例如

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

除此之外，您的购物车数量也可以通过 liquid 在页面加载时获得，因此如果您将两者结合起来，那么您就涵盖了：

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

Answer 2

如果您尚未实现任何其他添加到购物车的方法，这非常简单。

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

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
        })
      })