Facets

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

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

Dynamiske attributter #

Når dine produkter har 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” vil inkludere pasform, bluetooth-funktionalitet, EQ-funktioner og mere.

Sørg for kun at importere de relevante attributter for hvert produkt i dit katalog, så Facets bliver dynamiske 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 resultatsæt. F.eks. hvis et sæt indeholder produkter, der koster mellem €10 - €150, vil intervallerne sandsynligvis spænde fra €10-€30 og €140+.

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

For udviklere #

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

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, skal du bruge Liquid-felterne nedenfor:

• facet_groups (array): alle tilgængelige facetgrupper for den aktuelle forespørgsel.
• facet_group.name: intern facet-nøgle (for eksempel _price_range, brand, categories).
• facet_group.title: menneskeligt læsbar titel vist til 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 (især 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 snippettet:

• data-facets-attributes: En liste over attributter, der kan 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 slutbrugerne.

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, vil facets blive 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 aspekter af Facets i vores udviklerdokumentation