Facets

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

Le Facets possono essere utilizzate sia nei layout di Search Page che di 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 loro 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 ricerca.

Intervalli automatici #

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

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

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

Per gli sviluppatori #

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

Per Omnisearch, le Facets vengono 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, le facets sono esposte in Liquid come facet_groups.

Questa struttura non è sempre una copia 1:1 del formato della risposta raw dell’API, quindi quando costruisci una UI facet in un design, utilizza i seguenti campi Liquid:

• facet_groups (array): tutti i gruppi di 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: numero di risultati per l’opzione.
• facet.min / facet.max: estremi dell’intervallo numerico (rilevante principalmente 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: Un elenco di attributi che potrebbero essere mostrati nelle ricerche in cui 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 cambi questo comportamento — le facets selezionate vengono memorizzate e riapplicate automaticamente ad ogni nuova query, così le scelte di filtro del visitatore rimangono 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 search dove i visitatori si muovono spesso all’interno di una categoria o brand — ad esempio, cercando all’interno di “Nike” e poi affinando più volte la query mantenendo attivo il filtro brand.

Filtraggio tramite URL #

Potresti voler inviare pagine di search già filtrate nelle tue campagne marketing, e Facets rende questa operazione 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 di Facets nella nostra documentazione per sviluppatori