Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Barra de categorías lateral en la home

Esta barra de categorías es similar a la funcionalidad de Filtros en las páginas de productos, solo que se encuentra visible únicamente en la home de la tienda. Dependiendo de la plantilla elegida, la barra puede ubicarse a la izquierda del slider o por debajo de él, a un lado de los productos destacados.

Para agregar la funcionalidad a un diseño que no lo tiene, se deberán seguir los siguientes pasos:

1. Agregar un nuevo snipplet llamado sidebar-home.tpl dentro de la carpeta snipplets. Este archivo de extension .tpl debe contener el siguiente código:


<div id="categories-column" class="pull-left hidden-phone sidebar-home">
     <h4 class="cat-title">{{ "Categorías principales" | translate }}</h4>
    <div class="sidebar">
        <ul id="categories-list" class="home-categories-list pull-left clear">
            {% for category in categories %}
                <li data-item="{{ loop.index }}" class="pull-left clear no-subcategory">
                    <a href="{{ category.url }}" title="{{ category.name }}">{{ category.name }}</a>
                </li>
            {% endfor %}
        </ul>
         <a href="#" id="show-more-cats" style="display: none;" title="{{ 'Mostrar más categorías' | translate }}"><i class="fa fa-angle-down"></i></a>
    </div>
</div>

2. Agregar el siguiente javascript dentro de layout.tpl donde se encuentra el resto del código javascript del sitio, previo a cerrar el tag <body>  (Ejemplo del JS abajo del theme New Linked Woman).

{% if template == 'home' %}
    <script type="text/javascript">
    var categoriesList = $("#categories-list li");
    if (categoriesList.length < 6) {
        $("#categories-column.sidebar-home").addClass("short-bar");
    }
    if (categoriesList.length > 11) {
        $("#show-more-cats").show(); 
        for (i = 11; i < categoriesList.length; i++) { 
            $(categoriesList[i]).hide();
        }
    }

    $("#show-more-cats").click(function(e){
        e.preventDefault();
        for (i = 11; i < categoriesList.length; i++) { 
            $(categoriesList[i]).toggle();
        }
        $(this).find("i").toggleClass("fa-angle-up fa-angle-down");
    });
    </script>
{% endif %}

3. Agregar el llamado al snipplet sidebar-home.tpl en home.tpl (la ubicación puede variar según la plantilla, puede ir a un lado del slider o debajo de él).  

Ejemplo en el theme Tech.

<div class="home-container">
    {% if categories %}
        <div class="col-md-2 left-col hidden-phone">
            {% snipplet 'sidebar-home.tpl' %}
        </div>
    {% endif %}
    <div class="{% if categories %}col-md-10 {% else %}col-md-12 no-categories{% endif %} col-xs-12 right-col">
         {% if settings.slider %}
            <div class="slider-container">
                <i class="fa fa-cog fa-spin"></i>
                <ul class="homeslider bxslider">
                    {% for slide in settings.slider %}
                        {% set slide_img = slide.image | static_url %}
                        {% set slide_link = slide.link %}
                        {% if slide.link is empty %}
                            <li><img src="{{ slide_img }}" style="visibility: hidden;"/></li>
                        {% else %}
                            <li><a href="http://{{ slide_link }}"><img src="{{ slide_img }}" style="visibility: hidden;" /></a></li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        ....
</div>

Ejemplo en el theme New Linked Woman.

{% if sections.primary.products %}
<div class="row-fluid home-prods">
     {% if categories %}
        <div class="span2 left-col">
            {% snipplet 'sidebar-home.tpl' %}
        </div>
    {% endif %}

    <div class="{% if categories %}span10 {% else %}span12 {% endif %}home-grid right-col">
        {% for product in sections.primary.products %}
            {% if loop.index % 4 == 1 %}
            <div class="product-row">
            {% endif %}

            {% include 'snipplets/single_product.tpl' %}

            {% if loop.index % 4 == 0 or loop.last %}
                </div>
            {% endif %}
        {% else %}
        ....
</div>

4. Agregar el CSS pertinente a cada theme (esto puede variar en base al estilo de cada plantilla).

Ejemplo en Tech.

.home-container .right-col{
    margin-top: 20px;
}
.home-container .left-col{
    padding-right: 5px;
}

#categories-column.sidebar-home{
    width: 100%;
    padding: 10px;
    min-height: 448px;
    margin-bottom: 30px;
}
#categories-column.sidebar-home.short-bar{
    min-height: 327px;    
}
.sidebar h4{
    padding-bottom: 10px;
}
#categories-column.sidebar-home h4{
    font-weight: normal;
    padding: 10px;
    margin: -10px -10px 10px -10px;
}
#categories-column .home-categories-list a{
    font-size: 14px;
}
.sidebar ul li{
    list-style: none;
}
#categories-column.sidebar-home #show-more-cats{
    float: left;
    width: 100%;
    margin-bottom: 0px;
    height: 30px;
}

Ejemplo en New Linked Woman.

.home-prods .left-col{
    padding-right: 5px;
}
.sidebar-home{
    width: 100%;
    padding: 10px;
    min-height: 449px;
}

#categories-column .home-categories-list a{
    font-size: 14px;
}
.sidebar ul li{
    list-style: none;
}
#categories-column.sidebar-home #show-more-cats{
    float: left;
    width: 80%;
    margin-bottom: 0px;
    height: 30px;
}

5. Agregar las traducciones correspondientes en translations.txt. (Pueden ubicarse en cualquier parte del archivo).

es "Categorías principales"
pt "Categorias principais"
en "Main categories"

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.