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.

Ganhe tempo e receba conteúdos da Nuvemshop no seu e-mail Ganhe tempo

Receba semanalmente uma curadoria dos melhores conteúdos sobre Marketing, Vendas, Gestão e E-commerce diretamente no seu e-mail.

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

Testar 30 dias grátis
Crie a sua loja na Nuvemshop

Nossa resposta ao Coronavírus

Conheça a iniciativa #TamoJunto. Todas as ações que estamos criando aqui na Nuvemshop para te ajudar neste momento.

Conhecer a #TamoJunto