Construí un carrito asincrónico en tu tienda con diseño a medida

Por: Laura Esper
Creado el 10/07/15.
Actualizado el 14/04/19.
5 min
de lectura

Índice

Carrito asincrónico en Tiendanube

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

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 Tiendanube 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.

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.


    Registrate gratis

    Recibí artículos sobre marketing y emprendedurismo directamente en tu email.

    Es hora de pasar a la acción

    +15 mil alumnos de la Universidad ya potenciaron sus negocios con Tiendanube.

    Probá 15 días gratis

    Vos también podés hacer crecer tu negocio

    Creá tu tienda online con Tiendanube y como ellos, vendé de manera profesional.

    Honky Tonk - www.honkytonkshop.com
    Unibow - www.unibow.com.ar
    Zaira - www.zairabeauty.com.ar
    Probar 15 días gratis
    constru-un-carrito-asincrnico-en-tu-tienda-con-diseo-a-medida