Search

Agregue una funcionalidad de búsqueda potente a su tienda SmartWeb. Clerk.io ofrece dos soluciones de búsqueda complementarias:

• Un Instant Search desplegable que muestra resultados mientras 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, mostrando un desplegable debajo del campo de búsqueda.

Crear diseño #

Use el Editor de diseños o diseños en código.

Editor de diseños #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Instant Search.
3. Seleccione una plantilla para empezar.
4. Asígnele un nombre y haga clic en Create design.
5. Ajuste el diseño según sea necesario.

Diseño en código #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Blank > With code.
3. Asígnele un nombre y haga clic en Save.
4. Cree un diseño en código usando Liquid.

Crear elemento #

1. Vaya a Search > Elements.
2. Haga clic en New Element.
3. Nómbrelo “Live Search”.
4. En Element type, seleccione Live-search.
5. En Design, seleccione el diseño que creó.
6. Haga clic en Save.

Añadir al sitio web #

1. En el Administrador de SmartWeb, vaya a Online Store > Design > Aktive designs > Rediger filer > partials.
2. Abra el archivo body.tpl.
3. Inserte el siguiente código y haga 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>

Solución de problemas #

Si su Instant Search no aparece, probablemente se deba a que su campo de búsqueda tiene un identificador diferente al predeterminado.

1. Inspeccione su campo de búsqueda en el navegador y localice la clase o ID única.
2. Reemplace el selector en data-instant-search por la clase o ID de su campo de entrada.

Search Page #

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

Crear diseño #

Use el Editor de diseños o diseños en código.

Editor de diseños #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Search Page.
3. Seleccione una plantilla para empezar.
4. Asígnele un nombre y haga clic en Create design.
5. Ajuste el diseño según sea necesario.

Diseño en código #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Blank > With code.
3. Asígnele un nombre y haga clic en Save.
4. Cree un diseño en código usando Liquid.

Crear elemento #

1. Vaya a Search > Elements.
2. Haga clic en New Element.
3. Nómbrelo “Search Page”.
4. En Element type, seleccione Search page.
5. En Design, seleccione el diseño que creó.
6. Haga clic en Save.

Añadir al sitio web #

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

1. En el Administrador de SmartWeb, vaya a Online Store > Design > Aktive designs > Rediger filer.
2. Abra modules > product > product-list-js-entity.tpl.
3. Inserte 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. En la parte más inferior del archivo, inserte la sentencia IF de cierre:

{/if}

5. Haga clic en Gem para guardar los cambios.

Facets #

Clerk.js incluye por defecto la búsqueda facetada para la Search Page. Cualquier atributo de producto enviado a Clerk.io se puede utilizar como filtro.

Para habilitar facets, agregue los atributos de faceta a su código de inserción (como se muestra en el ejemplo anterior). Puede estilizar los facets usando CSS en el mismo archivo.

Para una visión completa, consulte la guía de Facets.