javascript - Shopify.onItemAdded 更新#cart 和 cart.item.count

Question

我正在尝试在 Shopify 中制作一个 ajaxed 购物车。我已使产品页面将商品添加到购物车，而无需刷新或转到购物车页面。要查看购物车，您可以单击输入或带有 .cart-show 的链接，因此我将其添加到“添加到购物车”输入中:

<input style="margin-top: 40px; width: 50%;" type="submit" value="Add to cart" class="button cart-show" onclick=" Shopify.addItemFromForm('add-item-form'); return false" />

它的作用就是简单地将商品添加到购物车并显示购物车 div #menu。当然，添加新商品时购物车不会更新，问题是:我该怎么做？ 如何使购物车 div #cart 在每次单击输入时更新？当添加新产品时，如何更新 div #cart-total-items 中的 cart.item_count？ 我已经用了一天多的时间来解决这个问题，但仍然没有任何进展。我什至尝试过在 Shopify 论坛上提问，但它根本就死了，没有任何帮助可以到达那里。

添加新商品时的“Shopify.onItemAdded”脚本如下:

 Shopify.onItemAdded = function(line_item) {
    Shopify.getCart();

    refresh #menu script here

    refresh cart.item.count script  in theme.liquid could be something like this, but it doesn't work: 

    $('#cart-total-items').update(cart.item_count);
  };

购物车.item_count

<span style="" id="cart-total-items"><a class="cart-show">Bag ({{ cart.item_count }})</a></span>

有什么想法吗？

Answer 1

这可能不完全是您所需要的，但可能会有所帮助。我在我为其开发的 Shopify 网站上制作并实现了 ajax 购物车。我使用 jquery 和 JSON 来做这类事情，这就是我所做的:

jQuery.getJSON('/cart.js', function (cart, textStatus) {
  //the cart info is in the callback. the item_count is available as part of the callback
  //below I set my cartcount div with the current cart item_count
  var carttext=cart.item_count;
  jQuery("#cartcount").text(carttext);
});