Search

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

• Ein Instant Search-Dropdown, das Ergebnisse während der Eingabe Ihrer Kunden anzeigt.
• Eine Search Page mit facettierten Filtern zum Durchstöbern aller Ergebnisse.

Instant Search #

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

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 aus, mit der Sie starten möchten.
4. Benennen Sie sie 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 mithilfe von 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 unter Element type Live-search aus.
5. Wählen Sie unter Design das zuvor erstellte Design aus.
6. Klicken Sie auf Save.

Zur Website hinzufügen #

1. Gehen Sie im DanDomain-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 Ihre Instant Search nicht angezeigt wird, liegt dies wahrscheinlich daran, dass Ihr Suchfeld eine andere Kennung als die Standardkennung hat.

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

Search Page #

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

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 aus, mit der Sie starten möchten.
4. Benennen Sie sie 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 mithilfe von 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 unter Element type Search page aus.
5. Wählen Sie unter Design das zuvor erstellte Design aus.
6. Klicken Sie auf Save.

Zur Website hinzufügen #

In DanDomain 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 DanDomain-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 der Datei, in der Nähe von Zeile 35, ein:

{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 unteren 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 enthält eine integrierte facettierte Suche für die Search Page. Alle Produktattribute, die an Clerk.io gesendet werden, können als Filter verwendet werden.

Um Facetten zu aktivieren, fügen Sie die Facettenattribute Ihrem Embed-Code hinzu (wie im obigen Beispiel gezeigt). Sie können Facetten mit CSS in derselben Datei gestalten.

Eine vollständige Übersicht finden Sie im Facetten-Guide.