Cómo construir un carrito asincrónico en Tienda Nube con diseño a medida

Carrito asincrónico en Tienda Nube

El carrito de compras de una tienda online es el lugar donde un comprador puede ver cuántos y cuáles productos agregó a su orden. Es una página muy importante dentro de un sitio de ecommerce porque es donde se toma una de las decisiones más importantes: la de comprar o no.

En Tienda Nube conocemos la importancia de este momento en el proceso de compra y es por eso que ofrecemos un carrito editable y asincrónico. ¿Qué significa esto? Que luego de haber agregado productos al carrito, el comprador puede 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

Esto no solo mejora la interacción del cliente con la tienda, sino que también mejora la performance de la página.

El carrito no siempre funcionó de esta manera y puede ser que en la tienda sobre la cual estás trabajando no se haya aplicado el cambio. ¡No hay problema! En este post, te contamos cómo agregar este comportamiento a la tienda con diseño a medida.

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

Paso 2

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

Paso 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;
}
…

Paso 4

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

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

¡Listo! Ya tienes tu carrito editable y asincrónico en tu tienda.

Recuerda que si eres diseñador, puedes registrarte como Socio comercial de Tienda Nube y acceder así a una tienda demo para probar cómo realizar estos cambios y muchos otros. Si aún no lo has hecho, regístrate ahora.


¿Te gustó el contenido?


Laura Esper

Laura es Licenciada en Economía de la Universidad de Buenos Aires. Disfruta mucho de viajar, conocer gente nueva y comer cosas ricas. Es muy feliz trabajando como Partners Developer en Tienda Nube.


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!