Previsão de pesquisa automática

Esta funcionalidade destina-se a acelerar as interações de pesquisa do cliente, tentando prever que produto o cliente está a procurar na loja. Assim que o cliente começa a escrever, os nomes dos produtos correspondentes são instantaneamente exibidos. A ordem dos resultados é determinada pelo número de produtos que correspondem a cada resultado de pesquisa.

A funcionalidade de previsão de pesquisa automática só está disponível nos planos Premium ou superior. Solicite uma demonstração à nossa equipa de suporte.

Bibliotecas de Javascript

Estas duas bibliotecas, alojadas nos servidores da Jumpseller, têm de ser colocadas antes da tag </head> no layout do tema principal. Pode utilizar a condição liquid {% if store.autocomplete_access %} para identificar se o plano da loja tem acesso a esta funcionalidade.

{% if store.autocomplete_access %}
  <script src="//assets.jumpseller.com/public/autocomplete/algolia-autocomplete@1.7.1.js"></script>
  <script src="//assets.jumpseller.com/public/autocomplete/jumpseller-autocomplete@1.0.0.min.js" data-suggest-categories="false" defer="defer"></script>
{% endif %}

HTML

Cada tema precisa de ter uma barra de pesquisa. Esta é uma representação simples do código que precisa de ser incluído. Os elementos obrigatórios são:

• Um div com a classe jumpseller-autocomplete a envolver o <form>.
• O atributo autocomplete="off" no campo da pesquisa.

<div class="jumpseller-autocomplete">
  <form method="get" action="{{search.url_send}}">
    <input type="text" autocomplete="off" value="{{search.query}}" name="q" placeholder="Search for products" />
    <button type="submit">Search</button>
  </form>
</div>

CSS

Opcionalmente, é possível personalizar um spinner que é exibido durante a previsão de pesquisa automática. As classes utilizadas para este gif do spinner são .aa-Autocomplete .aa-Button, e pode ser posicionado em posição absoluta sobre o botão de pesquisa, que é normalmente uma lupa.