Facets

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

Facets können sowohl im Search Page als auch in Omnisearch Layouts verwendet werden. Beide bieten mehrere Standarddesigns, um direkt mit einem großartigen Sucherlebnis zu starten.

Dynamische Attribute #

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

Zum Beispiel wird eine Suche nach „laptops“ wahrscheinlich Spezifikationen wie RAM, Speicherplatz, Bildschirmgröße usw. anzeigen, während eine Suche nach „headphones“ deren Passform, Bluetooth-Funktionen, EQ-Features und mehr einbezieht.

Stelle sicher, dass du nur die relevanten Attribute für jedes Produkt in deinem Katalog importierst, dann ist Facets für jede Suche dynamisch.

Automatische Wertebereiche #

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

Diese sind dynamisch und verändern sich je nach Suchergebnis. Zum Beispiel: Wenn eine Produktgruppe Preise zwischen 10 € und 150 € enthält, werden die Bereiche wahrscheinlich von 10–30 € und ab 140 € reichen.

Standardmäßig werden so Preise behandelt.

Reihenfolge der Facets #

Füge zuerst Facets in den Element-Einstellungen hinzu und lege danach deren Anzeigereihenfolge fest.

Du kannst die Reihenfolge der Attributsfilter in den Facet-Editor-Tabellen und in der Facet-Liste eines Elements unter dessen Design- oder Einfügeeinstellungen ändern.

Ziehe den gepunkteten Griff eines Attributs an die gewünschte Position. Ein gestricheltes Feld zeigt an, wo es landen wird. Lass die Zeile los, um sie zu verschieben. Du kannst auch eine Zeile fokussieren und Alt + ↑ oder Alt + ↓ drücken; Screenreader geben die Bewegung aus.

Damit steuerst du die Reihenfolge der Facet-Attribute, z. B. Marke vor Preis. Mit der Einstellung Sort unten steuerst du die Werte innerhalb einer Facet.

Facet-Werte sortieren #

Du kannst die Reihenfolge der Werte innerhalb jeder Facet direkt in my.clerk.io festlegen. Wähle in den Facets-Einstellungen eine Option aus der Spalte Sort für jedes Attribut.

• Most Popular Products sortiert Werte nach Produktbeliebtheit.
• Numeric sortiert zahlenbasierte Attribute.
• A–Z sortiert String-Attribute alphabetisch, wie z. B. Kategorien.

Für Entwickler #

Facets sind Teil des Clerk.js-UI-Kits, das die Funktionserweiterung deiner Seite erleichtert.

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

Für die Search Page sind sie direkt im 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 den Search Page- und Omnisearch-Designs werden Facets in Liquid als facet_groups bereitgestellt.

Diese Struktur entspricht nicht immer 1:1 der Rohdatenstruktur der API, daher sollten beim Erstellen der Facet-UI im Design die folgenden Liquid-Felder verwendet werden:

• facet_groups (Array): alle verfügbaren Facet-Gruppen für die aktuelle Suche.
• facet_group.name: Interner Facet-Schlüssel (beispielsweise _price_range, brand, categories).
• facet_group.title: Für Anwender sichtbarer Titel.
• facet_group.selected_count: Wie viele Optionen aktuell in der Gruppe ausgewählt sind.
• facet_group.facets (Array): Alle Optionen dieser Gruppe.
• facet.value: Bezeichnung/Wert der Option.
• facet.selected: Gibt an, ob diese Option aktuell aktiv ist.
• facet.count: Trefferanzahl für die Option.
• facet.min / facet.max: Numerische Grenzen des Bereichs (vorrangig für _price_range-Facets relevant).

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 zum Snippet hinzugefügt werden:

• data-facets-attributes: Eine Liste von Attributen, die für Suchen angezeigt werden können, bei denen sie relevant sind
• data-facets-titles: Ein Array von Attributen und zugehörigen Titeln, das konfiguriert, wie sie Endkunden angezeigt werden.

Persistente Filter #

Standardmäßig werden beim Auswählen einer Facet und anschließender Eingabe einer neuen Suche die ausgewählten Filter zurückgesetzt und die Suche beginnt ungefiltert.

Das Hinzufügen von data-facets-persistent-filter="true" zum Snippet ändert dieses Verhalten – ausgewählte Facets bleiben erhalten und werden bei jeder neuen Suche automatisch wieder angewendet, sodass die Filterwahl des Besuchers während der Verfeinerung der Suchanfrage bestehen bleibt.

<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 besonders nützlich auf Suchseiten, auf denen Besucher häufig innerhalb einer Kategorie oder Marke stöbern – z.B. Suche innerhalb von „Nike“ und anschließende Verfeinerung der Suchanfrage, während der Markenfilter aktiv bleibt.

URL-Filterung #

Es ist möglich, vorgefilterte Suchseiten in deinem Marketing zu verlinken – Facets machen das sehr einfach. Mit dem Parameter data-facets-in-url, der in das Snippet auf deiner Kategorieseite eingefügt wird, werden Facets der URL hinzugefügt.

Wenn du die URL öffnest, sind die Facets bereits vorausgewählt:

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

Mehr zu den technischen Aspekten von Facets findest du in unserer Entwicklerdokumentation