Facets

Diese intelligente Filterfunktion macht es Besuchern leicht, die richtigen Artikel zu finden – selbst bei den größten Mengen an Suchergebnissen.

Facetten können sowohl im Search Page- als auch im Omnisearch-Layout verwendet werden. Beide bieten verschiedene Standarddesigns, damit Sie sofort ein großartiges Sucherlebnis bieten können.

Dynamische Attribute #

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

Beispielsweise zeigt eine Suche nach „Laptops“ voraussichtlich Spezifikationen wie RAM, Speicherplatz, Bildschirmgröße usw., während Suchen nach „Kopfhörern“ deren Passform, Bluetooth-Funktionen, EQ-Eigenschaften und mehr enthalten.

Stellen Sie sicher, dass Sie nur die relevanten Attribute für jedes Produkt in Ihrem Katalog importieren, und Facets wird für jede Suche dynamisch sein.

Automatische Bereiche #

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

Diese sind dynamisch und ändern sich je nach Ergebnis-Set. Wenn beispielsweise eine Auswahl Produkte zwischen 10 € und 150 € umfasst, liegen die Bereiche vermutlich zwischen 10–30 € und 140 €+.

Standardmäßig werden so Preise behandelt.

Facettenwerte sortieren #

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

• Most Popular Products sortiert Werte basierend auf der Beliebtheit der Produkte.
• Numeric sortiert zahlenbasierte Attribute.
• A–Z sortiert Zeichenkettenattribute alphabetisch, wie z.B. Kategorien.

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 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 Facetten in Liquid als facet_groups bereitgestellt.

Diese Struktur ist nicht immer eine 1:1-Kopie des rohen API-Antwortformats. Wenn Sie also eine Facetten-UI in einem Design erstellen, verwenden Sie die folgenden Liquid-Felder:

• facet_groups (Array): Alle verfügbaren Facettengruppen für die aktuelle Abfrage.
• facet_group.name: Interner Facettenschlüssel (z.B. _price_range, brand, categories).
• facet_group.title: Benutzerfreundlicher Titel, der den Nutzern angezeigt wird.
• 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: Bezeichnung/Wert für die Option.
• facet.selected: Ob diese Option gerade aktiv ist.
• facet.count: Trefferanzahl für diese Option.
• facet.min / facet.max: Grenzen für numerische Bereiche (vor allem relevant für _price_range-Facetten).

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 für Suchen, bei denen sie relevant sind, angezeigt werden können
• data-facets-titles: Ein Array von Attributen und zugehörigen Titeln, die konfigurieren, wie sie für Endnutzer angezeigt werden.

Persistente Filter #

Standardmäßig werden nach Auswahl einer Facette und Eingabe einer neuen Suchanfrage die ausgewählten Facetten zurückgesetzt, sodass die neue Suche ungefiltert startet.

Fügen Sie dem Snippet data-facets-persistent-filter="true" hinzu, um dieses Verhalten zu ändern – ausgewählte Facetten werden gespeichert und bei jeder neuen Abfrage automatisch wieder angewendet, sodass die Filterauswahl der Besucher bestehen bleibt, während sie ihren Suchbegriff verfeinern.

<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 Suchseiten, auf denen Besucher häufig innerhalb einer Kategorie oder Marke stöbern – zum Beispiel bei der Suche nach „Nike“ und mehrfachem Präzisieren der Abfrage, während dieser Markenfilter aktiv bleibt.

URL-Filterung #

Sie möchten möglicherweise vorgefilterte Suchseiten in Ihrem Marketing verwenden – Facets macht dies ganz einfach. Fügen Sie einfach das Attribut data-facets-in-url zu Ihrem Kategorie-Snippet hinzu, dann werden Facetten zur URL hinzugefügt.

Beim Öffnen der URL sind die Facetten bereits ausgewählt:

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

Weitere Informationen zu den technischen Aspekten von Facets finden Sie in unserer Entwicklerdokumentation