Facets

Diese intelligente Filterfunktion macht es Besuchern mühelos möglich, die passenden Artikel zu finden – selbst in den größten Mengen von Suchergebnissen.

Facets können sowohl im Search Page als auch im Omnisearch Layout verwendet werden. Beide bieten mehrere Standarddesigns, um Ihnen einen großartigen Einstieg in die Suche zu ermöglichen.

Dynamische Attribute #

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

Beispiel: Eine Suche nach “Laptops” zeigt wahrscheinlich Spezifikationen wie RAM, Speicherplatz, Bildschirmgröße usw., während Suchen nach “Kopfhörer” deren Passform, Bluetooth-Funktionen, EQ-Features und mehr anzeigen.

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

Automatische Bereiche #

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

Diese sind dynamisch und ändern sich je nach Ergebnisgruppe. Beispiel: Wenn ein Set Produkte im Preisbereich von 10 € bis 150 € enthält, reichen die Gruppen wahrscheinlich von 10 €–30 € bis 140 €+.

Standardmäßig werden so Preise behandelt.

Facet-Reihenfolge #

Sie können die Reihenfolge der Facet-Attribute in den Facet-Editor-Tabellen und in der Facet-Liste eines Elements unter seinem Design oder seinen Einfügeeinstellungen ändern.

Greifen Sie das gepunktete Handle eines Attributs und ziehen Sie es an die gewünschte Position. Ein gestrichelter Kasten zeigt, wo es landen wird. Lassen Sie die Zeile los, um sie zu verschieben. Sie können auch eine Zeile fokussieren und Alt + ↑ oder Alt + ↓ drücken; Screenreader geben den Wechsel bekannt.

Damit steuern Sie die Reihenfolge der Facet-Attribute, z. B. wird “Marke” vor dem Preis angezeigt. Verwenden Sie die untenstehende Einstellung Sort, um die Werte innerhalb jedes Facets zu steuern.

Facet-Werte sortieren #

Sie können die Reihenfolge der Werte innerhalb jedes Facets direkt in my.clerk.io steuern. Wählen Sie in den Facets-Einstellungen eine Option aus der Spalte Sort für jedes Attribut aus.

• Most Popular Products sortiert die Werte basierend auf der Produktbeliebtheit.
• Numeric sortiert zahlenbasierte Attribute.
• A–Z sortiert Zeichenfolgenattribute alphabetisch, z. B. Kategorien.

Für Entwickler #

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

Bei Omnisearch werden Facets in my.clerk.io konfiguriert.

Für die Search Page sind 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 ist nicht immer eine 1:1 Kopie des Rohformats der API-Antwort. Nutzen Sie deshalb beim Erstellen der Facet-UI in einem Design die folgenden Liquid-Felder:

• facet_groups (Array): Alle verfügbaren Facet-Gruppen für die aktuelle Abfrage.
• facet_group.name: Interner Facet-Schlüssel (z. B. _price_range, brand, categories).
• facet_group.title: Für Nutzer angezeigter, lesbarer Titel.
• facet_group.selected_count: Wie viele Optionen aktuell in dieser Gruppe ausgewählt sind.
• facet_group.facets (Array): Alle Optionen in dieser Gruppe.
• facet.value: Label/Wert der Option.
• facet.selected: Ob diese Option derzeit aktiv ist.
• facet.count: Ergebnisanzahl für diese 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 potenziell für Suchen angezeigt werden können, bei denen sie relevant sind
• data-facets-titles: Ein Array von Attributen und zugehörigen Titeln, das steuert, wie sie Endnutzern angezeigt werden.

Persistente Filter #

Standardmäßig werden bei Auswahl eines Facets und anschließender Eingabe einer neuen Suchanfrage die gewählten Facets zurückgesetzt – die neue Suche beginnt ungefiltert.

Das Hinzufügen von data-facets-persistent-filter="true" zum Snippet ändert dieses Verhalten: Ausgewählte Facets werden gespeichert und bei jeder neuen Abfrage automatisch wieder angewendet, sodass die Filtereinstellungen des Besuchers erhalten bleiben, während er seinen Suchbegriff weiter eingrenzt.

<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>

Das ist nützlich auf Ergebnisseiten, bei denen Nutzer häufig innerhalb einer Kategorie oder Marke stöbern – zum Beispiel mit der Suche nach “Nike” und wiederholtem Verfeinern der Suchanfrage, während der Markenfilter beibehalten wird.

URL-Filterung #

Sie möchten eventuell vorgefilterte Suchseiten in Ihrem Marketing verwenden, und Facets machen das ganz einfach. Fügen Sie einfach das Parameter data-facets-in-url zu Ihrem Kategorie-Snippet hinzu – Facets werden dadurch zur URL hinzugefügt.

Beim Öffnen der URL sind die Facets schon ausgewählt:

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

Weitere technische Informationen zu Facets finden Sie in unserer Entwicklerdokumentation