top-search

Este snippet contiene un formulario para consultar en diferentes objetos con el query param q. Como resultado de esta consulta, se redirecciona a la ruta /search y añade parámetros a la URL, podemos filtrar:

• Products
• Articles
• Pages

Nota: Es frecuente añadir este snippet a la sección de header.

Formulario de búsqueda

Para llegar a la ruta de búsqueda, los usuarios deben completar el formulario de búsqueda. Este formulario contiene un atributo de action="". Dentro del formulario, necesita una input con los siguientes atributos:

• type="text"
• name="q"

También debe establecer un value para reflejar el valor del atributo terms del objeto de búsqueda para que se conserven los términos de búsqueda del cliente:

./snippets/top-search.liquid

<form action="{{ routes.search_url }}" class="search_form">
  <div class="search_form--textfield">
    <input type="text"
      id="search"
      name="q"
      placeholder="Typing..."
      value="{{ search.terms | escape }}"
    >
    <label for="search">Search</label>
  </div>
  <button type="submit">
    {% render 'icon-search' %}
  </button>
</form>

Resultado de búsqueda

Para reflejar los resultados de la búsqueda, deberá recorrer los valores del atributo results del objeto search :

{% for item in search.results %}
  <!-- item details -->
{% endfor %}

Conozca más sobre el objecto search aquí

Archivos: