Full working Ajax cart for Bootic shops, viewable on http://simplelist.bootic.net

bootic_full_cart_template.html

{{ 'http://js.bootic.net/cart/0.0/bootic_cart.min.js' | javascript_tag }}

<script type="text/html" data-template="cart">
  <small class="loading">cargando&hellip;</small>
  <h3>
    <a href="#cart_detail" data-behaviour="toggle">{{ 'titles.cart' | t }} (%{ units })</a> 
    <span class="mobile_only">%{ formatted_total }</span>
  </h3>
  <div id="cart_detail" class="desktop_only">
    %{hasProducts}
    <ul class="items" id="cart_items">
       %{products}
       <li id="citem_%{ id }" class="clearfix" title="(%{ variant_title }) %{ model }">
         <input type="text" class="units left" value="%{ quantity }" size="2" name="quantity" data-update="%{ variant_id }" data-behaviour="numberInputs" />
         <h4 class="left">(%{ variant_title }) %{ model }</h4>  
         <strong class="price right">%{ formatted_price }</strong>
         <a href="#" class="remove" data-remove="%{ variant_id }" title="{{ 'js_cart.title_remove' | t }}">-</a>
         %{unavailable}
         <span class="unavailable_notice">{{ 'js_cart.unavailable' | t }}</span>
         %{/unavailable}
       </li>
       %{/products}
    </ul>
    
    %{hasPromotion}
    <div class="promo">
      <div class="clearfix">
        <span class="left">{{ 'js_cart.discount' | t }} "%{ promotion.name}"</span>
        %{validPromotion}
         <strong class="right">- %{promotion.formatted_discount_total}</strong>
        %{/validPromotion}
      </div>
      
      %{validPromotion}
        %{promotion.free_shipping}
        <p class="free_shipping">
          {{ 'js_cart.free_shipping' | t }}
        </p>
        %{/promotion.free_shipping}
      %{/validPromotion}
      
      %{invalidPromotion}
        <div class="invalid_promo">
          <h5>{{ 'js_cart.non_applicable' | t }}:</h5>
          <ul class="promo_errors">
           %{promotion.errors}
            <li>%{error}</li> 
           %{/promotion.errors}
          </ul> 
        </div>
      %{/invalidPromotion}
    </div>
    
    %{/hasPromotion}

    <div class="totals clearfix">
      <span class="left">Subtotal:</span> 
      <strong class="right">
        %{validPromotion}
        <strike>%{formatted_net_total}</strike>
        %{/validPromotion}
        %{ formatted_total }
      </strong>
    </div>
    
    <form action="/cart" method="post">
      <input type="hidden" name="_method" value="put" />
      <input type="submit" name="cart_action" class="checkout bootic_button" value="{{ 'js_cart.purchase' | t }} »" />
    </form>
    %{/hasProducts}
    %{isEmpty}
    <p class="no_items">
       {{ 'js_cart.empty_cart' | t }}.
    </p>
    %{/isEmpty}
  </div>
</script>

<script type="application/javascript">
// Bootic Ajax cart widget
// This function gets passed an instance of the Bootic.Cart class
// https://github.com/bootic/bootic_cart
// Ismael Celis 2012 for Bootic.net
// -----------------------------------------------------*/
;(function ($, cart, cartSelector) {
  
  function loading () {
    $('.loading', cartSelector).show()  
  }
  
  // Listen to cart events
  cart
    .bind('loading', loading)
    .bind('adding', loading)
    .bind('removing', loading)
    .bind('updated', function () {
      
      $(cartSelector).booticTemplateRender('cart', cart)
      $('.loading', cartSelector).fadeOut()
      $(cartSelector).slideDown('fast')
    })
    .bind('removing', function (evt, item) {
      $('#citem_'+item.product_id, cartSelector).remove()
    })
    .bind('error', function (evt, error) {
      throw error
    })
  
  /* On DOM ready
  ------------------------------*/
  $(function (){
    // Load the cart
    cart.load()
    // Remove-from-cart links
    $(cartSelector).on('click', 'a[data-remove]', function () {
      Bootic.Cart.remove($(this).data('remove'))    
      return false;
    })
    
    // Update quantities
    $(cartSelector).on('blur submit.bootic', 'li input[data-update]', function () {
      var $e = $(this),
          fieldName = $e.attr('name'),
          value = $e.val(),
          variantId = $e.data('update'),
          opts = {};
       
      opts[fieldName] = value;
      cart.add(variantId, null, opts)
    })
    
  })
    
})(jQuery, Bootic.Cart, 'div#ajax_cart')

</script>