I'm trying to make a ajaxed shopping cart in Shopify. I have made the product page add an item to cart without refreshing or going to the cart page. To see cart, you can click on an input or link with .cart-show, so I added this to the 'add to cart' input:
<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" />
What that does, is simply add the item to cart and display the cart div #menu. Of course cart doesn't get updated when a new item is added, and the question is: how can I do this? How can I make the cart div #cart update each time the input is clicked? And how do I update the cart.item_count in the div #cart-total-items when a new product is added? I've used more than a day to figure this out and still haven't gotten anywhere. I have even tried asking on the Shopify Forum, but it is simply dead and no help to get over there.
The 'Shopify.onItemAdded' script for when an new item is added is as follows:
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>
Any ideas?