Facets

Diese intelligente Filterfunktion macht es Besuchern mühelos, die richtigen Artikel zu finden – selbst in den größten Ergebnismengen.

Facets können sowohl im Search Page- als auch im Omnisearch-Layout verwendet werden. Beide bieten mehrere Standarddesigns, um Ihnen den Einstieg in ein großartiges Sucherlebnis zu erleichtern.

Dynamische Attribute #

Wenn Ihre Produkte verschiedene Attributsets enthalten, zeigt Facets nur die für jede einzelne Suche relevanten Filter an.

Beispielsweise werden bei einer Suche nach “Laptops” wahrscheinlich Spezifikationen wie RAM, Speicherplatz, Bildschirmgröße usw. angezeigt, während Suchen nach “Kopfhörern” ihren Sitz, Bluetooth-Funktionen, EQ-Merkmale und mehr enthalten werden.

Stellen Sie sicher, dass Sie nur die relevanten Attribute für jedes Produkt in Ihrem Katalog importieren – dann ist Facets bei jeder Suche dynamisch.

Automatische Bereiche #

Attribute, die Zahlen sind, werden von Facets erkannt und als Kombination aus einem Bereichsselektor und mehreren vordefinierten Bereichen angezeigt.

Diese Bereiche sind dynamisch und ändern sich je nach Ergebnismenge. Beispielsweise, wenn eine Ergebnismenge Produkte zwischen 10 € und 150 € enthält, werden die Bereiche vermutlich zwischen 10–30 € und 140 €+ liegen.

Standardmäßig wird so mit Preisen verfahren.

Für Entwickler #

Facets sind Teil des Clerk.js-UI-Kits, das es einfach macht, Funktionalitäten zu Ihrer Seite hinzuzufügen.

Für Omnisearch werden Facets in my.clerk.io konfiguriert.

Für die Search Page werden sie direkt in das Snippet integriert, das die Ergebnisse anzeigt:

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

<span 
  class="clerk" 
  data-template="@search-page" 
  data-query="shoes"
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE_LABEL", "categories": "CATEGORIES_LABEL", "brand": "BRAND_LABEL"}'
  data-facets-in-url="true">
</span>

Facets in Liquid #

In Search Page- und Omnisearch-Designs werden Facets in Liquid als facet_groups bereitgestellt.

Diese Struktur entspricht nicht immer 1:1 dem Rohformat der API-Antwort. Wenn Sie also eine Facet-UI im Design erstellen, verwenden Sie die folgenden Liquid-Felder:

• facet_groups (Array): Alle verfügbaren Facet-Gruppen für die aktuelle Suche.
• facet_group.name: Interner Facet-Key (z. B. _price_range, brand, categories).
• facet_group.title: Für Benutzer sichtbarer, lesbarer Titel.
• facet_group.selected_count: Wie viele Optionen in der Gruppe aktuell ausgewählt sind.
• facet_group.facets (Array): Alle Optionen in dieser Gruppe.
• facet.value: Label/Wert für die Option.
• facet.selected: Ob diese Option aktuell aktiv ist.
• facet.count: Ergebnisanzahl für die Option.
• facet.min / facet.max: Numerische Bereichsgrenzen (hauptsächlich relevant für _price_range-Facets).

Beispiel:

{% for facet_group in facet_groups %}
  <div class="clerk-facet-group" data-facet-group="{{ facet_group.name }}">
    <div class="clerk-facet-group-title">
      {{ facet_group.title }}
      {% if facet_group.selected_count > 0 %}
        <span>({{ facet_group.selected_count }})</span>
      {% endif %}
    </div>

    <div class="clerk-facet-group-facets">
      {% for facet in facet_group.facets %}
        {% if facet.value != 'false' %}
          <div
            class="clerk-facet {% if facet.selected %}clerk-facet-selected{% endif %}"
            data-facet="{{ facet_group.name }}"
            data-value="{{ facet.value }}">
            {{ facet.value }} ({{ facet.count }})
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endfor %}

Parameter #

Facets bestehen aus zwei Parametern, die dem Snippet hinzugefügt werden:

• data-facets-attributes: Eine Liste von Attributen, die bei relevanten Suchen angezeigt werden können
• data-facets-titles: Ein Array von Attributen und zugehörigen Titeln, das konfiguriert, wie sie Endbenutzern angezeigt werden.

Persistente Filter #

Standardmäßig werden beim Auswählen eines Facets und anschließenden Eingeben einer neuen Suche alle gewählten Facets gelöscht und die neue Suche beginnt ungefiltert.

Das Hinzufügen von data-facets-persistent-filter="true" zum Snippet ändert dieses Verhalten — die ausgewählten Facets werden gespeichert und bei jeder neuen Suche automatisch wieder angewendet, sodass die Filterauswahl des Besuchers bestehen bleibt, während er den Suchbegriff verfeinert.

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

<span 
  class="clerk" 
  data-template="@search-page" 
  data-query="shoes"
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "Price", "categories": "Categories", "brand": "Brand"}'
  data-facets-in-url="true"
  data-facets-persistent-filter="true">
</span>

Dies ist nützlich auf Suchseiten, auf denen Besucher häufig innerhalb einer Kategorie oder Marke stöbern – z. B. eine Suche innerhalb von “Nike” und anschließendes mehrmaliges Verfeinern der Suche, während der Markenfilter aktiv bleibt.

URL-Filterung #

Sie möchten womöglich vorgefilterte Suchseiten in Ihrem Marketing verwenden – mit Facets ist das sehr einfach. Durch einfaches Hinzufügen des Parameters data-facets-in-url zu Ihrem Kategorie-Seiten-Snippet werden die Facets in die URL geschrieben.

Wenn Sie die URL öffnen, sind die Facets bereits ausgewählt:

https://awesomestore.com/sneakers?brand=nike&size=42

Weitere technische Informationen zu Facets finden Sie in unserer Entwicklerdokumentation