Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Sugerencias en la búsqueda

La sugerencia de búsqueda es una funcionalidad que puede ayudar mucho a los clientes a encontrar lo que están buscando.

Básicamente consiste en mostrarle hasta 6 sugerencias de productos, basado en lo que se escribe en el campo de búsqueda.

Para tener la posibilidad de mostrar sugerencias en la búsqueda hay que seguir los siguientes pasos (estos pasos están basados en la plantilla Lifestyle y puede haber algunas variaciones con respecto a nombres de archivos y ubicación de los mismos en referencia a otras plantillas):

1. Crear un tpl llamado search-results.tpl y ubicarlo dentro de la carpeta snipplets. El tpl debe ser el siguiente:

<ul class="search-suggest_list">
    {% for product in products %}
        <li class="search-suggest_item">
            <a href="{{ product.url }}" class="search-suggest_link">
                <div class="search-suggest_image-container hidden-phone">
                    {{ product.featured_image | product_image_url("tiny") | img_tag(product.featured_image.alt, {class: 'search-suggest_image'}) }}
                </div>
                <div class="search-suggest_text">
                    <p class="search-suggest_product-name">
                        {{ product.name | highlight(query) }}
                    </p>
                    {% if product.display_price %}
                        <p class="search-suggest_price hidden-phone">
                            {{ product.price | money }}
                        </p>
                        {% if product.show_installments %}
                            <div class="search-suggest_installments hidden-phone">
                                {% set max_installments_without_interests = product.get_max_installments(false) %}
                                {% if max_installments_without_interests %}
                                    <div class="max_installments">{{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
                                {% else %}
                                    {% set max_installments_with_interests = product.get_max_installments %}
                                    {% if max_installments_with_interests %}
                                        <div class="max_installments">{{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                                    {% endif %}
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
                <i class="search-suggest_icon fa fa-chevron-right hidden-phone"></i>
            </a>
        </li>
    {% endfor %}
    <li class="search-suggest_item hidden-phone">
        <a href="#" class="js-search-suggest_all-results-link search-suggest_link search-suggest_all-results-link">{{ 'Ver todos los resultados' | translate }}</a>
    </li>
</ul>

2. Una vez agregado el tpl anterior, necesitás agregar el Javascript correspondiente a este funcionalidad dentro del archivo layout.tpl o el archivo donde estés llamando a tu JS. El código que debes usar es el siguiente:

LS.search($(".js-search-input"), function(html, count){
        $search_suggests = $(this).closest(".js-search-container").next(".js-search-suggest");
        if(count > 0){
            $search_suggests.html(html).show();
        }else{
            $search_suggests.hide();
        }
    }, {
        snipplet: 'search-results.tpl'
    });
    $("body").click(function() {
        $(".js-search-suggest").hide();
    })
    $(".js-search-suggest").on("click", ".js-search-suggest_all-results-link", function(e){
        e.preventDefault();
        $this_closest_form = $(this).closest(".js-search-suggest").prev(".js-search-container").find(".js-search-form");
        $this_closest_form.submit();
});

3. Tenés que agregar la clase de CSS "js-search-input" al input en base al cual querés que aparezcan las sugerencias de búsqueda. 

Luego agregá la clase de CSS "js-search-container" al contenedor del input mencionado anteriormente.

4. El contenedor con la clase CSS "js-search-container" debe englobar al formulario que va a efectuar la búsqueda,  al cual le agregaremos la clase de CSS "js-search-form". Quedando de la siguiente forma:

<div class="js-search-container">
    <form action="{{ store.search_url }}" method="get" class="js-search-form">
        <input class="js-search-input" autocomplete="off" type="search" name="q" placeholder="{{ 'buscar' | translate }}"/>
        <input class="submit-button" type="submit" value=""/>
    </form>
</div>

Por último, necesitás agregar un div vacío con las clases de CSS "js-search-suggest search-suggest". Es muy importante que este div se encuentre justo debajo del div "js-search-container", es decir, que deben ser hermanos directos y el orden entre ambos debería quedar así:

<div class="js-search-container">
    <form action="{{ store.search_url }}" method="get" class="js-search-form">
        <input class="js-search-input" autocomplete="off" type="search" name="q" placeholder="{{ 'buscar' | translate }}"/>
        <input class="submit-button" type="submit" value=""/>
    </form>
</div>
<div class="js-search-suggest search-suggest">
</div>

5. Agregar las siguientes traducciónes en el archivo config/translations.txt:

es "Ver todos los resultados"
pt "Ver todos os resultados" 
en "See all results"

6. Por último, solo queda agregar las reglas de CSS, las cuales pueden incluirse en cualquier hoja de CSS de la plantilla. 

Estilos para la hoja de CSS normal (es importante que tanto el input de búsqueda como los resultados se encuentren dentro de un mismo contenedor con posición relativa):

/* Search suggestions */
.search-suggest{
    position: absolute;
    top: 32px;
    left: 0;
    z-index: 1000;
    display: none;
    width: 400px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -webkit-overflow-scrolling: touch;
}
.search-suggest_list{
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}
.search-suggest_item{
    list-style-type: none;
}
.search-suggest_link{
    position: relative;
    display: block;
    float: left;
    min-height: 60px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    list-style-type: none;
}
.search-suggest_link:hover,
.search-sugget_link:focus{
    text-decoration: none;
}
.search-suggest_all-results-link{
    min-height: initial;
    padding: 10px;
    text-align: center;
    text-decoration: underline;
}
.search-suggest_all-results-link:hover{
    text-decoration: underline;
}
.search-suggest_text{
    display: inline-block;
    float: left;
    width: 70%;
}
.search-suggest_product-name,
.search-suggest_price,
.search-suggest_installments{
    text-align: left;
}
.search-suggest_installments .max_installments{
    padding: 0;
    font-size: 11px;
}
.search-suggest_image-container{
    width: 40px;
    float: left;
    margin-right: 10px;
    padding-top: 3px;
}
.search-suggest_image{
    max-width: 100%;
    max-height: 45px;
}
.search-suggest_icon{
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;  
    width: 30px;
    text-align: right;
}
@media (max-width: 767px){
    /* Search Suggestions */
    .search-suggest{
        top: 39px;
        width: 100%;
    }
    .search-suggest_link{
        padding: 10px;
        font-size: 14px;
        min-height: initial;
    }
    .search-suggest_text{
        width: 100%;
    }
}

Estilos para la hoja de SASS (estos estilos tienen variables que solo aplican en la plantilla Lifestyle):

/* Search suggestions */
.search-suggest{
    background-color: $back;
}
.search-suggest_link,
i.search-suggest_icon{
    color: rgba($txt, 0.8);
}
.search-suggest_product-name strong{
    color: $txt;
}
.search-suggest_link:hover,
.search-sugget_link:focus{
    color: rgba($txt, 0.6);
    background-color: darken($back, 3%);
}
.search-suggest_all-results-link{
    background-color: darken($back, 3%);
}
.search-suggest_text{
    font-family: $fontheadprod;
}
.search-suggest_price{
    color: $primary;
    font-weight: bold;
}

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