Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Sugestão de busca

A sugestão de busca é uma funcionalidade que pode ajudar muito os clientes a encontrarem o que estão procurando.

Basicamente, exibe até 6 produtos de acordo com o que é escrito no campo de busca.

Para ter a possibilidade de exibir sugestões na pesquisa, é preciso seguir os passos indicados - os quais estão baseados no layout Lifestyle, mas você pode fazer variações relacionadas a nomes e localização de arquivos se utilizar outro modelo.

1Criar um tpl chamado "search-results.tpl" e inseri-lo dentro da pasta "snipplets". Ele deve seguir a estrutura abaixo:

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

2Depois disso, é preciso adicionar o Javascript correspondente a essa funcionalidade dentro do arquivo "layout.tpl", ou no que está referenciando seu JS. O código a ser usado é o seguinte:

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. Adicione as seguintes traduções ao arquivo config/translations.txt:

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

4Inclua a classe de CSS "js-search-input" com base na entrada que você quer relacionar às sugestões de busca.

Depois, adicione a classe CSS "js-search-container" ao container da entrada mencionada anteriormente.

5. A caixa com a classe CSS “js-search-container” deve incluir ao formulário que vai realizar a busca. Vamos adicionar a classe “js-search-form” nesse formulário. Com isso, teremos o seguinte resultado:

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

Adicione um div vazio com as classes de CSS "js-search-suggest search-suggest". É muito importante que ele esteja logo abaixo do div "js-search-container", ou seja, devem ser "irmãos diretos" e estar na ordem indicada:

<div class="js-search-container">
    <input class="js-search-input">
</div>
<div class="js-search-suggest search-suggest">
   
</div>

6. Por fim, falta apenas adicionar as regras de CSS em qualquer folha CSS do layout.

Confira estilos para a folha SASS sem as cores (é importante que tanto a entrada de busca quanto os resultados estejam dentro de um mesmo container com posição 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;
        }
      }
  }

Há também estilos para a folha SASS com as cores (suas variáveis se aplicam apenas ao modelo Lifestyle):

.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);
    }
}