Search

Añade una potente funcionalidad de búsqueda a tu tienda DanDomain. 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, mostrándose en un desplegable debajo del campo de búsqueda.

Crear diseño #

Utiliza el Editor de Diseño o code designs.

Editor de Diseño #

1. Ve a Search > Designs y haz clic en New Design.
2. Elige Other designs > Instant Search.
3. Selecciona una plantilla de inicio.
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 code design utilizando Liquid.

Crear elemento #

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

Añadir al sitio web #

1. En el Admin de DanDomain, 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>

Solución de problemas #

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

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

Search Page #

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

Crear diseño #

Utiliza el Editor de Diseño o code designs.

Editor de Diseño #

1. Ve a Search > Designs y haz clic en New Design.
2. Elige Other designs > Search Page.
3. Selecciona una plantilla de inicio.
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 code design utilizando Liquid.

Crear elemento #

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

Añadir al sitio web #

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

1. En el Admin de DanDomain, 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, inserta la sentencia IF de cierre:

{/if}

5. Haz clic en Gem para guardar los cambios.

Facets #

Clerk.js incluye Faceted Search integrado para la Search Page. Cualquier atributo de producto enviado a Clerk.io puede utilizarse como filtro.

Para habilitar los facets, añade los atributos facetados a tu código de inserción (como en el ejemplo anterior). Puedes dar estilo a los facets usando CSS en el mismo archivo.

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