Introduzione a Omni-search

Alimentata dalla nostra Search 3.0, la ricerca omnidirezionale di Clerk servirà ai tuoi visitatori i risultati più pertinenti e i contenuti correlati per le loro ricerche.

In qualità di gestore di e-commerce, ti offre la flessibilità di cui hai bisogno per offrire la migliore esperienza di ricerca:

• È facile da integrare nel tuo sito (vedi inserisci il tuo contenuto di omni-search nel tuo sito web)
• È completamente personalizzabile: puoi iniziare con uno dei nostri modelli minimalisti e allineare il design con l’identità del tuo marchio semplicemente cambiando alcune cose (logo, caratteri, colori…)
• Si concentra sul fornire la migliore esperienza utente supportando:
  • Suggerimenti di query (in base alla popolarità, alla cronologia delle ricerche, al completamento automatico…): per guidare i tuoi visitatori lungo il percorso
  • Risultati in tempo reale: fornisci ai tuoi visitatori risultati di ricerca rapidi durante la digitazione, nonché suggerimenti per categorie, marchi e contenuti.
  • Ordinamento e filtraggio: per consentire ai tuoi visitatori di affinare la loro ricerca in modo intuitivo e semplice.

Come iniziare con Omni-search

Creazione di un Omni-search design

Analogamente ai contenuti delle nostre pagine live e di ricerca, avrai bisogno di un omni-search design per creare un omni-search content. Per questo motivo, è una buona idea iniziare personalizzando uno dei nostri modelli:

1. Nel tuo account Clerk.io, vai su Store > Search > Designs
2. Fare clic su New design
3. Selezionare il tipo di design Omni-search.
4. Scegli un modello con cui iniziare.
5. Premi “Create design” per iniziare a personalizzare il tuo design.

Cosa considerare quando si modifica un Omnni-search design?

Tutti i omni-search designs sono costituiti da un layout generale e da una serie di sottoprogetti a cui è possibile fare riferimento nel layout principale.

Nota: solo i sotto-design disponibili nel tuo design omni-search possono essere referenziati nel layout generale.

Per modificare un sotto-design specifico, fai clic sulla sua icona Modifica e navigherai alla pagina del sotto-design. Una volta terminata la modifica, fai clic su Save & close e tornerai nell’editor di layout generale.

È inoltre possibile eliminare, duplicare e copiare il riferimento di qualsiasi sottoprogetto facendo clic sul pulsante con i tre puntini.

! [Schermate delle opzioni dei sotto-progetti] (sub-designs-options.png)

Durante la modifica di un omni-search design, tieni presente che alcuni elementi necessitano di identificatori di clerk specifici affinché il tuo progetto funzioni, ad esempio il campo di input (id=“clerk-omnisearch-input”) o il wrapper del contenuto (id=“clerk-omnisearch-content”).

Per iniziare, potresti voler modificare solo alcune cose per rendere il design corrispondente all’aspetto e all’atmosfera del tuo marchio - ricorda che puoi sempre modificare il tuo design in un secondo momento, dopo averlo visualizzato in anteprima e testato nel tuo sito.

• Logo: accedi a TopBarSearchForm e sostituisci il logo predefinito con il tuo.
• Caratteri: se necessario, regola i caratteri in modo che corrispondano all’aspetto del tuo sito.
• Colori: puoi aggiungere i colori del tuo marchio in quegli elementi che vuoi enfatizzare o semplificare con il resto del tuo sito come pulsanti e tag.
• Pulsanti e bordi dei tag: puoi regolarne il colore, il raggio, la larghezza…
• Link: se hai uno stile specifico per i tuoi link, puoi anche modificarlo.

Ogni volta che vuoi controllare i tuoi progressi, puoi farlo facendo clic sul pulsante “Preview design”. Potrai controllare l’ultima versione salvata del tuo progetto.

Una volta che ritieni che il tuo progetto sia pronto, puoi passare alla fase successiva del processo: creare un contenuto per la tua omnisearch.

Creazione di un contenuto di Omni-search

I contenuti di Clerk.io possono essere in qualche modo considerati come “contenitori” degli elementi che puoi creare dal tuo account (finestre di dialogo di ricerca o caroselli di raccomandazioni). Per ogni elemento che vuoi inserire nel tuo sito, devi creare un contenuto.

Per iniziare a utilizzare Omni-search nel tuo negozio, devi creare un contenuto apposito:

1. Passare a Search > Content.
2. Fare clic su “New content” nella parte in alto a destra della pagina
3. Compila i campi richiesti:
   • Nome: ti aiuterà a identificare i tuoi contenuti nel caso in cui tu voglia crearne più di uno (può essere modificato in seguito)
   • Tipo di contenuto: è Omni-search per impostazione predefinita, quindi non è necessario fare nulla con esso.
   • Design: tutti i contenuti richiedono un design compatibile. Fai clic sul campo e dovresti essere in grado di selezionarlo tra tutti i design di Omni-search che hai creato.
     • Se il tuo progetto include delle variabili, imposta i valori qui.
     • Decidi quanti prodotti dobbiamo visualizzare per carico. Ogni query di ricerca può restituire molte corrispondenze. Per garantire le migliori prestazioni, non li caricheremo tutti in una volta, ma su richiesta, quando i tuoi visitatori fanno clic sul pulsante Carica altro.
     • Limita i suggerimenti di query, il numero di categorie e il numero di pagine di contenuto che possono essere visualizzate contemporaneamente. Ciò garantisce che, indipendentemente dalla query, i tuoi visitatori non si sentano sopraffatti da informazioni eccessive e che il tuo design non si interrompa.
     • Scegli gli attributi che desideri includere come facet (filtri) e imposta nomi leggibili. Se non riesci a trovare un attributo specifico nell’elenco, è possibile che tu abbia dimenticato di includerlo nell’elenco “attributi filtrabili”, in Search configuration.

! [Blocco di progettazione di un contenuto Omni-search] (omnisearch-content-design-block.png)

Inserisci il contenuto nel tuo sito

L’ultimo passo per includere un contenuto powered by Clerk.io nel tuo negozio online è inserirlo nel tuo sito.

Per i tuoi omni-search content, il metodo predefinito è “Using injection”, ma puoi anche inserire il contenuto nel tuo sito tramite “Using embedded code”.

Inserire con l’iniezione:

Questo è il metodo più semplice per aggiungere un contenuto Clerk.io al tuo sito. Devi solo indicare:

• L’evento che dovrebbe attivare la visualizzazione del contenuto (molto probabilmente vuoi che venga visualizzato quando i tuoi visitatori fanno clic sull’icona di ricerca o sul campo di immissione)
• L’elemento su cui si verificherà l’evento. Ad esempio, se vuoi che i tuoi contenuti Omni-search vengano visualizzati solo quando i tuoi visitatori interagiscono con la tua barra di ricerca (fai clic o concentrati su di essa), devi solo trovare il selettore CSS univoco applicato ad esso (avrà un aspetto simile a #search, #search_bar…). Se disponi di identificatori diversi su dispositivi mobili e desktop, aggiungili entrambi. Come trovare il selettore CSS della mia barra di ricerca? 1. Ispeziona il codice del tuo sito; 2. Trova l’elemento che desideri targetizzare. 3. Fare clic con il tasto destro su di esso e trovare l’opzione copia > selettore di copia.

!

Nota: assicurati di trovare un selettore CSS che sia un identificatore univoco degli elementi che desideri scegliere come target. È possibile utilizzare qualsiasi selettore CSS supportato dal metodo querySelector().

• Imposta la visibilità del contenuto:
  • In anteprima: ti consente di testare i tuoi contenuti senza influire sul tuo sito live. Puoi aprire il tuo sito in anteprima facendo clic su “Apri sito in anteprima” o aggiungendo /?clerk_preview=true all’URL del tuo sito.
  • Nel mio sito live: una volta che hai testato i tuoi contenuti e sei pronto per renderli pubblici, è il momento di scegliere questa opzione.

Inserire utilizzando codice incorporato:

Questa è l’alternativa all’aggiunta del contenuto nel tuo sito utilizzando l’iniezione. Richiede alcuni passaggi in più e la modifica del codice del tuo sito.

Per aggiungere il codice incorporato nel tuo sito:

1. Espandi la sezione “Inserisci nel sito web” e seleziona l’opzione “Utilizzo del codice incorporato”.
2. Se sono presenti modifiche non salvate, salvarle e generare il codice incorporato. Altrimenti, il codice verrà visualizzato per impostazione predefinita. Copiare il codice incorporato.

! [Inserisci contenuti nel tuo sito] (insert-into-site.png)

3. Accedi al backend del tuo negozio online
4. Incolla il codice di incorporamento nel file che genera tutte le pagine del negozio online, sotto il codice di iniezione clerk.js.
5. Sostituisci INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH con il selettore CSS dell’elemento html che dovrebbe abilitare il contenuto di Omni-search.