Tutorial: bootstrap para quickshop

Por: Dannie Karam
Criado em: 01/07/15.
Atualizado em 16/02/18.
5 min
de leitura

Índice

    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"

    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.


      Registre-se gratuitamente

      Receba posts sobre marketing e empreendedorismo diretamente no seu e-mail.

      Coloque o conhecimento na prática

      +15 mil alunos já aplicaram o aprendizado na Universidade e criaram seus negócios com a Nuvemshop.

      Teste 15 dias grátis

      Faça sua marca crescer

      Cria sua loja virtual com a Nuvemshop e venda de maneira profissional como eles:

      Osmoze - www.osmozestore.com.br
      Morango Brasil - morangobrasil.com.br
      Osram - loja.osram.com.br
      Testar 15 dias grátis