Omnisearch

• Risultati in tempo reale vengono mostrati ai tuoi visitatori mentre digitano e includono prodotti, categorie e pagine.
• Ordinamento e filtro: per permettere ai visitatori di perfezionare la ricerca in modo intuitivo e semplice.
• Facile da integrare nel tuo sito usando uno dei nostri ottimi template di partenza.
• Si adatta al tuo brand modificando alcune impostazioni standard come logo, font, colori e altro ancora.
• Completamente personalizzabile con HTML, CSS e Liquid per sviluppatori.

Iniziare #

Omnisearch è composto da un Design personalizzabile per la parte visiva e un blocco Element che permette di installarlo sul tuo sito.

Creare un design #

Questo viene fatto in Search > Designs > New Design

Seleziona il tipo Omnisearch, scegli un design di partenza e attribuiscigli un nome.

Clicca su Save & Close per finalizzare il design standard.

I nostri design standard funzionano subito e possono essere sempre modificati successivamente. Le modifiche richiedono conoscenze di HTML, CSS e Liquid. Consulta Styling in questa guida per ulteriori informazioni.

Creare un Element #

Questo viene fatto in Search > Element > New Element

I blocchi Element sono contenitori per gli elementi che crei nel tuo account my.clerk.io. Contengono la logica per mostrare i risultati e le impostazioni per quanti risultati visualizzare. La logica di stato vuoto può anche essere modificata tramite Rules.

• Nome ti aiuta a identificare il tuo elemento se desideri crearne più di uno. Può essere modificato successivamente.

• Tipo di Element è Omnisearch per impostazione predefinita e non dovrebbe essere cambiato. Qui puoi anche aggiungere filtri se necessario, ma per la maggior parte delle configurazioni non è richiesto.

• Empty State Logic ti permette di selezionare il tipo di prodotti da mostrare quando Omnisearch viene aperto inizialmente, prima che venga digitata qualsiasi parola. Per impostazione predefinita è Bestsellers ma può anche essere personalizzato, ad esempio con Visitor Recommendations.

Finalizzare il Design #

Il design attraverso cui viene reso il blocco Element. Seleziona il design creato.

Se il tuo design include delle variabili, è possibile impostarle anche qui.

Puoi controllare il numero di risultati da mostrare per ogni tipo, ogni volta che viene effettuata una ricerca. Generalmente consigliamo queste quantità:

• Prodotti: 20-60
• Suggerimenti: 5
• Categorie & pagine: 10

Infine, scegli gli attributi che vuoi includere come Facet e imposta i nomi con cui devono essere visualizzati nei risultati di ricerca. Se non trovi un attributo specifico nell’elenco, aggiungilo nella lista “attributi filtrabili”, in Search Configuration.

Inserimento nel sito #

Visibilità serve per controllare chi può vedere Omnisearch.

• In preview ti permette di testare il tuo elemento senza influenzare il sito live. Puoi aprire il sito in preview cliccando “Open site in preview” oppure aggiungendo ?clerk_content_mode=preview all’URL del tuo sito.

• Nel mio sito live viene utilizzato quando hai finito i test e sei pronto per renderlo pubblico.

Utilizzo dell’injection #

Questo è il modo più semplice per installare. Clerk aggiungerà automaticamente il codice Omnisearch al tuo sito, puntando a un campo di ricerca a tua scelta e attivandosi in base a un evento.

• Evento controlla cosa deve fare l’utente per attivare Omnisearch. Probabilmente vorrai che venga visualizzato quando i visitatori cliccano sull’icona di ricerca o sul campo di input.

• Elemento decide la parte del sito web con cui l’utente deve interagire. Ad esempio, se desideri che il tuo elemento Omnisearch venga visualizzato solo quando i visitatori interagiscono con la barra di ricerca (clic o focus), devi semplicemente trovare il CSS selector unico applicato ad essa. Se hai identificatori diversi per mobile e desktop, aggiungili entrambi.

Trova il tuo CSS selector unico in questo modo:

1. Ispeziona il codice del tuo sito. Nella maggior parte dei browser puoi fare clic destro ovunque e scegliere Ispeziona o simili.
2. Trova l’elemento che vuoi targettizzare
3. Fai clic destro su di esso e trova l’opzione copia > copia selettore

Utilizzo del codice embedded #

Se hai delle modifiche non salvate, salvale per generare il codice embed.

Copia questo codice e incollalo nel file che genera tutte le pagine del webshop, idealmente vicino alla fine del tag </body>.

Sostituisci INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH con il CSS selector dell’elemento html che deve attivare Omnisearch.

Qui sotto un esempio completo di codice embed di Omnisearch con tutte le opzioni di configurazione:

<span class="clerk"
    data-template="@omnisearch"
    data-api="search/omni"
    data-trigger-element="INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH"
    data-limit="40"
    data-suggestions="6"
    data-categories="6"
    data-pages="6"
    data-omni-search-suggestions="6"
    data-omni-search-categories="6"
    data-omni-search-pages="6"
    data-omni-search-empty="recommendations/popular">
</span>

Configurazione del design #

La maggior parte di Omni-search può essere configurata modificando le variabili presenti nei file di design.

Nel linguaggio template liquid, una variabile ha una struttura come questa:

{% assign variable_name = "variable value" %}

Come regola generale, per configurare Omni-search bisogna modificare solo il valore della variabile.

Gli utenti più tecnici possono ovviamente modificare anche specifiche linee di HTML e CSS, consulta questa sezione.

Logo #

Per aggiungere il logo al design di Omni-search, trova semplicemente l’URL dell’immagine e inseriscila nel valore della variabile: os_brand_logo.

La variabile è solitamente chiamata os_brand_logo, e dovrebbe apparire così una volta incollato il logo:

Caricamento infinito/automatico #

Se vuoi controllare se Omni-search deve caricare automaticamente più risultati prodotto quando l’utente scorre fino all’ultima riga di prodotti, la variabile deve essere impostata su true o false. La variabile si chiama di solito os_autoload. In questo esempio, Omni-search non carica automaticamente altri prodotti.

Traduzioni #

Per impostazione predefinita, il template è in inglese. Se hai un negozio in un’altra lingua, puoi tradurre gli elementi di testo semplicemente cambiando il valore delle variabili.

Questo esempio mostra le variabili per il pulsante di ordinamento:

Protip: Usa una AI generativa (ad es. chatGPT) per la traduzione massiva scrivendo “Translate these variable values from English to Danish. Return the full code back so it can be copy/pasted to replace the existing code: PASTE_VARIABLES_HERE”

Styling #

Per modificare qualsiasi aspetto grafico, la configurazione può essere fatta nelle variabili CSS.

I template usano variabili CSS che hanno una struttura come questa:

--variable_name: variable_value;

Per utenti più tecnici, le singole regole CSS possono essere modificate per apportare cambiamenti grafici complessi.

Colori #

I colori configurabili si trovano e si modificano nella sezione sotto il commento CSS “Colors”
/* Colors */

Font #

Similmente ai colori, la variabile dei font si trova sotto il commento /* Font */.

Solitamente ha una variabile del tipo: --font-family: 'Kumbh Sans', sans serif;

Per sviluppatori #

Styling #

I design sono costituiti da un layout principale, CSS styling e una serie di sub-design che possono essere richiamati dal layout principale.

Puoi modificarli tutti separatamente per Desktop e Mobile. Per impostazione predefinita, Omni-search usa lo stesso HTML per tutte le dimensioni degli schermi e utilizza il CSS per essere completamente responsive. Per questo motivo la tab Mobile inizialmente è vuota.

Se necessario, puoi creare un markup HTML completamente diverso per Mobile, che verrà usato sugli schermi più piccoli.

All’inizio, puoi voler solo sistemare alcuni dettagli per allineare il design alla tua brand identity – Potrai sempre modificarlo in seguito.

HTML #

È il layout principale che gestisce il posizionamento di tutti gli elementi. Utilizza Liquid come linguaggio di templating.

Nei nostri design di partenza, la prima sezione è dedicata agli elementi più spesso modificati, come label per l’ordinamento, valuta e i diversi testi che puoi tradurre nella tua lingua.

CSS #

Lo styling che verrà iniettato con l’HTML, dandoti pieno controllo sull’aspetto visivo in modo contenuto.

Sub-design disponibili #

Qualsiasi design aggiunto qui può essere richiamato nella struttura generale. Funzionano come moduli modificabili separatamente e vengono aggiunti con il loro ID e nome: {{@247373 - TopBarSearchForm}}

Puoi eliminare, duplicare o copiare il riferimento di qualsiasi sub-design cliccando sul pulsante a tre puntini.

Per modificare un sub-design, clicca sull’icona Edit. Una volta modificato, clicca su Save & close per tornare all’editor del layout principale.

Alcuni elementi necessitano di identificatori specifici, come:

• Il campo input id="clerk-omnisearch-input"
• Il content wrapper id="clerk-omnisearch-content"

Ogni volta che vuoi controllare i tuoi progressi, puoi farlo cliccando sul pulsante “Preview design”.

Le modifiche più frequenti ai design sono queste:

• Logo: Accedi al TopBarSearchForm e sostituisci il logo predefinito con il tuo.

• Font: Se necessario, modifica i font per allinearli allo stile del tuo sito.

• Colori: Puoi inserire i colori del tuo brand negli elementi che desideri enfatizzare o uniformare con il resto del sito come pulsanti e tag.

• Bordi di pulsanti e tag: Puoi modificarne colore, raggio, larghezza…

• Link: Se hai uno stile specifico per i link, puoi modificarlo.

Struttura dell’overlay #

Quando omnisearch viene avviato, crea un elemento con la classe clerk-omnisearch-overlay che viene iniettato a fondo pagina.

Qui sarà inserito il design; poiché abbiamo l’elemento input all’interno del design stesso, è necessario strutturare in modo che l’input non venga renderizzato ad ogni caricamento. La struttura deve essere la seguente sotto la overlay:

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

Campo di input #

Per individuare il campo di input occorre che abbia l’identificatore clerk-omnisearch-input. Una volta attivato il trigger element, il focus del cursore viene spostato su questo elemento e gli viene aggiunta la query, così da mantenere un’esperienza utente fluida.

Wrapper del contenuto #

Il wrapper dei contenuti è dove avviene la maggior parte delle operazioni; il contenitore attorno ad esso deve avere l’identificatore clerk-omnisearch-content. Qui dovrebbero esserci facets, sliders e tutto ciò che non è il campo di input.

Classi #

La funzionalità può essere aggiunta al design inserendo classi specifiche negli elementi.

Pulsante di chiusura #

clerk-omnisearch-close

Dettagliando la classe a un elemento all’interno del design, quell’elemento nasconde l’overlay.

Ordinamento #

clerk-omnisearch-sort

Trova i dropdown di ordinamento e vi aggiunge i listener.

Per avere un elemento di ordinamento nel design, aggiungilo all’elemento selezionato, ad esempio un menù a tendina. Per funzionare, l’elemento deve essere del tipo value:[desc|asc], cioè il valore da ordinare, i due punti e poi desc o asc. In modo opzionale, puoi aggiungere l’attributo data-sort-type se vuoi ordinare categorie o pagine.

Facet di ricerca #

clerk-facet-search

Se è presente una ricerca facet, crea un listener e nasconde le facet che non corrispondono alla query.

La classe, se presente in una pagina, controlla l’esistenza di elementi facet search. I facet search forniscono un modo per cercare nelle facet. Per funzionare, l’elemento deve avere un valore stringa.

Clear completo #

clerk-omnisearch-full-reset

Se cliccati, gli elementi con questa classe resettano tutte le facet selezionate e la query.

Clear facet #

clerk-omnisearch-facet-full-reset

Al click, gli elementi con questa classe deselezionano tutte le facet attive. Tipicamente si trova su un pulsante “Clear all” all’interno di un gruppo di facet, per consentire all’utente di azzerare i filtri selezionati in un’unica azione.

Clear di gruppo #

clerk-omnisearch-facet-group-reset

Al click, gli elementi con questa classe deselezionano tutti i child elementi all’interno del gruppo.

Per fornire la funzionalità di deselezionare un intero gruppo di facet, un elemento può ricevere questa classe. Una volta attivato (es. con un click), tutti gli elementi del gruppo vengono deselezionati, resettando quel gruppo facet. Per funzionare, l’elemento deve avere il gruppo da resettare come attributo col nome data-facet-group.

Clear di una facet #

clerk-omnisearch-facet-reset

Gli elementi con questa classe devono deselezionare un singolo elemento della coppia attributo gruppo/valore specificata.

Questa classe è pensata per scenari dove serve deselezionare una singola facet. Un elemento con questa classe può essere associato a una precisa facet di un gruppo assegnandogli sia data-facet-group che data-facet-value. Alla sua attivazione, deselezionerà solo la facet collegata, lasciando inalterate le altre selezionate.

Facet click #

clerk-facet

Gli elementi con questa classe verranno trattati come facet selezionabili.

Tutte le facet devono avere la classe e gli attributi data-facet-group e data-facet-value, così da sapere cosa sta selezionando il cliente.