Search

Allgemein #

Um Ihren Embed-Code für entweder die Live-Suche oder die Suchseite einzufügen, müssen Sie auf Ihre Theme-Dateien zugreifen. Folgen Sie dazu dem Pfad Theme > Theme-Dateien > Meine Themes > Wählen > Themes bearbeiten > Dateien finden

Live-Suche #

• Zuerst erstellen Sie Ihr Design und Ihren Inhalt für die Live-Suche in my.clerk.io.

• In Ihrer Header-Datei oder der Live-Suche-Header-Datei (wahrscheinlich header.html oder in diesem Beispiel header-search.html) sollte der Embed-Code für die Live-Suche platziert werden.

• Stellen Sie sicher, dass Sie den Platzhalter innerhalb von “data-instant-search” aktualisieren, um die Abfrageklasse oder ID zu enthalten, die in Ihrem Webshop verwendet wird (in diesem Beispiel “#search_query_adv”).

Suchseite #

• Zuerst erstellen Sie Ihr Design und Ihren Inhalt für die Suchseite in my.clerk.io.

• In Ihrer Suchseiten-Datei (wahrscheinlich search.html) sollte der Embed-Code für die Suchseite platziert werden.

• Stellen Sie sicher, dass Sie den Platzhalter innerhalb von “data-query” aktualisieren, um die Abfrage zu enthalten, die in Ihrer Suchergebnis-URL verwendet wird (in diesem Beispiel “forms.search.query”).

Facetten #

Clerk.js kommt mit integrierter Unterstützung für die facettierte Suche.

Alle Produktattribute, die Sie an Clerk.io senden, können als Teil der facettierten Suche verwendet werden.

Lassen Sie uns mit einem kurzen Beispiel beginnen:

<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>

<span
  class="clerk"

  data-template="@search-page"
  data-query="shoes"
  data-offset="0"

  data-target="#clerk-search-results"

  data-facets-target="#clerk-search-filters"
  data-facets-attributes='["categories","manufacturer","gender"]'
  data-facets-multiselect-attributes='["categories","manufacturer"]'
  data-facets-titles='{"categories":"Kategorien","manufacturer":"Marke","gender":"Geschlecht"}'
  data-facets-design='12234'>
</span>

Die data-facets- Teile ermöglichen es Ihnen, die facettierte Suche zu aktivieren und anzupassen.

Durch das Hinzufügen dieser zu Ihrem Embed-Code für die Suchseite werden die Facetten angezeigt, sobald Ergebnisse angezeigt werden.

Unten sehen Sie, was jeder Teil bewirkt:

Stilgestaltung von Facetten #

Facetten kommen mit einer einfachen Gestaltung von Haus aus. Um dies zu ändern, verwenden Sie einfach CSS-Selektoren (mehr zur Stilgestaltung von Facetten hier, um benutzerdefinierte Stile hinzuzufügen.

Hinzufügen von Facetten zu Ihrem BigCommerce-Shop #

Um Facetten zu Ihrer Suchseite innerhalb Ihres BigCommerce-Webshops hinzuzufügen, fügen Sie einfach die entsprechenden Datenattribute zu Ihrem Embed-Code für die Suchseite hinzu, den Sie in die Datei kopiert haben, in der sich Ihre Suchseite befindet, wahrscheinlich search.html.

Zum Beispiel:

Sie können auch beliebige CSS-Stile in dieselbe Datei hinzufügen. Stellen Sie sicher, dass Sie alle Facetten-CSS mit-Tags umgeben: