Facets

Questa funzione intelligente di filtraggio rende estremamente facile per i visitatori trovare gli articoli giusti, anche nei set più grandi di risultati di ricerca.

Le Facet possono essere utilizzate sia nei layout della Search Page che di Omnisearch. Entrambi offrono diversi design standard per iniziare subito con un’esperienza di ricerca eccellente.

Attributi dinamici #

Quando i tuoi prodotti includono diversi set di attributi, le Facet mostreranno solo i filtri rilevanti per ogni singola ricerca.

Ad esempio, una ricerca per “laptops” mostrerà probabilmente specifiche come RAM, spazio di archiviazione, dimensione dello schermo e così via, mentre ricerche per “headphones” includeranno la loro vestibilità, funzionalità bluetooth, caratteristiche EQ e altro ancora.

Assicurati di importare solo gli attributi rilevanti per ciascun prodotto nel tuo catalogo, e le Facet saranno dinamiche per ogni ricerca.

Intervalli automatici #

Gli attributi che sono numeri verranno riconosciuti dalle facet, e visualizzati come una combinazione di un selettore di intervallo e diversi intervalli predefiniti.

Questi sono dinamici e cambieranno a seconda di ogni set di risultati. Ad esempio, se un set contiene prodotti con prezzi tra €10 - €150, i gruppi saranno probabilmente tra €10-€30 e €140+.

Per impostazione predefinita, questo è il modo in cui vengono gestiti i prezzi.

Per sviluppatori #

Le Facet fanno parte del kit UI Clerk.js che facilita l’aggiunta di funzionalità al tuo sito.

Per Omnisearch, le Facet si configurano su my.clerk.io.

Per la Search Page, sono integrate direttamente nello snippet che visualizza i risultati:

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

Facet in Liquid #

Nei design di Search Page e Omnisearch, le facet sono esposte in Liquid come facet_groups.

Questa struttura non sempre è una copia 1:1 del formato di risposta grezza dell’API, quindi quando costruisci una UI per le facet in un design, usa i campi Liquid qui sotto:

• facet_groups (array): tutti i gruppi disponibili di facet per la query corrente.
• facet_group.name: chiave interna della facet (ad esempio _price_range, brand, categories).
• facet_group.title: titolo leggibile visualizzato agli utenti.
• facet_group.selected_count: quante opzioni sono attualmente selezionate nel gruppo.
• facet_group.facets (array): tutte le opzioni nel gruppo.
• facet.value: etichetta/valore per l’opzione.
• facet.selected: se questa opzione è attualmente attiva.
• facet.count: conteggio dei risultati per l’opzione.
• facet.min / facet.max: limiti numerici dell’intervallo (rilevante soprattutto per le facet _price_range).

Esempio:

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

Parametri #

Le Facet sono composte da due parametri che vanno aggiunti allo snippet:

• data-facets-attributes: Un elenco di attributi che possono essere mostrati nelle ricerche dove sono rilevanti
• data-facets-titles: Un array di attributi e titoli associati che configura come vengono mostrati agli utenti finali.

Filtraggio URL #

Potresti voler inviare pagine di ricerca pre-filtrate nelle tue campagne di marketing, e le Facet lo rendono molto facile. Basta aggiungere il parametro data-facets-in-url allo snippet della tua pagina di categoria, e le facet verranno aggiunte all’URL.

Quando apri l’URL, le facet saranno già selezionate:

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

Puoi leggere di più sugli aspetti tecnici delle Facet nella nostra documentazione per sviluppatori