Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

QuickShop

El “QuickShop” 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.

Incluir el QuickShop con Fancy Box

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.

2. Corroborar que se estén llamando al JS y CSS del fancybox correctamente en layout.tpl. 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 }}

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

4. Incluir el CSS correspondiente con la plantilla.

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

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

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 QuickShop con Bootstrap

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

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

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

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

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

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

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"

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.