Facets

Questa funzione di filtraggio intelligente rende semplice per i visitatori trovare gli articoli giusti, anche nelle pagine di categoria più grandi.

Facets può essere utilizzato quando si usa Clerk per mostrare intere pagine di categoria, rendendo facile per i visitatori restringere i risultati.

Attributi dinamici #

Quando i tuoi prodotti includono diversi set di attributi, Facets mostrerà solo i filtri rilevanti per ciascuna pagina di categoria specifica.

Ad esempio, una categoria per “laptops” probabilmente mostrerà specifiche come RAM, spazio di archiviazione, dimensione dello schermo e così via, mentre una categoria per “headphones” includerà 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 pagina in base ai prodotti presenti.

Intervalli automatici #

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

Questi sono dinamici e cambiano in base a ciascun set di risultati. Ad esempio, se un set contiene prodotti con prezzi compresi tra €10 e €150, i blocchi probabilmente andranno da €10-€30 e €140+.

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

Ordine delle facets #

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

Afferra la maniglia punteggiata di un attributo e trascinalo nella posizione desiderata. Un riquadro tratteggiato mostra dove atterrerà. Rilascia la riga per spostarla. Puoi anche focalizzare 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, piuttosto che i valori all’interno di ogni facets.

Per sviluppatori #

Facets fa parte del kit UI di Clerk.js che rende facile aggiungere funzionalità al tuo sito.

Sono integrati direttamente nello snippet che mostra i risultati:

<div id="clerk-category-filters"></div>

<span 
  class="clerk" 
  data-template="@category-page-grid" 
  data-category="156"
  data-facets-target="#clerk-category-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>

Parametri #

Facets consiste in due parametri che vengono aggiunti allo snippet:

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

Filtraggio tramite URL #

Potresti voler inviare pagine di categoria pre-filtrate nel tuo marketing, e Facets rende questa operazione molto semplice. Basta aggiungere il parametro data-facets-in-url allo snippet della tua pagina di categoria, e facets verranno aggiunti 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 sviluppatori