Facets

Denne intelligente filtreringsfunktion gør det nemt for besøgende at finde de rigtige varer, selv i de største mængder af søgeresultater.

Facets kan bruges både i Search Page og Omnisearch layouts. Begge disse kommer med flere standarddesigns, så du nemt kan komme i gang med en god søgeoplevelse.

Dynamiske attributter #

Når dine produkter inkluderer forskellige sæt af attributter, vil Facets kun vise de filtre, der er relevante for hver enkelt søgning.

F.eks. vil en søgning efter “laptops” sandsynligvis vise specifikationer som RAM, lagerplads, skærmstørrelse osv., mens søgninger efter “headphones” vil inkludere pasform, bluetooth-funktioner, EQ-funktioner og mere.

Sørg for kun at importere de relevante attributter for hvert produkt i dit katalog, og Facets vil blive dynamisk for hver søgning.

Automatiske intervaller #

Attributter, der er tal, vil blive genkendt af facets og vist som en kombination af en intervalselektor og flere foruddefinerede intervaller.

Disse er dynamiske og ændrer sig afhængigt af det enkelte resultatsæt. F.eks. hvis et sæt indeholder produkter med priser mellem €10 - €150, vil intervallerne sandsynligvis ligge mellem €10-€30 og €140+.

Som standard er det sådan priser håndteres.

For udviklere #

Facets er en del af Clerk.js UI kit, som gør det nemt at tilføje funktionalitet til din side.

For Omnisearch konfigureres Facets i my.clerk.io.

For Search Page integreres de direkte i det snippet, som viser resultaterne:

<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 i Liquid #

I Search Page og Omnisearch designs bliver facets eksponeret i Liquid som facet_groups.

Denne struktur er ikke altid en 1:1 kopi af det rå API-svarformat, så når du bygger facet UI i et design, brug følgende Liquid-felter:

• facet_groups (array): alle tilgængelige facet grupper for den aktuelle forespørgsel.
• facet_group.name: intern facet key (for eksempel _price_range, brand, categories).
• facet_group.title: læsbart titel, der vises for brugerne.
• facet_group.selected_count: hvor mange valgmuligheder der aktuelt er valgt i gruppen.
• facet_group.facets (array): alle valgmuligheder i den gruppe.
• facet.value: label/værdi for valgmuligheden.
• facet.selected: om denne valgmulighed aktuelt er aktiv.
• facet.count: antal resultater for valgmuligheden.
• facet.min / facet.max: numeriske intervalgrænser (primært relevant for _price_range facets).

Eksempel:

{% 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 %}

Parametre #

Facets består af to parametre, der tilføjes til snippeten:

• data-facets-attributes: En liste med attributter, som potentielt kan vises ved søgninger, hvor de er relevante
• data-facets-titles: Et array med attributter og tilknyttede titler, der konfigurerer, hvordan de vises for slutbrugeren.

Vedvarende filtre #

Som standard, når en besøgende vælger et facet og derefter indtaster en ny forespørgsel, bliver de valgte facets nulstillet, og den nye søgning starter ufiltreret.

Tilføjelse af data-facets-persistent-filter="true" til snippeten ændrer denne adfærd — valgte facets bliver husket og genanvendt automatisk med hver ny forespørgsel, så besøgendes valg af filtre forbliver, mens de forfiner deres søgeterm.

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

Dette er nyttigt på søgesider, hvor besøgende ofte browser indenfor en kategori eller et brand — for eksempel at søge indenfor “Nike” og derefter forfine forespørgslen flere gange, mens det samme brandfilter bevares.

URL-filtrering #

Du kan have brug for at sende præ-filtrerede søgesider i din markedsføring, og Facets gør dette meget nemt. Ved blot at tilføje parameteren data-facets-in-url til din kategoriside-snippet, vil facets blive tilføjet til URL’en.

Når du åbner URL’en, er facets allerede valgt:

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

Du kan læse mere om de tekniske aspekter af Facets i vores udviklerdokumentation