Búsquedas con auto-completado predictivo

Esta funcionalidad está destinada a acelerar las interacciones de búsqueda de clientes al tratar de predecir qué producto está buscando en la tienda. Una vez que el cliente comienza a escribir, mostramos instantáneamente los nombres de productos coincidentes. El orden está determinado por la cantidad de productos que coinciden con la búsqueda.

La función de autocompletado se encuentra disponible en los planes Premium o superiores. Solicita una desmotración a nuestro equipo de soporte.

Librerías Javascript

Estas dos librerías, alojadas en los servidores de Jumpseller, deben colocarse antes de la etiqueta </head> en la plantilla Diseño del tema. Puedes usar la condición liquid {% if store.autocomplete_access %} para identificar si el plan de la tienda tiene acceso a esta función.

{% 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 debe tener una barra de búsqueda incluida. La siguiente es una representación simple del código que debes implementar. Los elementos obligatorios son:

• El div con la clase jumpseller-autocomplete envolviendo la etiqueta <form>.
• El atributo autocomplete="off" en el campo de búsqueda.

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

CSS

Opcionalmente, es posible dar estilo a una rueda o spinner que se muestra durante la búsqueda predictiva. Las clases utilizadas para este gif giratorio son .aa-Autocompletar .aa-Button, se puede colocar de manera absolut sobre el botón de búsqueda, que suele ser una lupa.