Cómo incluir variantes de productos en el Quick Shop con diseño a medida

Quick shop en Tienda Nube

El “Quick shop” es una funcionalidad que permite que un producto cualquiera se agregue al carrito desde una página distinta a la página de producto. Esto hace que el proceso de compra sea más corto y disminuye la cantidad de “clicks” que se necesitan para comenzar con la compra del producto.

Desde Tienda Nube ofrecemos esta funcionalidad para que todos aquellos dueños de tiendas que quieran usarlo puedan hacerlo. Además, como parte de una serie de mejoras que hicimos sobre nuestras plantillas, ahora también es posible elegir variante y cantidades antes de agregar el producto al carrito, tal como se ve en la siguiente imagen:

Si la tienda sobre la que estás trabajando aún no tiene estas mejoras, en este post te enseñamos cómo implementarlas, tanto utilizando un Fancy Box como con Boostrap. ¡Sigue leyendo!

Incluir el Quick Shop con Fancy Box

Paso 1

Agregar el archivo quick-shop.tpl dentro de la carpeta de snipplets. Este archivo es muy parecido a la página de producto pero con algunos cambios.

Paso 2

Corroborar que se estén llamando al JS y CSS del fancybox correctamente en el layout. Esto es lo que hace que la ventana modal funcione.

{{ 'fancybox/jquery.fancybox.css' | static_url | css_tag }}
{{ 'fancybox/jquery.fancybox.pack.js' | static_url | script_tag }}

{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js' | script_tag }}

Paso 3

Dentro de single_product.tpl, agregar el botón que dispara el pop up. Su ubicación dependerá del diseño que se esté utilizando.

     {% if settings.quick_shop %}
                <a class="product-details-overlay fancybox" href="#quick{{ product.id }}">
                    <span>{{ settings.quick_shop_label }}</span>
                </a>
                {% snipplet "quick-shop.tpl" %}
        {% endif %}

Paso 4

Incluir el CSS correspondiente con la plantilla.

Paso 5

Incluir las configuraciones dentro del archivo settings.txt. Esto es lo que permitirá que el quick shop se active o se desactive desde el administrador de la tienda.

checkbox
		name = quick_shop
		description = Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde una ventana emergente en el listado de productos
	i18n_input
		name = quick_shop_label
		description = Texto que aparece al colocar el mouse sobre un producto que dispara la ventana emergente

Paso 6

Agregar los valores por default para el label en defaults.txt. Este es el texto que se mostrará en la tienda.

quick_shop_label_es = Vista rápida
quick_shop_label_en = Quick view
quick_shop_label_pt = Quick view

Paso 7

Agregar las traducciones en translations.txt. Este es el texto explicativo para el dueño de la tienda.

es "Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde una ventana emergente en el listado de productos"
pt "Permitir que seus clientes possam agregar produtos ao seu carrinho rapidamente a partir de um pop-up na lista de produtos"

Incluir un quick shop con Boostrap

Paso 1

Agregar el archivo quick-shop.tpl dentro de la carpeta de snipplets. Este archivo es similar a la página de producto pero con pequeños cambios. Es importante asegurarse de que se están utilizando las configuraciones y el modelo de clases correcto en la plantilla.

Debajo hay un ejemplo que muestra los divs que abren hasta la primer fila de contenido:

<div class="modal fade quickshop" id="quick{{ product.id }}" tabindex="-1" role="dialog" q-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-body">
                <div class="quick-content" data-product="{{product.id}}">
                    <div class="productContainer" itemscope itemtype="http://schema.org/Product" data-variants="{{product.variants_object | json_encode }}">
                        <div class="row">

Paso 2

Corroborar que se estén llamando al JS y al CSS del fancybox en el layout. Esto es lo que hace que funcione el modal.

{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js' | script_tag }}

Paso 3

Agregar el botón que dispara el pop up dentro de single_product.tpl. Su ubicación dependerá de la plantilla que se esté utilizando.

        {% if settings.quick_shop %}
            <div class="product-details-overlay">
                <a class="hidden-xs hidden-sm" data-toggle="modal"
                   data-target="#quick{{ product.id }}" href="#">
                    {{ settings.quick_shop_label }}
                </a>
            </div>
            {% snipplet "quick-shop.tpl" %}
        {% endif %}

Paso 4

Incluir el CSS correspondiente. Corroborar que se esté llamando al CSS de Bootstrap que se aplica al modal.

{{ '//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' | css_tag }}

Paso 5

Incluir las configuraciones dentro del archivo settings.txt. Esto es lo que permitirá que el dueño de la tienda habilite o deshabilite la funcionalidad desde el administrador.

checkbox
		name = quick_shop
		description = Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde una ventana emergente en el listado de productos
	i18n_input
		name = quick_shop_label
		description = Texto que aparece al colocar el mouse sobre un producto que dispara la ventana emergente

Paso 6

Agregar los valores por default para el label en defaults.txt. Este es el texto que se mostrará en la tienda.

quick_shop_label_es = Vista rápida
quick_shop_label_en = Quick view
quick_shop_label_pt = Quick view

Paso 7

Agregar las traducciones en translations.txt.

es "Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde una ventana emergente en el listado de productos"
pt "Permitir que seus clientes possam agregar produtos ao seu carrinho rapidamente a partir de um pop-up na lista de produtos"

Ahora sí, ya tienes el Quick Shop con toda la información necesaria para empezar a vender.

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!