Facets

Diese intelligente Filterfunktion macht es Besuchern mühelos, 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 den Einstieg in ein großartiges Sucherlebnis zu erleichtern.

Dynamische Attribute #

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

Z.B. wird eine Suche nach “laptops” wahrscheinlich Spezifikationen wie RAM, Speicherplatz, Bildschirmgröße usw. anzeigen, während Suchen nach “headphones” Merkmale wie Sitz, Bluetooth-Funktionen, EQ-Features und mehr umfassen.

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 Bereichswähler und mehreren vordefinierten Bereichen angezeigt.

Diese sind dynamisch und ändern sich je nach Ergebnismenge. Z.B. wenn ein Set Produkte enthält, die zwischen 10 € - 150 € kosten, liegen die Bereiche wahrscheinlich zwischen 10 €-30 € und 140 €+.

Standardmäßig werden so Preise gehandhabt.

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 Facets in Liquid als facet_groups verfügbar gemacht.

Diese Struktur ist nicht immer eine 1:1-Kopie des rohen API-Response-Formats. Wenn Sie also eine Facet-UI in einem Design bauen, verwenden Sie die folgenden Liquid-Felder:

• facet_groups (Array): Alle verfügbaren Facet-Gruppen für die aktuelle Abfrage.
• facet_group.name: Interner Facet-Schlüssel (zum Beispiel _price_range, brand, categories).
• facet_group.title: Für Nutzer angezeigter Titel.
• facet_group.selected_count: Anzahl der aktuell gewählten Optionen in der Gruppe.
• facet_group.facets (Array): Alle Optionen dieser Gruppe.
• facet.value: Bezeichnung/Wert für die Option.
• facet.selected: Ob diese Option gerade 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 für Suchanfragen, bei denen sie relevant sind, angezeigt werden könnten
• data-facets-titles: Ein Array von Attributen und zugehörigen Titeln, das konfiguriert, wie sie Endnutzern angezeigt werden.

URL-Filterung #

Möglicherweise möchten Sie vorgefilterte Suchseiten in Ihrem Marketing versenden – Facets machen das sehr einfach. Durch das Hinzufügen des Parameters data-facets-in-url zu Ihrem Kategorieseiten-Snippet werden Facets zur URL hinzugefügt.

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

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

Mehr über die technischen Details zu Facets in unserer Developer-Dokumentation