Search

Fügen Sie Ihrer ScanNet-Webshop eine leistungsstarke Suchfunktion hinzu. Clerk.io bietet zwei ergänzende Suchlösungen:

• Ein Instant Search-Dropdown, das Ergebnisse anzeigt, während Kunden tippen.
• Eine Search Page mit facettierten Filtern zum Durchsuchen aller Ergebnisse.

Instant Search #

Instant Search liefert in Echtzeit Ergebnisse, die während der Eingabe der Kunden in einem Dropdown unter dem Suchfeld angezeigt werden.

Design erstellen #

Verwenden Sie den Design Editor oder Code Designs.

Design Editor #

1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
2. Wählen Sie Other designs > Instant Search.
3. Wählen Sie eine Vorlage als Ausgangspunkt.
4. Benennen Sie das Design und klicken Sie auf Create design.
5. Passen Sie das Design nach Bedarf an.

Code Design #

1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
2. Wählen Sie Other designs > Blank > With code.
3. Benennen Sie das Design und klicken Sie auf Save.
4. Erstellen Sie ein Code Design mit Liquid.

Element erstellen #

1. Gehen Sie zu Search > Elements.
2. Klicken Sie auf New Element.
3. Benennen Sie es mit “Live Search”.
4. Wählen Sie in Element type Live-search aus.
5. Wählen Sie in Design das erstellte Design.
6. Klicken Sie auf Save.

Zur Website hinzufügen #

1. Gehen Sie im ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer > partials.
2. Öffnen Sie die Datei body.tpl.
3. Fügen Sie den folgenden Code ein und klicken Sie auf 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>

Fehlerbehebung #

Wenn Instant Search nicht angezeigt wird, hat Ihr Suchfeld vermutlich einen anderen Bezeichner als den Standardwert.

1. Untersuchen Sie Ihr Suchfeld im Browser, um die eindeutige class oder ID zu finden.
2. Ersetzen Sie den Selektor in data-instant-search durch die class oder ID Ihres Eingabefelds.

Search Page #

Die Search Page bietet eine ganzseitige Sucherfahrung mit erweiterten Filteroptionen.

Design erstellen #

Verwenden Sie den Design Editor oder Code Designs.

Design Editor #

1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
2. Wählen Sie Other designs > Search Page.
3. Wählen Sie eine Vorlage als Ausgangspunkt.
4. Benennen Sie das Design und klicken Sie auf Create design.
5. Passen Sie das Design nach Bedarf an.

Code Design #

1. Gehen Sie zu Search > Designs und klicken Sie auf New Design.
2. Wählen Sie Other designs > Blank > With code.
3. Benennen Sie das Design und klicken Sie auf Save.
4. Erstellen Sie ein Code Design mit Liquid.

Element erstellen #

1. Gehen Sie zu Search > Elements.
2. Klicken Sie auf New Element.
3. Benennen Sie es mit “Search Page”.
4. Wählen Sie in Element type Search page aus.
5. Wählen Sie in Design das erstellte Design.
6. Klicken Sie auf Save.

Zur Website hinzufügen #

In ScanNet generiert die Datei product-list-js-entity.tpl sowohl die Search Page als auch die Category Pages. Sie müssen eine IF-Anweisung verwenden, um diese zu trennen.

1. Gehen Sie im ScanNet Admin zu Online Store > Design > Aktive designs > Rediger filer.
2. Öffnen Sie modules > product > product-list-js-entity.tpl.
3. Fügen Sie den folgenden Code ganz oben in die Datei ein, in der Nähe von Zeile 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. Fügen Sie ganz unten in der Datei die abschließende IF-Anweisung ein:

{/if}

5. Klicken Sie auf Gem, um Ihre Änderungen zu speichern.

Facets #

Clerk.js enthält eine integrierte Faceted Search für die Search Page. Alle Produktattribute, die an Clerk.io gesendet werden, können als Filter verwendet werden.

Um Facets zu aktivieren, fügen Sie die Facet-Attribute zu Ihrem Embed-Code hinzu. Sie können Facets im selben File mit CSS gestalten.

Für einen vollständigen Überblick siehe den Facets guide.