Facets

Questa funzione di filtraggio intelligente rende semplice per i visitatori trovare gli articoli giusti, anche negli insiemi più ampi di risultati Search.

Facets possono essere utilizzate sia nei layout della Search Page che di Omnisearch. Entrambi offrono diversi design standard per iniziare con una grande esperienza Search.

Attributi dinamici #

Quando i tuoi prodotti includono diversi set di attributi, Facets mostrerà solo i filtri rilevanti per ogni singola Search.

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, EQ e altro.

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

Range automatici #

Gli attributi che sono numeri saranno riconosciuti da facets e mostrati come una combinazione di un selettore di intervalli e diversi range predefiniti.

Questi sono dinamici e cambieranno in base a ciascun set di risultati. Ad esempio, se un set contiene prodotti con prezzi tra €10 e €150, i bucket spazieranno probabilmente tra €10-€30 e €140+.

Per impostazione predefinita, i prezzi vengono gestiti così.

Ordine delle Facets #

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

Afferra la maniglia puntinata di un attributo e trascinalo nella posizione desiderata. Una casella tratteggiata mostrerà dove atterrerà. Rilascia la riga per spostarla. Puoi anche selezionare una riga e premere Alt + ↑ oppure Alt + ↓; i lettori vocali annunciano lo spostamento.

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

Ordinamento valori facet #

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

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

Per sviluppatori #

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

Per Omnisearch, 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 di Search Page e Omnisearch, facets sono disponibili in Liquid come facet_groups.

Questa struttura non è sempre una copia 1:1 del formato di risposta API grezza, quindi quando crei un’interfaccia facet 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 (per esempio _price_range, brand, categories).
• facet_group.title: titolo leggibile mostrato agli utenti.
• facet_group.selected_count: quanti 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 (rilevante soprattutto 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 #

Facets sono composte da due parametri da aggiungere allo snippet:

• data-facets-attributes: Un elenco di attributi che possono essere mostrati per ricerche dove sono rilevanti
• data-facets-titles: Un array di attributi e relativi titoli che configurano 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 azzerate e la nuova ricerca parte senza filtri.

Aggiungendo data-facets-persistent-filter="true" allo snippet cambierai questo comportamento: le facets selezionate vengono ricordate e riapplicate automaticamente a ogni nuova query, così le scelte di filtro rimangono attive mentre si perfeziona 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 sulle pagine Search dove i visitatori sfogliano spesso una categoria o una marca — ad esempio, cercando all’interno di “Nike” e poi affinando la query più volte mantenendo attivo quel filtro brand.

Filtraggio via URL #

Potresti voler inviare pagine Search pre-filtrate nelle tue campagne marketing, e Facets lo rende molto semplice. Basta aggiungere il parametro data-facets-in-url allo snippet della pagina di 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 nella nostra documentazione per sviluppatori