General functions for creating AJAX based Shopify Quick carts or cart pages

cart.js

var Cart = (function($, Shopify) {
  var list = '.sproducts';
  var total = '.shoppingbag-total';

  function updateTotal() {
    Shopify.getCart(function(data) { 
      $(total).text(Shopify.formatMoney(data.total_price, '£\{\{amount}}'));
    });
  }
  
  function renderItem(item) {
    var html = '';
    
    // line_item html here
    html += ''+
      '<div class="sproduct cart-list-item" id="'+item.id+'">'+
      	'<div class="sproduct-img">'+
      		'<img src="'+item.image+'" alt="" width="54" height="45" />'+
      	'</div>'+
      	'<div class="sproduct-info">'+
      		'<h5 class="sproduct-title"><a href="">'+item.title.substr(0, item.title.indexOf('-')).trim()+' - '+item.variant_options[0]+'</a></h5>'+
      		'<p class="sproduct-price" data-item-price="'+item.price+'">'+Shopify.formatMoney(item.price, '£\{\{amount}}')+' Each</p>'+
      		'<div class="sproduct-actions">'+
      			'<div class="box">'+
      				'<input name="quantity-field" type="text" class="field field-quantity" data-quantity-updates data-id="'+item.id+'" value="'+item.quantity+'" />'+
      				'<a class="qy-minus" href="#"><i class="icon-minus"></i></a>'+
      				'<a class="qy-plus" href="#"><i class="icon-plus"></i></a>'+
      			'</div>'+
      			'<a href="#" class="delete-sproduct remove-product"><i class="icon-x-gray-small"></i></a>'+
      		'</div>'+
      		'<div data-quantity-total>'+Shopify.formatMoney(item.line_price, '£\{\{amount}}')+'</div>'+
      	'</div>'+
      '</div>'
    ;

    if($(list).length)
      $(list).append(html);
  }

  function removeItemListing(id) {
    var $item = $('#'+id);

    if($item.length) {
      $item.fadeOut().promise().done(function() {
      	$item.remove();
      });
    }
  }
  
  function isInCart(id) {
    var found = false;

    if($('#'+id).length)
      found = true;

    return found;
  }

  function removeItem(id) {
    Shopify.removeItem(id, function() {
      removeItemListing(id);
      updateTotal();
    });
  }
  
  function addItem(item) {
    removeItemListing(item.id);
    renderItem(item);
    updateTotal();
  }

  function updateQuantity(id, value) {
    Shopify.changeItem(id, value, function(data) {
      updateTotal();

      if(value==0)
        removeItemListing(id);
    });
  }
  
  return {
    updateTotal: updateTotal,
    removeItem: removeItem,
    updateQuantity: updateQuantity,
    addItem: addItem,
    isInCart: isInCart,
  }
  
})(jQuery, Shopify);

;(function(document, $, Shopify, Cart) {
  var $doc = $(document);
  
  $(function() {
    
    $('[data-cart-add]').submit(function(e) {
      e.preventDefault();
      var id = $(this).find('[name="id"]').val();
      var quantity = +$(this).find('[name="quantity"]').val();

      Shopify.addItem(id, quantity, function(item) {
        Cart.addItem(item);
        $('.dd-sc .dd-link').trigger('click');
      });
    });

    $doc.on('keyup', '[data-quantity-updates]', function() {
      var id  = $(this).data('id'),
          value = $(this).val();

      if($(this).parents('.cart-list-item').find('[data-quantity-total]').length) {
        var price = $(this).parents('.cart-list-item').find('[data-item-price]').data('item-price');
        $(this).parents('.cart-list-item').find('[data-quantity-total]').text(Shopify.formatMoney(price*value, '£\{\{amount}}'));
      }

      Cart.updateQuantity(id, value);
    });

    $doc.on('click', '[data-remove-product]', function(e) {
      e.preventDefault();
      var id;

      if($(this).parents('.cart-list-item').length) {
        id = $(this).parents('.cart-list-item').attr('id');
      }

      Cart.removeItem(id);
    });
    
  });
  
})(document, jQuery, Shopify, Cart);