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

Por: Laura Esper

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

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.

Acá vas a encontrar:

Hacé como +90 mil marcas y creá tu Tiendanube

Probar 30 días gratis
Creá tu tienda online en Tiendanube

¿Ya estás listo para vender por internet de manera profesional?

¡Es hora de crear tu tienda online! Con Tiendanube tenés 30 días de prueba gratis.

Crear mi tienda