Shopify：动态显示购物车item_count

Question

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

我想我们需要RivesJS才能工作；所以我们会有一个单向绑定。我尝试了几种方法：

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

和：

{ cart.item_count }

第一个显示为空，第二个显示大括号和cart.item_count。

我做错了什么？我需要在什么地方做铆钉.bind（）吗？

Answer 1

正如@Ronnie所评论的，您应该使用Shopify的Ajax API。

还有很多其他的问题&关于Stack Overflow的答案，以及如何做到这一点的例子，这里只有几个：

• Shopify使用AJAX更新cart.item_count
• Shopify.item添加了更新#cart和cart.item.count
• 如果购物车项目数为三–隐藏添加到购物车|shopify

例如：

$.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的jQuery包装器库。参见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);
    }
  });
};

Answer 2

试试这个：

<strong data-cart-render="item_count"></strong>

并确保你的JS看起来像这样：

   <script type="text/javascript">
     jQuery(function() {
          CartJS.init({{ cart | json }}, {
              "dataAPI": **true**,
              "requestBodyClass": "loading",
              rivetsModels: {
                "customer": {{ customer | json }},
                "product": {{ product | json}},
                "cart" : {{ cart | json }}
              }
          });
     });
  </script>