Search

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

• Un menú desplegable de Búsqueda Instantánea que muestra resultados mientras los clientes escriben.
• Una Página de Búsqueda con filtros facetados para explorar todos los resultados.

Búsqueda Instantánea #

La Búsqueda Instantánea proporciona resultados en tiempo real a medida que los clientes escriben, mostrados en un menú desplegable debajo del campo de búsqueda.

Crear Diseño #

Utilice el Editor de Diseño o diseños con código.

Editor de Diseño #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Instant Search.
3. Seleccione una plantilla desde la cual empezar.
4. Nómbrelo y haga clic en Create design.
5. Ajuste el diseño según sea necesario.

Diseño con Código #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Blank > With code.
3. Nómbrelo y haga clic en Save.
4. Cree un diseño con 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.

Agregar al sitio web #

1. En el Admin de DanDomain, 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 Búsqueda Instantánea no se muestra, 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 encuentre la clase o ID única.
2. Reemplace el selector en data-instant-search con la clase o ID de su campo de entrada.

Página de Búsqueda #

La Página de Búsqueda proporciona una experiencia de búsqueda a pantalla completa con filtrado avanzado.

Crear Diseño #

Utilice el Editor de Diseño o diseños con código.

Editor de Diseño #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Search Page.
3. Seleccione una plantilla desde la cual empezar.
4. Nómbrelo y haga clic en Create design.
5. Ajuste el diseño según sea necesario.

Diseño con Código #

1. Vaya a Search > Designs y haga clic en New Design.
2. Elija Other designs > Blank > With code.
3. Nómbrelo y haga clic en Save.
4. Cree un diseño con 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.

Agregar al sitio web #

En DanDomain, el archivo product-list-js-entity.tpl genera tanto la Página de Búsqueda como las Páginas de Categorías. Debe usar una sentencia IF para separarlas.

1. En el Admin de DanDomain, 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. Al final inferior del archivo, inserte la sentencia IF de cierre:

{/if}

5. Haga clic en Gem para guardar los cambios.

Facetas #

Clerk.js incluye Búsqueda Facetada integrada para la Página de Búsqueda. Cualquier atributo de producto enviado a Clerk.io puede usarse como filtro.

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

Para ver un panorama completo, consulte la guía de Facetas.