Tutorial: filtro de produtos

Por: Dannie Karam
Tutorial: filtro de produtos

No tutorial de hoje, vamos ensinar como configurar a loja de seus clientes para ter o novo filtro de produtos, funcionalidade nova da Nuvemshop, que será liberada em etapas para nossos lojistas. Em cinco passos, aproveite para dar continuidade aos tutoriais de filtro de produtos da semana passada e deixa a loja de seu cliente ainda mais otimizada:

1. Copie os três principais snipplets de qualquer tema base: sidebar.tpl, categories.tpl e filters.tpl.

2. Edite o template category.tpl.

{% set show_sidebar = settings.product_filters %}

...

<div class="row">

{% if show_sidebar %}

  {% snipplet 'sidebar.tpl' %}

{% endif %}

<div {% if show_sidebar %}class="span10"{% else %}class="span12"{% endif %} >

... product grid goes here ...

</div>

</div>

3. Adicione as configurações em settings.txt em Menus

checkbox

       name = product_filters

       description = Mostrar barra lateral con filtros en listado de productos

4. Adicione configurações em defaults.txt

product_filters = 1

5. Adicione traduções em translations.txt

es "Tamaño"

pt "Tamanho"

en "Size"

 

es "Color"

pt "Cor"

en "Color"

 

es "Más colores"

pt "Mais cores"

en "More colors"

 

es "Categorías"

pt "Categorias"

en "Categories"

 

es "Mostrar más categorías"

pt "Mostrar mais categorias"

en "Show more categories"

 

es "Mostrar barra lateral con filtros en listado de productos"

pt "Mostrar barra lateral com filtros na lista de produtos"

 

Adicione o estilo CSS de acordo com o seu próprio tema. Veja os principais estilos:

#categories-column #show-more-cats {

   text-align: center;

   display: block;

   border-top: 1px solid #ccc;

   position: relative;

   margin-top: 20px;

   margin-bottom: 40px;

}

#categories-column #show-more-cats i.fa {

   color: #ccc;

   top: -1px;

   position: absolute;

   background: #fff;

   padding: 0 10px 5px 10px;

   left: 38%;

   width: 20px;

   border-left: 1px solid #ccc;

   border-right: 1px solid #ccc;

   border-bottom: 1px solid #ccc;

}

#filters-column .color-filter {

   width: 20px;

   height: 20px;

   border: 1px solid #ccc;

   margin: 0 8px 8px 0;

}

#filters-column .size-filter {

   background: transparent;

   border: 1px solid #999;

   margin: 0 8px 8px 0;

}

#filters-column .other-filter {

   background: transparent;

   width: 100%;

   margin: 0 8px 0 0;

   border: 0;

   text-align: left;

}

.filter-remove {

   background: #eee;

   border: 1px solid #999;

   width: 100%;

   text-align: left;

   position: relative;

   margin: 0 0 10px 0;

   color: #333;

}

.filter-remove:hover {

   border: 1px solid #000;

   color: #000;

}

.filter-remove:after {

   display: inline-block;

   position: absolute;

   right: 10px;

   top: 5px;

   font: normal normal normal 14px/1 FontAwesome;

   font-size: inherit;

   text-rendering: auto;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

   transform: translate(0, 0);

   content: "\f00d";

}

Feito! E se você ainda não é parceiro Nuvem, mas gostaria de atender seus (E NOSSOS) clientes com uma solução de e-commercecadastre-se agora e conheça todos os benefícios.

Faça como +50mil lojas e
crie a sua Nuvemshop

Testar 30 dias grátis
Crie a sua loja na Nuvemshop
O melhor evento de e-commerce para PME’s do Brasil

13 a 15 de julho — online e gratuito

Reserve o seu lugar