Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Filtros de productos

Los filtros  se generan automáticamente tomando como referencia las categorías y las variantes de los productos.
Estos filtros permiten una mejor navegación de la tienda porque el usuario tiene la facilidad de poder filtrar los productos en base a sus preferencias y ver únicamente aquellos que estén dentro de los criterios elegidos.

1. Copiar los tres snipplets principales de cualquiera de las plantillas base: snipplets/sidebar.tpl, snipplets/categories.tpl y snipplets/filters.tpl.

2. Editar el archivo category.tpl agregando lo siguiente:

{% 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. En el archivo settings.txt, agregar la configuración correspondiente en la sección Menues.

 checkbox
        name = product_filters
        description = Mostrar barra lateral con filtros en listado de productos

4. Agregar también la configuración por default en defaults.txt.

 product_filters = 1

5. Agregar las traducciones correspondientes en 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. Aplicar los estilos correspondientes vía CSS teniendo en cuenta la propia plantilla. Estos son los estilos principales:

 #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 {

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.