Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

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

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.