Search

Fügen Sie leistungsstarke Suchfunktionen zu Ihrem SmartWeb-Webshop hinzu. Clerk.io bietet zwei ergänzende Suchlösungen:

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

Instant Search #

Instant Search liefert in Echtzeit Ergebnisse, während Kunden tippen, angezeigt in einem Dropdown unter dem Suchfeld.

Design erstellen #

Nutzen 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 “Live Search”.
4. Wählen Sie bei Element type Live-search.
5. Wählen Sie bei Design das von Ihnen erstellte Design.
6. Klicken Sie auf Save.

Zur Website hinzufügen #

1. Im SmartWeb Admin gehen Sie 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 Ihre Instant Search nicht angezeigt wird, liegt das wahrscheinlich daran, dass Ihr Suchfeld eine andere Kennung als die Standardkennung hat.

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

Search Page #

Die Search Page bietet ein vollseitiges Sucherlebnis mit erweiterten Filtermöglichkeiten.

Design erstellen #

Nutzen 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 “Search Page”.
4. Wählen Sie bei Element type Search page.
5. Wählen Sie bei Design das von Ihnen erstellte Design.
6. Klicken Sie auf Save.

Zur Website hinzufügen #

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

1. Im SmartWeb Admin gehen Sie 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 der Datei ein, etwa bei 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. Am Ende der Datei fügen Sie die abschließende IF-Anweisung ein:

{/if}

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

Facetten #

Clerk.js beinhaltet eine integrierte Faceted Search für die Search Page. Alle an Clerk.io gesendeten Produktattribute können als Filter verwendet werden.

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

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