Facets

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

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

Dynamiske attributter #

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

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

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

Automatisk interval #

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

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

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

Facet rækkefølge #

Du kan ændre rækkefølgen af facet-attributter i faceteditorens tabeller og i en Elements facetliste under dets design- eller indsætningsindstillinger.

Tag fat i en attributs prikkede håndtag og træk den til den ønskede position. En stiplede boks viser, hvor den vil lande. Slip rækken for at flytte den. Du kan også fokusere en række og trykke på Alt + ↑ eller Alt + ↓; skærmlæsere annoncerer flytningen.

Dette styrer rækkefølgen af facet-attributterne, f.eks. ved at vise brand før pris. Brug Sort-indstillingen herunder for at styre værdierne i hver facet.

Sortér facet-værdier #

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

• Most Popular Products sorterer værdier baseret på produktpopularitet.
• Numeric sorterer talbaserede attributter.
• A–Z sorterer strengattributter alfabetisk, såsom kategorier.

For udviklere #

Facets er en del af Clerk.js UI-kittet, som gør det nemt at tilføje funktionalitet på 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 det rå API-svarformat, så når du bygger facet-UI i et design, bør du bruge følgende Liquid-felter:

• facet_groups (array): alle tilgængelige facetgrupper for den aktuelle søgning.
• facet_group.name: intern facetnøgle (for eksempel _price_range, brand, categories).
• facet_group.title: brugervenlig titel, der vises til brugerne.
• facet_group.selected_count: hvor mange muligheder, der er valgt i gruppen.
• facet_group.facets (array): alle muligheder i gruppen.
• facet.value: etiket/værdi for muligheden.
• facet.selected: om denne mulighed aktuelt er aktiv.
• facet.count: antal resultater for muligheden.
• facet.min / facet.max: numeriske intervalgrænser (særligt 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 snippet’et:

• 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 tilhørende titler, der konfigurerer, hvordan de vises for slutbrugerne.

Vedvarende filtre #

Som standard vil valgte facets blive ryddet, når en besøgende vælger en facet og derefter skriver en ny søgning, og den nye søgning starter ufiltreret.

Hvis du tilføjer data-facets-persistent-filter="true" til snippet’et, ændres denne adfærd — valgte facets huskes og genanvendes automatisk med hver ny søgning, så brugerens filtervalg forbliver, mens søgetermen forfines.

<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 inden for en kategori eller brand — for eksempel at søge inden for “Nike” og herefter forfine søgningen flere gange, mens det brandfilter holdes aktivt.

URL-filtrering #

Du ønsker måske at sende forfiltrerede søgesider i din markedsføring, og Facets gør dette meget nemt. Ved blot at tilføje parameteren data-facets-in-url til dit kategorisidesnippet tilføjes facets 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 aspekter af Facets i vores udviklerdokumentation