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

Updating the cart number in Shopify with AJAX

本文关键字：购物车 编号 Shopify AJAX 更新 使用      更新时间：2023-09-26

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

我想在任何时候添加、删除产品或更改数量时，使用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驱动的cart调整，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的方法，那么它非常简单。

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

没有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
        })
      })
相关文章：