Bigcommerce

Search

Allgemein #

Um Ihren Einbettungscode für die Livesuche oder die Suchseite einzubinden, müssen Sie auf Ihre Themedateien zugreifen. Folgen Sie dazu dem Pfad Thema > Themendateien > Meine Themen > Wählen Sie > Themen bearbeiten > Dateien suchen

  • Erstellen Sie zunächst Ihr Live Search Design und Ihren Inhalt in my.clerk.io.

  • In Ihrer Header-Datei oder Live-Search-Header-Datei (wahrscheinlich header.html , oder, in diesem Beispiel, header-search.html), sollte der Live-Search-Einbettungscode platziert werden.

  • Achten Sie darauf, den Platzhalter in “data-instant-search” zu aktualisieren, damit er die in Ihrem Webshop verwendete Abfrageklasse oder ID enthält (in diesem Beispiel “#search_query_adv”).

Suchseite #

  • Erstellen Sie zunächst das Design und den Inhalt Ihrer Suchseite in my.clerk.io.

  • In Ihrer Suchseitendatei (wahrscheinlich search.html) sollte der Search Page Embed Code platziert werden.

  • Achten Sie darauf, den Platzhalter innerhalb von “data-query” so zu aktualisieren, dass er die in der URL Ihrer Suchergebnisse verwendete Abfrage enthält (in diesem Beispiel “forms.search.query”).

Facetten #

Clerk.js verfügt über eine integrierte Unterstützung für die Facettensuche.

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

Lassen Sie uns mit einem schnellen 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":"Categories","manufacturer":"Brand","gender":"Sex"}'
  data-facets-design='12234'>
</span>

Mit den Datenfacetten-Teilen können Sie die Facettensuche aktivieren und anpassen.

Durch das Hinzufügen dieser Teile zu Ihrem Such-Seiten-Einbettungscode werden die Facetten angezeigt, sobald die Ergebnisse angezeigt werden.

Unten sehen Sie, was die einzelnen Teile bewirken:

Styling-Facetten #

Facetten haben von Haus aus ein einfaches Styling. Um dies zu ändern, verwenden Sie einfach CSS-Selektoren (mehr über Facetten-Styling hier, um ein benutzerdefiniertes Styling hinzuzufügen.

Facetten zu Ihrem BigCommerce-Shop hinzufügen #

Um Ihrer Suchseite in Ihrem BigCommerce-Webshop Facetten hinzuzufügen, fügen Sie einfach die entsprechenden Datenattribute in den Einbettungscode Ihrer Suchseite ein, den Sie in die Datei kopiert haben, in der sich Ihre Suchseite befindet, wahrscheinlich search.html.

Zum Beispiel:

Sie können auch jedes Styling-CSS in dieselbe Datei einfügen. Stellen Sie sicher, dass Sie alle CSS-Facetten mit-Tags umgeben: