17/06/2015

Tutorial: filtro de produtos

Filtro

No tutorial de hoje, vamos ensinar como configurar a loja de seus clientes para ter o novo filtro de produtos, funcionalidade nova da Nuvem Shop, 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.

Data da última atualização: 16/02/2018


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.


    • Saulo Padilha

      Isso não é “Filtrar”, isso é “Ordenar”. Seria interessante poder filtrar os produtos listados por outras categorias/taxonomias.

      • nuvemshop

        Olá, Saulo! Como vai?

        Para qualquer dúvida sobre categorização de produtos, indicamos os tutoriais da nossa Central de Atendimento: https://bit.ly/2KvHBWU

        Esperamos ter te auxiliado, até mais 🙂

    tutorial-filtro-de-produtos