jquery - Shopify:动态显示购物车的 item_count

Question

我们在标题中显示了 cart.item_count。这对于大多数页面来说都很好。但在一个页面上，我们动态地将商品添加到购物车，并且希望更改反射(reflect)在标题的购物车摘要中。

我认为我们需要 RivetsJS 才能实现此功能；这样我们就有了一个单向绑定(bind)。我尝试了几种方法:

<span rv-text="cart.item_count"></span>

还有:

{ cart.item_count }

第一个显示为空，第二个显示花括号和 cart.item_count，字面上。

我做错了什么？我需要在某处执行 rivets.bind() 吗？

Answer 1

正如@Ronnie评论的那样，您应该使用 Shopify's Ajax API .

Stack Overflow 上还有很多其他问题和解答，其中包含如何执行此操作的示例，这里仅列出其中的一些:

• Shopify update cart.item_count using AJAX
• Shopify.onItemAdded update #cart and cart.item.count
• If cart item count is three – hide add to cart | shopify

For example :

$.ajax({
    type: 'GET',
    url: 'http://your-store.myshopify.com/cart.json',
    dataType: 'json',
    success: function(data) { 
        var item_count = data.item_count;

        // Update the item count in your header here...
    }
});

您还可以使用 Shopify's jQuery wrapper library 。请参阅Shopify.getCart() :

// ---------------------------------------------------------
// GET cart.js returns the cart in JSON.
// ---------------------------------------------------------
Shopify.getCart = function(callback) {
  jQuery.getJSON('/cart.js', function (cart, textStatus) {
    if ((typeof callback) === 'function') {
      callback(cart);
    }
    else {
      Shopify.onCartUpdate(cart);
    }
  });
};