开发者问题收集

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

2014-10-13
5250
javascript jquery html ajax shopify

我正在 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);
  };

cart.item_count 

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

有什么想法吗？

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);
});
Funk Doc
2014-10-13