Facets

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

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

Attributi dinamici #

Quando i tuoi prodotti includono vari set di attributi, le Facets 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 vestibilità, funzionalità bluetooth, caratteristiche EQ e altro.

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

Intervalli automatici #

Gli attributi che sono numeri verranno riconosciuti dalle facets e mostrati come 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 prezzo tra €10 e €150, i gruppi probabilmente andranno da €10-€30 e da €140+.

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

Ordina i valori delle facets #

Puoi controllare l’ordine dei valori all’interno di ogni facet direttamente in my.clerk.io. Nelle impostazioni delle Facets, seleziona un’opzione dalla colonna Sort per ogni attributo.

• Most Popular Products ordina i valori in base alla popolarità dei prodotti.
• Numeric ordina gli attributi numerici.
• A–Z ordina alfabeticamente gli attributi di tipo stringa, come le categorie.

Per sviluppatori #

Le Facets fanno parte del kit UI Clerk.js che rende semplice aggiungere funzionalità al tuo sito.

Per Omnisearch, le Facets sono configurate in 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>

Facets in Liquid #

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

Questa struttura non è sempre una copia 1:1 del formato della risposta API grezza, quindi quando costruisci l’interfaccia delle facets in un design, usa i seguenti campi Liquid:

• facet_groups (array): tutti i gruppi facet disponibili per la query corrente.
• facet_group.name: chiave interna della facet (ad esempio _price_range, brand, categories).
• facet_group.title: titolo leggibile mostrato agli utenti.
• facet_group.selected_count: quante opzioni sono attualmente selezionate nel gruppo.
• facet_group.facets (array): tutte le opzioni in quel 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 (principalmente per facets _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 Facets sono composte da due parametri che vengono aggiunti allo snippet:

• data-facets-attributes: Una lista di attributi che hanno il potenziale di 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.

Filtri persistenti #

Per impostazione predefinita, quando un visitatore seleziona una facet e poi digita una nuova query, le facets selezionate vengono cancellate e la nuova ricerca parte senza filtri.

Aggiungendo data-facets-persistent-filter="true" allo snippet si cambia questo comportamento – le facets selezionate vengono ricordate e riapplicate automaticamente ad ogni nuova query, così le scelte di filtro del visitatore restano attive mentre affina il termine di ricerca.

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

Questo è utile nelle pagine di ricerca dove i visitatori spesso navigano all’interno di una categoria o marca — per esempio, cercando all’interno di “Nike” e poi affinando la query più volte mantenendo attivo quel filtro marca.

Filtraggio via URL #

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

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

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

Puoi leggere di più sugli aspetti tecnici delle Facets nei nostri developer docs