Cómo agregar la funcionalidad de filtros con diseño a medida

Una de las funcionalidades más recientes que agregamos a Tiendanube es la posibilidad de contar con filtros dentro de las tiendas, los cuales 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 cliente 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.

Naturalmente, esta nueva funcionalidad tiene impacto sobre la tienda desde lo visual. En este post, te queremos enseñar a incorporar los filtros a una tienda utilizando diseño a medida. ¡A trabajar!

Paso 1

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

Paso 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>

Paso 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

Paso 4

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

 product_filters = 1

Paso 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"

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

¡Eso es todo! Esperamos que esto te sea útil a la hora de diseñar tus tiendas.

Recordá que si sos diseñador, podés registrarte como Socio comercial de Tiendanube y acceder así a una tienda demo para probar cómo realizar estos cambios y muchos otros. Si aún no lo hiciste, registrate ahora.