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 text-uppercase full-width-xs">
                	<p class="search-suggest-name text-left">
                		{{ product.name | highlight(query) }}
                	</p>
                    {% if product.display_price %}
                    	<p class="hidden-phone text-left weight-strong">
                    		{{ product.price | money }}
                    	</p>
                        {% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
                        {% if product_can_show_installments %}
                            <span class="hidden-phone text-left font-small">
                                {% set max_installments_without_interests = product.get_max_installments(false) %}
                                {% if store.installments_on_steroids_enabled and store.country == 'AR' %}
                                    {% set max_installments_with_interests = product.get_max_installments %}
                                    {% if max_installments_with_interests %}
                                        <div class="m-top-quarter-xs">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                                    {% endif %}
                                {% else %}
                                    {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                                        <div class="m-none">{{ "<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="m-none">{{ "<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 %}
                                {% endif %}
                            </span>
                        {% 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-link search-suggest-link search-suggest-all-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:

{# Search suggestions #}

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();
    }
    if ($(this).val().length == 0) {
        $search_suggests.hide();
    }
}, {
    snipplet: 'search-results.tpl'
});
if ($(window).width() > 768) {
    $("body").click(function () {
        $(".js-search-suggest").hide();
    })
}

$(".js-search-suggest").on("click", ".js-search-suggest-all-link", function (e) {
    e.preventDefault();
    $this_closest_form = $(this).closest(".js-search-suggest").prev(".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 SASS sin variables de colores (es importante que tanto el input de búsqueda como los resultados se encuentren dentro de un mismo contenedor con posición relativa):

.search-suggest{
  position: absolute;
  left: 0;
  z-index: 2000;
  display: none;
  width: 300px;
  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;
  &-list{
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  &-item{
    list-style-type: none;
  }
  &-link{
    position: relative;
    display: block;
    float: left;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    list-style-type: none;
    @include text-decoration-none();
  }
  &-text{
    display: inline-block;
    float: left;
    width: 70%;
  }
  &-image-container{
    width: 40px;
    float: left;
    margin-right: 10px;
    padding-top: 3px;
  }
  &-image{
    max-width: 100%;
    max-height: 45px;
  }
  &-icon{
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -7px;
    width: 20px;
  }
  &-all-link{
    min-height: initial;
    padding: 10px;
    text-align: center;
    text-decoration: underline;
  }
}

@media (max-width: 767px) {
    .search-suggest{
        position: fixed;
        top: 64px;
        z-index: 3000;
        display: none;
        height: 100%;
        width: 100%;
        box-sizing:border-box;
        margin: 0;
        padding-bottom: 1000px;
        overflow-y: scroll;
        &-link{
          padding: 20px 15px;
        }
      }
  }

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

.search-suggest{
    background-color: $main-background;
    &-link,
    &-icon{
        color: rgba($main-foreground, 0.8);
        &:hover,
        &:focus{
            color: rgba($main-foreground, 0.6);
            background-color: darken($main-background, 3%);
        }
    }
    &-all-link{
        background-color: darken($main-background, 3%);
    }
}
@media (max-width: 767px) {
    .mobile-search-backdrop{
        background-color: rgba($main-background, .9);
    }
}

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