Omnisearch

• Risultati in tempo reale vengono mostrati ai tuoi visitatori mentre digitano e includono prodotti, categorie e pagine.
• Ordinamento e filtraggio: per consentire ai tuoi visitatori di affinare la loro ricerca in modo intuitivo e semplice.
• Facile da integrare nel tuo sito utilizzando uno dei nostri fantastici modelli di partenza.
• Si adatta al tuo marchio attraverso la modifica di alcune impostazioni standard come logo, caratteri, colori e altro.
• È completamente personalizzabile con HTML, CSS e Liquid per sviluppatori.

Iniziare #

Omnisearch consiste in un Design personalizzabile per i visual e un blocco di Contenuto che consente di essere installato sul tuo sito.

Creare un design #

Questo si fa in Search > Designs > New Design

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

Clicca Save & Close per finalizzare il design standard.

I nostri design standard funzionano subito e possono sempre essere modificati in seguito. La modifica richiede conoscenze di HTML, CSS e Liquid. Controlla Stilizzazione in questa guida per ulteriori informazioni.

Creare un Contenuto #

Questo si fa in Search > Content > New Content

I blocchi di contenuto sono contenitori per gli elementi che crei nel tuo account my.clerk.io. Contengono la logica per mostrare i risultati e le impostazioni su quanti risultati mostrare.

• Nome ti aiuta a identificare il tuo contenuto nel caso tu voglia crearne più di uno. Può essere modificato in seguito.

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

• Logica dello stato vuoto ti consente di selezionare il tipo di prodotti da visualizzare quando Omnisearch viene aperto inizialmente, prima che vengano digitati parole. Per impostazione predefinita, questo è Bestsellers ma può anche essere personalizzato, ad esempio con Raccomandazioni per i visitatori.

Finalizza Design #

Il design per rendere il blocco di contenuto. Seleziona il design che hai creato.

Se il tuo design include variabili, possono essere impostate qui.

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

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

Infine, scegli gli attributi che desideri includere come Facets e imposta i nomi con cui dovrebbero essere visualizzati nei risultati di ricerca. Se non riesci a trovare un attributo specifico nell’elenco, aggiungilo nell’elenco “attributi filtrabili”, in Configurazione della ricerca.

Inserimento nel sito #

Visibilità viene utilizzata per controllare chi può vedere l’Omnisearch.

• In anteprima ti consente di testare il tuo contenuto senza influenzare il tuo sito live. Puoi aprire il tuo sito in anteprima cliccando su “Apri sito in anteprima” o aggiungendo ?clerk_content_mode=preview all’URL del tuo sito.

• Nel mio sito live viene utilizzato quando hai finito di testare e sei pronto a renderlo pubblico.

Utilizzare l’iniezione #

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

• Evento controlla cosa deve fare l’utente per attivare l’Omnisearch. È probabile che tu voglia che venga visualizzato quando i tuoi visitatori cliccano sulla tua 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 contenuto Omnisearch venga visualizzato solo quando i tuoi visitatori interagiscono con la tua barra di ricerca (clic o messa a fuoco), devi solo trovare il selettore CSS unico applicato ad esso. Se hai identificatori diversi su mobile e desktop, aggiungili entrambi.

Trova il tuo selettore CSS unico in questo modo:

1. Ispeziona il codice del tuo sito. Nella maggior parte dei browser puoi fare clic con il tasto destro su qualsiasi punto della tua pagina e scegliere Ispeziona o simile.
2. Trova l’elemento che desideri mirare
3. Fai clic con il tasto destro su di esso e trova l’opzione copia > copia selettore

Utilizzare il codice incorporato #

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

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 selettore CSS dell’elemento HTML che dovrebbe attivare il tuo Omnisearch.

Configurazione del design #

La maggior parte dell’Omni-search può essere configurata modificando le variabili che si trovano nei file di design.

Nel linguaggio di template Liquid, una variabile ha una struttura simile a questa:

{% assign variable_name = "variable value" %}

Come regola generale, solo il valore della variabile dovrebbe essere cambiato per configurare l’Omni-search.

Gli utenti più tecnici possono ovviamente ancora modificare linee HTML e CSS specifiche, vedere questa sezione.

Logo #

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

La variabile è tipicamente chiamata qualcosa come os_brand_logo, e dovrebbe apparire così una volta che il logo è stato incollato:

Caricamento infinito/automatico #

Se desideri controllare se l’Omni-search dovrebbe caricare automaticamente più risultati di prodotto, una volta che l’utente ha scorrendo all’ultima riga di prodotti, la variabile dovrebbe essere impostata su true o false. La variabile è tipicamente chiamata os_autoload. In questo esempio, l’Omni-search non carica automaticamente più risultati di prodotto.

Traduzioni #

Per impostazione predefinita, il template è in inglese. Se hai un negozio che ha una lingua diversa, puoi tradurre gli elementi di testo modificando i valori delle variabili.

Questo esempio mostra le variabili per il pulsante di ordinamento:

Protip: Usa l’IA generativa (ad es. chatGPT) per tradurre in blocco scrivendo “Traduci questi valori di variabile dall’inglese al danese. Restituisci il codice completo in modo che possa essere copiato/incollato per sostituire il codice esistente: PASTE_VARIABLES_HERE”

Stilizzazione #

Per cambiare qualsiasi stile, la configurazione può essere effettuata nelle variabili CSS.

I template utilizzano variabili CSS che hanno una struttura simile a questa:

--variable_name: variable_value;

Per gli utenti più tecnici, le singole regole CSS possono essere modificate per apportare modifiche di design più complesse.

Colori #

I colori configurabili possono essere identificati e configurati nella sezione sotto il commento CSS “Colori” /* Colors */

Caratteri #

Simile ai colori, la variabile del carattere può essere trovata sotto il commento /* Font */.

Tipicamente ha una variabile come: --font-family: 'Kumbh Sans', sans serif;

Per sviluppatori #

Stilizzazione #

I design consistono in un layout principale, stilizzazione CSS e un insieme di sotto-design che possono essere referenziati nel layout principale.

Puoi modificare tutti questi separatamente per Desktop e Mobile. Per impostazione predefinita, l’Omni-search utilizza lo stesso HTML per tutte le dimensioni dello schermo e utilizza CSS per essere completamente reattivo. Questo è il motivo per cui la scheda Mobile non ha codice da cui partire.

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

Inizialmente, potresti voler solo regolare alcune cose per far corrispondere il design all’aspetto e alla sensazione del tuo marchio - Puoi sempre modificare il tuo design in seguito.

HTML #

Questo è il layout principale che controlla le posizioni di tutti gli elementi. Utilizza Liquid come linguaggio di templating.

Nei nostri design di partenza, la prima sezione è dedicata agli elementi più comunemente modificati, come le etichette di ordinamento, la valuta e i vari testi che puoi tradurre nella tua lingua.

CSS #

Stilizzazione che verrà iniettata con l’HTML, dandoti il pieno controllo sui visual in modo contenuto.

Sotto-design disponibili #

Qualsiasi design aggiunto qui può essere referenziato nel layout generale. Funzionano come moduli che vengono modificati separatamente e vengono aggiunti con il loro ID e nome: {{@247373 - TopBarSearchForm}}

Puoi eliminare, duplicare e copiare il riferimento di qualsiasi sotto-design facendo clic sul pulsante con i tre punti.

Per modificare un sotto-design, fai clic sulla sua icona Modifica. Una volta terminata la modifica, fai clic su Salva e chiudi, per tornare all’editor del layout principale.

Al alcuni elementi necessitano identificatori specifici, come:

• Il campo di input id="clerk-omnisearch-input"
• Il contenitore del contenuto id="clerk-omnisearch-content"

Ogni volta che desideri controllare i tuoi progressi, puoi farlo facendo clic sul pulsante “Anteprima design”.

Le modifiche più frequenti apportate ai design sono queste:

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

• Caratteri: Se necessario, regola i caratteri per corrispondere all’aspetto e alla sensazione del tuo sito.

• Colori: Puoi aggiungere i colori del tuo marchio in quegli elementi che desideri enfatizzare o armonizzare con il resto del tuo sito come pulsanti e tag.

• Pulsanti e bordi dei tag: Puoi regolare il loro colore, raggio, larghezza…

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

Struttura dell’overlay #

Quando l’Omnisearch viene avviato, crea un elemento con la classe clerk-omnisearch-overlay e viene iniettato nella parte inferiore del body.

Qui inietteremo il design, poiché abbiamo l’elemento di input come parte del design, dobbiamo avere requisiti strutturali per garantire di non ri-renderizzare l’elemento di input ad ogni caricamento. La struttura dovrebbe apparire come segue sotto l’overlay:

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

Campo di input #

Per trovare il campo di input deve avere il seguente identificatore clerk-omnisearch-input. Una volta che l’elemento di attivazione è stato attivato, sposteremo il cursore su questo elemento e aggiungeremo qualsiasi query abbiamo, in modo da mantenere l’esperienza utente abbastanza fluida.

Contenitore del contenuto #

Il contenitore del contenuto è dove avviene la maggior parte delle cose, il contenitore attorno ad esso deve avere l’identificatore clerk-omnisearch-content. Qui dovrebbero esserci i faccetti, i cursori e tutto il resto che non è il campo di input.

Classi #

La funzionalità può essere aggiunta al design aggiungendo classi specifiche agli elementi.

Pulsante di chiusura #

clerk-omnisearch-close

Quando si attacca la classe a un elemento all’interno del design, quell’elemento nasconderà l’overlay.

Ordinamento #

clerk-omnisearch-sort

Trova i menu a discesa di ordinamento e aggiunge ascoltatori a essi.

Per ottenere un elemento di ordinamento nel design, aggiungi questo all’elemento selezionato, ad esempio un menu a discesa. Per funzionare, l’elemento deve essere il seguente value:[desc|asc], quindi il valore che vogliamo ordinare, con un due punti e poi o desc o asc. Facoltativamente puoi aggiungere un attributo data-sort-type se desideri che ordini categorie o pagine.

Ricerca Facet #

clerk-facet-search

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

La classe, quando presente in una pagina web, controlla l’esistenza di eventuali elementi di ricerca facet. Le ricerche facet forniscono un modo per gli utenti di cercare nelle faccette. Per funzionare, l’elemento deve avere un valore stringa.

Ripristino completo #

clerk-omnisearch-full-reset

Quando viene cliccato, gli elementi con la classe cancelleranno tutte le faccette selezionate e ripristineranno la query.

Ripristino faccette #

clerk-omnisearch-facet-full-reset

Quando viene cliccato, gli elementi con la classe deselezioneranno tutte le faccette attive. Questo sarebbe tipicamente visto su un pulsante di ‘Cancella tutto’ all’interno di un gruppo di faccette, consentendo agli utenti di ripristinare i loro filtri selezionati in un’azione semplice.

Ripristino gruppo #

clerk-omnisearch-facet-group-reset

Quando viene cliccato, gli elementi con questa classe deselezioneranno tutti gli elementi figli all’interno del gruppo.

Per fornire la funzionalità di deselezionare un intero gruppo di faccette, un elemento può essere dato la classe. Una volta che l’elemento è attivato (ad es. cliccato), tutti gli elementi all’interno del suo gruppo diventano deselezionati, ripristinando quel gruppo di faccette. Per funzionare, l’elemento deve avere il gruppo che vogliamo cancellare come attributo con il nome data-facet-group.

Ripristino faccetta #

clerk-omnisearch-facet-reset

Gli elementi con questa classe devono deselezionare un singolo elemento con il dato gruppo/valore attributo.

Questa classe è progettata per scenari in cui è necessario deselezionare una singola faccetta. Un elemento con la classe può essere associato a una faccetta specifica in un gruppo dandogli sia un data-facet-group che un data-facet-value. Una volta attivato, deselezionerà solo la sua faccetta associata in base al dato gruppo/valore attributo, lasciando inalterate le altre faccette selezionate.

Clic sulla faccetta #

clerk-facet

Gli elementi con questa classe saranno trattati come una faccetta selezionabile.

Tutte le faccette dovrebbero avere una classe con gli attributi data-facet-group e data-facet-value, così sappiamo cosa sta premendo il cliente.