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 modificando 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 Elemento 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 immediatamente e possono sempre essere modificati in seguito. La modifica richiede conoscenze di HTML, CSS e Liquid. Controlla Stile in questa guida per ulteriori informazioni.

Creare un Elemento #

Questo si fa in Search > Element > New Element

I blocchi Elemento 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 mostrare. La logica dello stato vuoto può anche essere manipolata tramite Regole.

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

• Tipo di elemento è Omnisearch per impostazione predefinita e non dovrebbe essere cambiato. Qui puoi anche aggiungere filtri se necessario, ma per la maggior parte delle configurazioni questo 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 è Best Seller ma può anche essere personalizzato, ad esempio con Raccomandazioni per i visitatori.

Finalizza Design #

Il design per rendere il blocco Elemento. 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. In generale, 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 elemento 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 elemento Omnisearch venga visualizzato solo quando i tuoi visitatori interagiscono con la tua barra di ricerca (cliccando o focalizzandosi su di essa), devi solo trovare il selettore CSS unico applicato ad essa. 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 ovunque sulla 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 = "variabile valore" %}

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 specifiche di HTML e CSS, vedere questa sezione.

Logo #

Per aggiungere il logo al design dell’Omni-search, basta trovare l’URL dell’immagine e metterlo nel valore per la 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 fino 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’AI generativa (ad es. chatGPT) per tradurre in blocco scrivendo “Traduci questi valori di variabili dall’inglese al danese. Restituisci il codice completo in modo che possa essere copiato/incollato per sostituire il codice esistente: INCOLLA_VARIABILI_QUI”

Stile #

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 regole CSS individuali 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” /* Colori */

Font #

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

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

Per sviluppatori #

Stile #

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

Puoi modificare tutti questi per Desktop e Mobile separatamente. 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 il posizionamento 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 etichette di ordinamento, valuta e i vari testi che puoi tradurre nella tua lingua.

CSS #

Stile che verrà iniettato 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.

Alcuni elementi necessitano di 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ù frequentemente apportate ai design sono queste:

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

• Font: Se necessario, regola i font per farli corrispondere all’aspetto e alla sensazione del tuo sito.

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

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

• Collegamenti: Se hai uno stile specifico per i tuoi collegamenti, puoi anche modificarlo.

Struttura dell’overlay #

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

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">
        Elemento!
    </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, spostiamo il cursore su questo elemento e aggiungiamo qualsiasi query abbiamo, in modo da mantenere l’esperienza utente relativamente 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 le faccette, 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.

Facet di ricerca #

clerk-facet-search

Se è presente una ricerca per faccette, 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 per faccette. Le ricerche per faccette forniscono un modo per gli utenti di cercare nelle faccette. Per funzionare, l’elemento deve avere un valore di 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 delle 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’unica azione semplice.

Ripristino del 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, a un elemento può essere data 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 della 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 della 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.