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

Acá vas a encontrar:

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.

Recibí nuevos contenidos de Tiendanube directamente en tu email sobre Marketing, Ventas, Gestión y Ecommerce. No pierdas tiempo

Recibí nuevos contenidos sobre marketing, ventas, gestión y ecommerce, directamente en tu email.

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

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

Nuestra respuesta al Coronavirus

Conocé la iniciativa #EstamosJuntos. Todas las acciones que estamos tomando desde Tiendanube para ayudarte a enfrentar esta situación.

Conocer #EstamosJuntos
constru-un-carrito-asincrnico-en-tu-tienda-con-diseo-a-medida