Shopify cart.item_count 未使用 AJAX onclick 功能更新

Question

我正在尝试更新 Shopify 购物车 onclick。它正在工作，但是当我尝试使用购物车添加 success: function 更新购物车计数而不刷新页面时，它不起作用。下面是我的代码。

$(function(){
    $('.varients-item').on('click', function(){
        var obj = $(this);
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            data: {
                quantity: 1,
                id: $(this).attr("data-variant")
            },
            dataType: 'json',
            success: function (data) {  
                //alert('Item added to cart');
                $('.cart-item-count').html(cart.item_count);
            }
        });
    });
});

这是console 错误：

Answer 1

这是我的解决方案。

$(function(){
    var cartCount = {{ cart.item_count }};
    $('.varients-item').on('click', function(){
        var obj = $(this);
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            data: {
                quantity: 1,
                id: $(this).attr("data-variant")
            },
            dataType: 'json',
            success: function (data) {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '/cart.json',
                    success: function(cart){
                        cartCount++;
                        $('.cart-item-count').html(cartCount);
                    }
                });
            }
        });
    });
});

Answer 2

您正在调用cart.item_count，但未定义cart。它写在错误响应中。

您在此处将data 作为回调参数传递给success: function (data)，因此您应该调用data.item_count。

但是 cart/add.js 不返回购物车的 JSON，而是返回添加的产品 JSON。您需要向cart.js 发出第二次请求才能获取购物车对象！

所以你的代码应该是这样的：

$(function(){
  $('.varients-item').on('click', function(){
      var obj = $(this);
      $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data: {
              quantity: 1,
              id: $(this).attr("data-variant")
          },
          dataType: 'json',
          success: function () {  
              $.ajax({
                url: '/cart.js',
                success: function(cart){
                  $('.cart-item-count').html(cart.item_count);
                }
              })
          }
      });
  });
});