Shopify.onItemAdded update #cart and cart.item.count

Question

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?

Answer 1

This might not be exactly what you need but it may help. I have made and implemented an ajax cart on a shopify site I develop for. I use jquery & JSON to do this type of stuff and here's what I do:

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);
});