Facets

Denne intelligente filtreringsfunktion gør det let 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 i 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 indeholder forskellige sæt 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, lagerplads, skærmstørrelse osv., mens søgninger efter “headphones” vil inkludere deres pasform, bluetooth-funktioner, EQ-funktioner og mere.

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

Automatiske intervaller #

Attributter, der er tal, genkendes af facets og vises som en kombination af et 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 intervaller sandsynligvis ligge mellem €10-€30 og €140+.

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

Rækkefølge for facets #

Først tilføj facets i Element-indstillingerne, og vælg derefter deres visningsrækkefølge.

Du kan ændre rækkefølgen af facet-attributter i facet-editor-tabellerne og i en Elements facetliste under dens design- eller indsætningsindstillinger.

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

Dette styrer rækkefølgen af facet-attributterne, såsom at vise mærke før pris. Brug indstillingen Sort nedenfor for at styre værdierne inde i hver facet.

Sortér facetværdier #

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

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

For udviklere #

Facets er en del af Clerk.js UI kit, der 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 resultater:

<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, brug følgende Liquid-felter:

• facet_groups (array): alle tilgængelige facetgrupper for den aktuelle forespørgsel.
• facet_group.name: intern facetnøgle (for eksempel _price_range, brand, categories).
• facet_group.title: læsbar titel, der vises for brugere.
• facet_group.selected_count: hvor mange muligheder der aktuelt er valgt i gruppen.
• facet_group.facets (array): alle muligheder i den gruppe.
• facet.value: etiket/værdi for muligheden.
• facet.selected: om denne mulighed aktuelt er aktiv.
• facet.count: resultatantal for muligheden.
• 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, som tilføjes til snippettet:

• data-facets-attributes: En liste over attributter, der har potentiale til at blive vist for søgninger, hvor de er relevante.
• data-facets-titles: Et array af attributter og tilhørende titler, der konfigurerer, hvordan de vises for slutbrugere.

Vedvarende filtre #

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

Tilføjes data-facets-persistent-filter="true" til snippettet, ændres denne opførsel — valgte facets huskes og genanvendes automatisk ved hver ny forespørgsel, så besøgendes filtervalg bevares, 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 inden for en kategori eller et mærke — for eksempel ved søgning inden for “Nike” og derefter forfiner forespørgslen flere gange, mens det pågældende brandfilter forbliver aktivt.

URL-filtrering #

Du vil måske 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 kategoriside-snippet, 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 udviklerdocs