Search

Agrega una potente funcionalidad de búsqueda a tu tienda web SmartWeb. Clerk.io ofrece dos soluciones de búsqueda complementarias:

• Un menú desplegable de Instant Search que muestra resultados a medida que los clientes escriben.
• Una Search Page con filtros facetados para explorar todos los resultados.

Instant Search #

Instant Search proporciona resultados en tiempo real mientras los clientes escriben, mostrados en un menú desplegable debajo del campo de búsqueda.

Crear diseño #

Utiliza el Design Editor o code designs.

Design Editor #

1. Ve a Search > Designs y haz clic en New Design.
2. Elige Other designs > Instant Search.
3. Elige una plantilla para comenzar.
4. Ponle un nombre y haz clic en Create design.
5. Ajusta el diseño según sea necesario.

Code Design #

1. Ve a Search > Designs y haz clic en New Design.
2. Elige Other designs > Blank > With code.
3. Ponle un nombre y haz clic en Save.
4. Crea un diseño con código usando Liquid.

Crear elemento #

1. Ve a Search > Elements.
2. Haz clic en New Element.
3. Ponle el nombre “Live Search”.
4. En Element type, selecciona Live-search.
5. En Design, selecciona el diseño que has creado.
6. Haz clic en Save.

Agregar al sitio web #

1. En el panel de administración de SmartWeb, ve a Online Store > Design > Aktive designs > Rediger filer > partials.
2. Abre el archivo body.tpl.
3. Inserta el siguiente código y haz clic en Gem.

<span class="clerk" 
    data-template="@live-search" 
    data-instant-search=".top-search-form .form-input" 
    data-instant-search-positioning="left"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-suggestions="6">
</span>

Resolución de problemas #

Si tu Instant Search no aparece, probablemente es porque tu campo de búsqueda tiene un identificador diferente al predeterminado.

1. Inspecciona tu campo de búsqueda en el navegador y encuentra la clase o ID única.
2. Cambia el selector en data-instant-search por la clase o ID de tu campo de entrada.

Search Page #

La Search Page ofrece una experiencia de búsqueda a pantalla completa con filtrado avanzado.

Crear diseño #

Utiliza el Design Editor o code designs.

Design Editor #

1. Ve a Search > Designs y haz clic en New Design.
2. Elige Other designs > Search Page.
3. Elige una plantilla para comenzar.
4. Ponle un nombre y haz clic en Create design.
5. Ajusta el diseño según sea necesario.

Code Design #

1. Ve a Search > Designs y haz clic en New Design.
2. Elige Other designs > Blank > With code.
3. Ponle un nombre y haz clic en Save.
4. Crea un diseño con código usando Liquid.

Crear elemento #

1. Ve a Search > Elements.
2. Haz clic en New Element.
3. Ponle el nombre “Search Page”.
4. En Element type, selecciona Search page.
5. En Design, selecciona el diseño que has creado.
6. Haz clic en Save.

Agregar al sitio web #

En SmartWeb, el archivo product-list-js-entity.tpl genera tanto la Search Page como las Category Pages. Necesitas usar una sentencia IF para separarlas.

1. En el panel de administración de SmartWeb, ve a Online Store > Design > Aktive designs > Rediger filer.
2. Abre modules > product > product-list-js-entity.tpl.
3. Inserta el siguiente código en la parte superior del archivo, cerca de la línea 35:

{if $field == 'search'}
 
<div class="page-width clerk-page-width">
<span
    id="clerk-search"
    class="clerk"
    data-template="@search-page"
    data-target="#clerk-search-results"
    data-query="{$itemId}"
    data-facets-attributes='["price","categories","vendor"]'
    data-facets-titles='{"price":"Price","categories":"Categories"}'
    data-facets-target="#clerk-search-filters"
    data-facets-price-prepend="€"
    data-facets-in-url="false"
    data-facets-view-more-text="View More"
    data-facets-searchbox-text="Search for "> 
</span>
 
<div id="clerk-show-facets" onclick="toggleFacets()">Filters</div>
 
<div class="clerk_flex_wrap">
  <div id="clerk-facets-container">
    <div id="clerk-search-filters"></div>
  </div>
  <div id="clerk-search-results"></div>
</div>
 
<script>
function toggleFacets(){
  el = document.getElementById('clerk-facets-container');
  el.classList.toggle('active');
}
</script>
 
 
<style>
  #clerk-show-facets {
      width: 70%; 
      height: 40px;
      margin: 20px auto; 
      background-color: #333;
      color: white;
      text-align: center;
      border-radius: 2px;
      line-height: 40px;
  }
 
  #clerk-search-results {
      display: block;
      width: 100%;
  }
 
  .clerk-page-width {
      display: flow-root;
  }
 
  #clerk-search-results {
      width: 80%;
  }
 
  #clerk-search-filters {
      width: 20%;
  }
 
  #clerk-show-facets {
      display: none;
  }
  .clerk_flex_wrap {
      display: flex;
      flex-direction: row;
  }
 
  .active {
    display: block !important;
  }
 
  @media only screen and (max-width : 800px) {
    #clerk-search-filters {
      width: 100%;
    }
 
    #clerk-facets-container {
      display: none;
    }
    #clerk-show-facets {
        display: block;
    }
    .clerk_flex_wrap {
      flex-direction: column;
    }
  }
</style>
</div>
 
{else}

4. Al final del archivo, coloca la sentencia IF de cierre:

{/if}

5. Haz clic en Gem para guardar los cambios.

Facetas #

Clerk.js incluye búsqueda facetada integrada para la Search Page. Todos los atributos de productos enviados a Clerk.io pueden ser usados como filtros.

Para activar facetas, añade los atributos de facetado a tu código de integración (como se muestra en el ejemplo anterior). Puedes estilizar las facetas usando CSS en el mismo archivo.

Para obtener una visión general completa, consulta la guía de Facets.