Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

QuickShop

O QuickShop é uma funcionalidade que permite que um produto qualquer seja adicionado ao carrinho a partir de uma página qualquer, sem que seja preciso entrar na página do produto. Isso faz com que o processo de compra seja mais curto e que a quantidade de clicks seja pequena.

Veja um exemplo da funcionalidade abaixo:

Incluir o QuickShop com Fancy Box

1. Adicione o arquivo quick-shop.tpl dentro da pasta de snipplets. Esse arquivo é muito parecido com o do produtos, mas tem algumas modificações.

(caso você não tenha os arquivos faça download do código dos temas Nuvem Shop).

2. Certifique-se se todos os arquicos JavaScript e CSS do fancybox estão inseridos no arquivo layouts/layout.tpl. Isso faz com que a janela 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 }}

Caso os arquivos do fancybox não estejam no sem template, faça o download deles e coloque dentro das pastas correspondentes: static/css e static/js

3. Dentro do arquivo snipplets/single_product.tpl, adicione o botão que abre a janela modal. Sua localização dependerá do layout que você 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. Inclua um CSS correspondente ao seu layout.

Quer se insirar? Veja os exemplos na loja de Layouts Nuvem.

5. Inclua dentro do arquivo config/settings.txt. Isto permitirá que o QuickShop possa ser ativado e desativado pelo Administrador Nuvem

checkbox
    name = quick_shop
    description = Permitir que os clientes possam adicionar produtos ao carrinho rapidamente a partir de uma listagem de produtos.
    i18n_input
        name = quick_shop_label
        description = Texto que aparece al colocar el mouse sobre un producto que dispara la ventana emergente

6. Adicione os valores padrão para os labels em config/defaults.txt. Esses são os textos que serão mostrados na loja.

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

7. Adicione as traduções ao arquivo config/translations.txt. Esse é o texto explicativo para o logista.

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. Adicione o arquivo quick-shop.tpl dentro da pasta de snipplets. Esse arquivo é muito parecido com o do produtos, mas tem algumas modificações.

(caso você não tenha os arquivos faça download do código dos temas Nuvem Shop).

Atenção: É importante se assugurar que está utilizando as configurações e o modelo correto de classes do layout.

Abaixo há um exemplo que mostra os divs referentes ao componente modal do bootstrap:

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

Saiba mais detalhes sobre como utilizar os modais do bootstrap. 

2. Certifique-se se todos os arquicos JavaScript e CSS do bootstrap estão inseridos no arquivo layouts/layout.tpl. Isso faz com que a janela modal funcione.

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

3. Dentro do arquivo snipplets/single_product.tpl, adicione o botão que abre a janela modal. Sua localização dependerá do layout que você 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. Inclua dentro do arquivo config/settings.txt. Isto permitirá que o QuickShop possa ser ativado e desativado pelo Administrador Nuvem.

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

5. Adicione os valores padrão para os labels em config/defaults.txt. Esses são os textos que serão mostrados na loja.

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

7.  Adicione as traduções ao arquivo config/translations.txt. Esse é o texto explicativo para o logista.

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"