Tutorial: bootstrap para quickshop

bootstrap

Quer instalar o quickshop de forma ainda mais rápida na loja de seus clientes? Aproveite este tutorial em sete passos através de um meio responsivo e ágil:

1. Adicione o arquivo quick-shop.tpl dentro das pastas snipplets. Este arquivo é similar à página de produto, mas com pequenas mudanças. Tenha certeza que as classes modelo corretas e configurações estão sendo chamadas no tpl. Abaixo, um exemplo que mostra os divs abertos até a primeira linha de conteúdo.

<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. Garanta que no layout, o Java Script fancybox e o CSS são chamados. Isso faz o modal funcionar.

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

3. Dentro de single_product.tpl, adicione o botão que ativa o pop-up. A localização depende do tema que você está editando.

  {% 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 o respectivo tema CSS (código não está incluso pela variedade de temas). Tenha certeza que o CSS é chamado porque isso se aplica ao modal.

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

5. Inclua as configurações em settings.txt.

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. Adicione os padrões para as categorias em defaults.txt.

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

7. Adicione as traduções em 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"

O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    tutorial-bootstrap-para-quickshop