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 den Inhalt für die Live-Suche in my.clerk.io.

• In Ihrer Header-Datei oder der Header-Datei der Live-Suche (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 den 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 Facetten angezeigt, sobald Ergebnisse angezeigt werden.

Unten sehen Sie, was jeder Teil bewirkt:

Facetten stylen #

Facetten kommen mit einer einfachen Styling-Vorlage. Um dies zu ändern, verwenden Sie einfach CSS-Selektoren (mehr über das Styling von Facetten hier, um benutzerdefiniertes Styling hinzuzufügen.

Facetten zu Ihrem BigCommerce-Shop hinzufügen #

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 beliebiges Styling-CSS in die gleiche Datei hinzufügen. Stellen Sie sicher, dass Sie alle Facetten-CSS mit-Tags umgeben: