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 på Search Page og Omnisearch layouts. Begge disse kommer med flere standarddesigns, der hjælper dig i gang med en fantastisk søgeoplevelse.

Dynamiske attributter #

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

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

Sørg for kun at importere de relevante attributter for hvert produkt i dit katalog, så vil Facets være dynamisk for hver søgning.

Automatiske intervaller #

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

Disse er dynamiske og vil ændre sig afhængigt af hvert resultat. F.eks. hvis et sæt indeholder produkter til en pris mellem €10 - €150, vil intervallerne sandsynligvis ligge mellem €10-€30 og €140+.

Som standard håndteres priser på denne måde.

Sortering af facet-værdier #

Du kan styre rækkefølgen af værdier i hver facet direkte i my.clerk.io. I Facets-indstillingerne vælger du en mulighed fra Sort-kolonnen for hver attribut.

• Most Popular Products sorterer værdier baseret på produkternes popularitet.
• Numeric sorterer talbaserede attributter.
• A–Z sorterer streng-attributter alfabetisk, såsom kategorier.

For udviklere #

Facets er en del af Clerk.js UI-kittet, som gør det nemt at tilføje funktionalitet til dit site.

For Omnisearch konfigureres Facets i my.clerk.io.

For Search Page er de integreret direkte i det snippet, der 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, eksponeres facets i Liquid som facet_groups.

Denne struktur er ikke altid en 1:1 kopi af API’ens rå response format, så når du bygger facet-UI i et design, skal du bruge Liquid-felterne nedenfor:

• facet_groups (array): alle tilgængelige facet-grupper for den aktuelle søgning.
• facet_group.name: intern facet-nøgle (for eksempel _price_range, brand, categories).
• facet_group.title: læsevenlig titel, der vises for brugeren.
• facet_group.selected_count: hvor mange muligheder der pt. er valgt i gruppen.
• facet_group.facets (array): alle muligheder i gruppen.
• facet.value: label/værdi for muligheden.
• facet.selected: om denne mulighed pt. er aktiv.
• facet.count: antal resultater for muligheden.
• facet.min / facet.max: numerisk interval (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 over attributter, der potentielt kan vises for søgninger, hvor de er relevante
• data-facets-titles: Et array af attributter og tilknyttede titler, der bestemmer, hvordan de vises for slutbrugeren.

Vedvarende filtre #

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

Hvis du tilføjer data-facets-persistent-filter="true" til snippeten, ændrer det denne adfærd — valgte facets huskes og bliver automatisk genanvendt ved hver ny forespørgsel, så besøgendes filtervalg bibeholdes, når søgetermen tilpasses.

<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 navigerer inden for en kategori eller et brand — fx ved at søge inden for “Nike” og så tilpasse søgningen flere gange, mens brandfilteret bevares.

URL-filtrering #

Du kan ønske at sende forfiltrerede søgesider i din markedsføring, og Facets gør dette meget let. Ved blot at tilføje parameteren data-facets-in-url til dit kategori-side snippet, bliver facets tilføjet til URL’en.

Når du åbner URL’en, vil facets allerede være valgt:

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

Du kan læse mere om de tekniske detaljer om Facets i vores udvikler-dokumentation