Facets

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

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

Attributi dinamici #

Quando i tuoi prodotti includono diversi set di attributi, Facets mostrerà solo i filtri rilevanti per ciascuna ricerca individuale.

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

Assicurati di importare solo gli attributi rilevanti per ogni prodotto nel tuo catalogo, e Facets sarà dinamico per ogni Search.

Intervalli automatici #

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

Questi sono dinamici e cambieranno a seconda di ogni insieme di risultati. Ad esempio, se un insieme contiene prodotti con prezzi tra €10 - €150, i gruppi potranno andare da €10-€30 e da €140 in su.

Per impostazione predefinita, è così che vengono gestiti i prezzi.

Ordine delle Facets #

Prima aggiungi le facets nelle impostazioni dell’Elemento, poi scegli il loro ordine di visualizzazione.

Puoi modificare l’ordine degli attributi delle facets nelle tabelle dell’editor delle facets e nell’elenco facets di un Elemento sotto le impostazioni di design o di inserimento.

Trascina la maniglia punteggiata di un attributo nella posizione desiderata. Un riquadro tratteggiato mostra dove verrà posizionato. Rilascia la riga per spostarla. Puoi anche selezionare una riga e premere Alt + ↑ o Alt + ↓; i lettori di schermo annunciano lo spostamento.

Questo controlla l’ordine degli attributi delle facets, ad esempio mostrando il brand prima del prezzo. Usa l’impostazione Sort qui sotto per controllare i valori all’interno di ciascuna facet.

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 testuali, come le categorie.

Per sviluppatori #

Le Facets fanno parte del Clerk.js UI kit che rende facile 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 mostra 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 disponibili 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 campi Liquid qui sotto:

• facet_groups (array): tutti i gruppi di facets 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 di quel gruppo.
• facet.value: etichetta/valore per l’opzione.
• facet.selected: se questa opzione è attiva.
• facet.count: numero di risultati per l’opzione.
• facet.min / facet.max: limiti di intervallo numerico (principalmente rilevante per le 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 possono essere mostrati in base alla ricerca rilevante
• data-facets-titles: Un array di attributi e titoli associati che configura come sono 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 Search inizia senza filtri.

Aggiungendo data-facets-persistent-filter="true" allo snippet, questo comportamento cambia — le facets selezionate vengono ricordate e riapplicate automaticamente a ogni nuova query, quindi le scelte di filtro del visitatore rimangono attive mentre affina il suo termine di Search.

<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 Search dove i visitatori navigano spesso all’interno di una categoria o brand — ad esempio, cercando “Nike” e affinando la query più volte mantenendo attivo il filtro brand.

Filtraggio da URL #

Potresti voler inviare pagine Search pre-filtrate nelle tue campagne marketing, e Facets rende tutto molto semplice. Aggiungendo semplicemente il parametro data-facets-in-url allo snippet della pagina categoria, le facets saranno 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