Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Filtros de produtos

Os filtros são gerados automaticamente, utilizando como referência as categorias e as variações dos produtos cadastrados no Administrador Nuvem.

Esses filtros permitem uma melhor navegação na loja, porque o cliente tem a facilidade de poder filtrar os produtos com base em suas preferências e assim, ver exclusivamente aqueles que estão dentro dos critérios escolhidos.

Essa funcionalidade está disponível para as páginas de categoria.

1. Você deve utilizar três arquivos principais: snipplets/sidebar.tplsnipplets/categories.tpl e snipplets/filters.tpl.

(caso você não tenha os arquivos faça download do código dos temas Nuvem Shop).

2. Edite o arquivo category.tpl adicionando o código:

{% 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. No arquivo settings.txt, insira a configuração correspondente a seção dos menus no admin

 checkbox
        name = product_filters
        description = Mostrar barra lateral com filtros na lista de produtos

4. Coloque também a configuração padrão em defaults.txt.

 product_filters = 1

5. Coloque as traduções correspondentes 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"

6. Coloque os estilos correspondentes via CSS levando em conta o seu layout. Esses são os estilos principais.

 #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 {
   background:#333;
   color:#eee;
}