Simple Ajax cart example for Bootic shops

simple_bootic_ajax_cart.htm

<style>
 #carrito {
   padding: 1em;
   background: #eef8df;
   color: black;
   border: solid gray 1px;
   margin-bottom: 1em;
 }
 #carrito ul {
   margin-left: 2em; 
 }
</style>
<!-- Include Bootic Cart libary -->
{{ 'http://js.bootic.net/cart/0.0/bootic_cart.min.js' | javascript_tag }}

<!-- HTML template for advanced cart with detailed items, applied promotions and totals -->
<script type="text/html" data-template="cart">
  <!-- muestra unidades -->
  <h3>%{ units } productos en el carro</h3>
  
  %{hasProducts}
    <!-- muestra products -->
    <ul class="items" id="cart_items">
      %{products}
        <li id="citem_%{ id }">
          <h4>%{ model } - %{ variant_title }</h4>
          <small>(%{ quantity } unidades): %{ formatted_price }</small>
          
          <!-- botón "remover" -->
          <button class="remove" data-remove="%{ variant_id }">remover</button>
        </li>
      %{/products}
    </ul>
    
    <!-- muestra total -->
    <p class="total">Total: %{ formatted_total }</p>
  
    <!-- Checkout button. Send cart to checkout section. -->
    <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}
</script>

<!-- Bind cart events to template effects and behaviours -->
<script type="application/javascript">
Bootic.Cart.bind('updated', function () {
  // Puebla la plantilla 'cart' con los datos del carro
  // e insértala dentro del elemento '#carrito'
  $('#carrito').booticTemplateRender('cart', Bootic.Cart)
})

$(function () {
  // Carga el carrito.
  Bootic.Cart.load()

  // Activa botones Ajax
  $.Bootic.ajaxButtons()
  
  // Botones para remover del carrito Ajax
  // Ejecuta esta función cada vez que un botón con attribute "data-remove" sea presionado.
  $('#carrito').on('click', 'button[data-remove]', function () {
    // Obten la ID de la variante de producto
    var variantId = $(this).data('remove');
    // Pasa la ID de variante al método `remove`
    Bootic.Cart.remove(variantId)
    
    return false;
  })
})
</script>