Creare il tuo design omnisearch

Struttura di sovrapposizione

Quando omnisearch viene avviato, crea un elemento con la classe clerk-omnisearch-overlay e viene iniettato nella parte inferiore del corpo. È qui che inietteremo il progetto, poiché abbiamo l’elemento di input come parte del progetto, dobbiamo avere una richiesta strutturale per assicurarci di non renderizzare nuovamente l’elemento di input a ogni caricamento. La struttura dovrebbe avere il seguente aspetto sotto l’overlay:

<div>
    <input type="text" id="clerk-omnisearch-input"/>

    <div id="clerk-omnisearch-content">
        Contenuto!
   </div>

</div>

Input field

Per trovare il campo di input, deve avere il seguente identificatore clerk-omnisearch-input. Una volta che l’elemento trigger è stato attivato, spostiamo il focus del cursore su questo elemento e aggiungiamo qualsiasi query ad esso, in modo da mantenere l’esperienza dell’utente in qualche modo continua.

Avvolgitore di contenuto

Il content wrapper è il luogo in cui avviene la maggior parte delle cose; il wrapper che lo circonda deve avere l’identificatore clerk-omnisearch-content. Qui dovrebbero esserci le faccette, i cursori e tutto ciò che non è il campo di input.

Classi e loro funzionalità

Panoramica

È possibile aggiungere funzionalità al progetto aggiungendo classi specifiche agli elementi.

Dettagli

Pulsante di chiusura

Quando si collega la classe clerk-omnisearch-close a un elemento all’interno del disegno, tale elemento nasconderà la sovrapposizione.

Ordinamento

Per ottenere un elemento di ordinamento nel disegno, aggiungere la classe clerk-omnisearch-sort all’elemento di selezione, ad esempio un menu a tendina. Per funzionare, l’elemento deve essere del tipo value:[desc|asc], quindi il valore che vogliamo ordinare, con i due punti e poi desc o asc. Opzionalmente, si può aggiungere un attributo data-sort-type se si vuole che l’ordinamento avvenga per categorie o pagine.

Facet di ricerca

La classe clerk-facet-search, se presente in una pagina web, controlla l’esistenza di elementi di ricerca a faccette. Le ricerche per faccette forniscono agli utenti un modo per effettuare ricerche nelle faccette. Per funzionare, l’elemento deve avere un valore stringa.

Cancella tutto

Gli elementi con la classe clerk-omnisearch-full-reset, se cliccati, cancellano tutte le sfaccettature selezionate e resettano la query.

Cancella sfaccettature

Gli elementi con la classe clerk-omnisearch-facet-full-reset, se attivati, deselezionano tutte le sfaccettature attive. Questo si vedrebbe tipicamente su un pulsante in stile “Cancella tutto” all’interno di un gruppo di sfaccettature, consentendo agli utenti di resettare i filtri selezionati con un’unica azione.

Deselezione di un gruppo

Per fornire la funzione di deselezione di un intero gruppo di sfaccettature, è possibile assegnare a un elemento la classe clerk-omnisearch-facet-group-reset. Una volta che l’elemento viene attivato (ad esempio, cliccato), tutti gli elementi del suo gruppo vengono deselezionati, azzerando il gruppo di sfaccettature. Perché funzioni, l’elemento deve avere il gruppo che si vuole cancellare come attributo con il nome data-facet-group.

Cancellazione della sfaccettatura

Questa classe è pensata per gli scenari in cui è necessario deselezionare una singola sfaccettatura. Un elemento con la classe clerk-omnisearch-facet-reset può essere associato a una sfaccettatura specifica in un gruppo, dandogli sia un data-facet-group che un data-facet-value. All’attivazione, deselezionerà solo la sfaccettatura associata in base alla coppia di attributi gruppo/valore, lasciando invariate le altre sfaccettature selezionate.

Facet Click

Tutte le sfaccettature dovrebbero avere una classe clerk-facet con gli attributi data-facet-group e data-facet-value, in modo da sapere cosa sta premendo il cliente.