Carrito de compras editable

El carrito asincrónco le permite al comprador modificar las cantidades que quiere comprar del producto (o eliminar productos directamente) sin que la página vuelva a cargar, simplemente se actualizan las cantidades.

Básicamente, lo que permite es un comportamiento como el que se ve en la siguiente imagen:

Carrito de compras asincrónico en Tienda Nube

1. En layout.tpl se debe reemplazar un código js con otro.
Para esto, deberás eliminar este código:

{% if template == 'cart' %}
<script type="text/javascript">
    $(document).ready(function(){
         $(".col-quantity input").keypress(function(){
            $('#change-quantities').show();
            $("#go-to-checkout").hide();
        });
    });
</script>
{% endif %}

Y reemplazarlo con el siguiente:

{% if template == 'cart' %}
{{ 'js/jquery.livequery.min.js' | static_url | script_tag }}
<script type="text/javascript">
    $(document).ready(function(){
        // Key pressed in quantity input
        $(".col-quantity input").keypress(function(e){
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }
        });
        ...
    });
</script>
{% endif %}

2. Personalizar templates/cart.tpl correspondientemente dependiendo del diseño que se esté utilizando.

3. Agregar los estilos en el CSS. Si estuviéramos trabajando con LinkedMan, agregaríamos lo siguiente:

/* --- Shopping Cart --- */
button.item-plus {
    margin-top: -5px;
}
button.item-plus, button.item-minus {
    display: block;
    font-size: 11pt !important;
    background: transparent;
    border: 0;
}
button.item-delete {
    display: block;
    font-size: 22pt !important;
    background: transparent;
    border: 0;
}
button.item-plus i.fa, button.item-minus i.fa {
    color: rgba(0, 0, 0, 0.1);
}
button.item-plus i.fa:hover, button.item-minus i.fa:hover {
    color: #434343;
}
…

4. Agregar jquery.livequery.min.js dentro de /static/js.

5. Corroborar que exista el plugin ”Font Awesome” en layout.tpl.

{{ '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' | css_tag }}