Omnisearch

• Risultati in tempo reale I risultati della ricerca vengono mostrati ai visitatori durante la digitazione e includono prodotti, categorie e pagine.
• Ordinamento e filtraggioPer consentire ai visitatori di affinare la ricerca in modo intuitivo e semplice.
• Facile da integrare Nel vostro sito utilizzate uno dei nostri fantastici modelli di partenza.
• Si adatta al vostro marchio modificando alcune impostazioni standard come logo, font, colori e altro.
• È completamente personalizzabile con HTML, CSS e Liquid per sviluppatori.

Iniziare #

Omnisearch è composto da una Il design grafica personalizzabile e da un blocco Contenuto che ne consente l’installazione sul sito.

Creare un design #

Questa operazione viene eseguita in Search > Designs > New Design

Selezionare il tipo di Omnisearch , scegliere un disegno iniziale e dargli un nome.

Fare clic su Save & Close per finalizzare il disegno standard.

I nostri design standard funzionano subito e possono sempre essere modificati in seguito. La modifica richiede la conoscenza di HTML, CSS e Liquid. Per maggiori informazioni, consultate Stilizzazione in questa guida.

Creare un contenuto #

Questa operazione viene eseguita in Search > Content > New Content

I blocchi di contenuto sono contenitori di elementi creati nel proprio account my.clerk.io. Contengono la logica per mostrare i risultati e le impostazioni per il numero di risultati da mostrare.

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

• Tipo di contenuto è Omnisearch per impostazione predefinita e non deve essere modificato. Se necessario, è possibile aggiungere filtri, ma per la maggior parte delle configurazioni non è necessario.

• Logica dello stato vuoto consente di selezionare il tipo di prodotti da visualizzare quando Omnisearch viene aperto inizialmente, prima che venga digitata qualsiasi parola. Per impostazione predefinita è I più venduti, ma può anche essere personalizzato, ad esempio con Raccomandazioni per i visitatori.

Finalizzare il progetto #

Il design con cui renderizzare il blocco Contenuto. Selezionare il progetto creato.

Se il progetto include delle variabili, queste possono essere impostate anche qui.

È possibile controllare il valore di numero di risultati da visualizzare per ogni tipo, ogni volta che viene effettuata una ricerca. In genere si consigliano questi importi:

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

Infine, scegliere gli attributi che si desidera includere come Facet e impostare i nomi con cui devono essere visualizzati nei risultati della ricerca. Se non si riesce a trovare un attributo specifico nell’elenco, aggiungerlo nell’elenco “attributi filtrabili”, in Configurazione della ricerca.

Inserimento nel sito #

Visibilità è utilizzato per controllare chi può vedere Omnisearch.

• Nell’anteprima consente di testare i contenuti senza influire sul sito in uso. È possibile aprire il sito in anteprima facendo clic su “Apri sito in anteprima” o aggiungendo ?clerk_content_mode=preview all’url del sito.

• Nel mio sito live si usa quando si è terminato il test e si è pronti a renderlo pubblico.

Utilizzo dell’iniezione #

Questo è il modo più semplice di installarlo. Clerk aggiungerà automaticamente il codice Omnisearch al vostro sito, puntando a un campo di ricerca di vostra scelta e attivandolo in base a un evento.

• Evento controlla cosa deve fare l’utente per attivare Omnisearch. Molto probabilmente si vuole che venga visualizzato quando i visitatori fanno clic sull’icona di ricerca o sul campo di immissione.

• Elemento decide la parte del sito web con cui l’utente deve interagire. Ad esempio, se si desidera che il contenuto dell’Omnisearch venga visualizzato solo quando i visitatori interagiscono con la barra di ricerca (clic o focus su di essa), è sufficiente trovare l’unico Selettore CSS applicato ad essa. Se si dispone di identificatori diversi per i dispositivi mobili e per quelli desktop, aggiungerli entrambi.

Trovate il selettore CSS univoco in questo modo:

1. Ispezionare il codice del sito. Nella maggior parte dei browser è possibile fare clic con il tasto destro del mouse su un punto qualsiasi della pagina e scegliere Ispezione o simili.
2. Individuare l’elemento che si desidera selezionare
3. Fate clic su di esso e trovate l’opzione copia > copia selettore

Usare il codice incorporato #

Se ci sono modifiche non salvate, salvarle per generare il codice incorporato.

Copiare il codice e inserirlo nel file che genera tutte le pagine del webshop, idealmente vicino alla fine del tag </body>.

Sostituite INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH con il selettore CSS dell’elemento html che deve attivare Omnisearch.

Configurazione del design #

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

Nel sito linguaggio dei template liquidi, una variabile ha una struttura simile a questa:

{% assign variable_name = "variable value" %}

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

Gli utenti più tecnici possono naturalmente modificare specifiche linee HTML e CSS, vedi questa sezione.

Logo #

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

La variabile ha in genere un nome simile a os_brand_logo e dovrebbe avere questo aspetto una volta inserito il logo:

Carico infinito/automatico #

Se si desidera controllare se Omni-search deve caricare automaticamente altri risultati di prodotto, una volta che l’utente è arrivato all’ultima riga di prodotti, la variabile deve essere impostata su true o false. La variabile è in genere denominata os_autoload. In questo esempio, Omni-search non carica automaticamente altri risultati di prodotto.

Traduzioni #

Per impostazione predefinita, il modello è in inglese. Se il negozio ha una lingua diversa, è possibile tradurre gli elementi di testo modificando i valori delle variabili.

Questo esempio mostra le variabili per il pulsante di ordinamento:

Stilizzazione #

Per modificare lo stile, la configurazione può essere effettuata nelle variabili CSS.

I template usano Variabili CSS, che ha una struttura come questa:

--variable_name: variable_value;

Per gli utenti più tecnici, è possibile modificare le singole regole CSS per apportare modifiche più complesse al design.

Colori #

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

Font #

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

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

Per gli sviluppatori #

Stilizzazione #

I design sono costituiti da layout principale, Stile CSS e da un insieme di sottoprogetti che possono essere referenziati nel layout principale.

È possibile modificare tutti questi elementi separatamente per Desktop e Mobile. Per impostazione predefinita, Omni-search utilizza lo stesso HTML per tutte le dimensioni dello schermo e usa i CSS per essere completamente reattivo. Per questo motivo la scheda Mobile non ha alcun codice iniziale.

Se necessario, è possibile creare un codice HTML completamente diverso per i dispositivi mobili, che verrà utilizzato sugli schermi più piccoli.

Inizialmente, si consiglia di modificare solo alcuni elementi di per far sì che il design corrisponda all’aspetto e all’atmosfera del vostro marchio. È sempre possibile modificare il progetto in un secondo momento.

HTML #

Questo è il layout principale che controlla il posizionamento di tutti gli elementi. Utilizza Liquido come linguaggio di template.

Nei nostri progetti iniziali, la prima sezione è dedicata agli elementi più comunemente modificati, come le etichette di ordinamento, la valuta e i vari testi che è possibile tradurre nella propria lingua.

CSS #

Stilizzazione che verrà iniettata nell’HTML, dandovi il pieno controllo della grafica in modo contenuto.

Sottoprogetti disponibili #

Tutti i design aggiunti in questa sezione possono essere referenziati nel layout generale. Funzionano come moduli da modificare separatamente e vengono aggiunti con il loro ID e nome: {{@247373 - TopBarSearchForm}}

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

Per modificare un sottoprogetto, fare clic sull’icona Modifica. Una volta terminata la modifica, fare clic su Salva e chiudi, per tornare all’editor di layout principale.

Alcuni elementi necessitano di identificatori specifici, ad esempio:

• Il campo di input id="clerk-omnisearch-input"
• L’involucro del contenuto id="clerk-omnisearch-content"

Ogni volta che si desidera verificare i progressi compiuti, è possibile farlo facendo clic sul pulsante “Anteprima del progetto”.

Le modifiche più frequenti apportate ai progetti sono le seguenti:

• Logo: Accedere al TopBarSearchForm e sostituire il logo predefinito con il proprio.

• Caratteri: Se necessario, regolare i caratteri per adattarli all’aspetto del sito.

• Colori: È possibile aggiungere i colori del proprio marchio negli elementi che si desidera enfatizzare o armonizzare con il resto del sito, come pulsanti e tag.

• Pulsanti e bordi dei tag: È possibile regolare il colore, il raggio, la larghezza…

• Collegamenti: Se avete uno stile specifico per i vostri link, potete anche modificarlo.

Struttura della sovrapposizione #

Quando omnisearch viene avviato, crea un elemento con la classe clerk-omnisearch-overlay che 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">
        Content!
    </div>
</div>

Campo di input #

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 trovarsi le sfaccettature, i cursori e tutto ciò che non è il campo di input.

Classi #

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

Pulsante di chiusura #

clerk-omnisearch-close

Quando si aggiunge la classe a un elemento all’interno del disegno, tale elemento nasconderà la sovrapposizione.

Ordinamento #

clerk-omnisearch-sort

Trova le caselle di ordinamento e vi aggiunge gli ascoltatori.

Per ottenere un elemento di ordinamento nel progetto, aggiungerlo all’elemento di selezione, ad esempio un menu a tendina. Per funzionare, l’elemento deve avere il seguente value:[desc|asc], quindi il valore che si vuole ordinare, con i due punti e poi desc o asc. Si può aggiungere facoltativamente l’attributo data-sort-type se si desidera ordinare le categorie o le pagine.

Facet di ricerca #### clerk-facet-search

Se è presente una ricerca a 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 delle faccette. Le ricerche per sfaccettature forniscono agli utenti un modo per effettuare ricerche nelle sfaccettature. Per funzionare, l’elemento deve avere un valore stringa.

Completamente chiaro #

clerk-omnisearch-full-reset

Quando si fa clic, gli elementi con questa classe cancellano tutte le sfaccettature selezionate e ripristinano la query.

Cancella sfaccettature #

clerk-omnisearch-facet-full-reset

Quando si fa clic, gli elementi con questa classe deselezionano tutte le sfaccettature attive. Questo è il caso di un pulsante in stile ‘Cancella tutto’ all’interno di un gruppo di sfaccettature, che consente agli utenti di ripristinare i filtri selezionati con un’unica azione.

Cancella gruppo #

clerk-omnisearch-facet-group-reset

Quando si fa clic, gli elementi con questa classe deselezionano tutti gli elementi figli del gruppo.

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

Cancellazione della sfaccettatura #

clerk-omnisearch-facet-reset

Gli elementi con questa classe devono deselezionare un singolo elemento con la coppia di attributi gruppo/valore data.

Questa classe è pensata per scenari in cui è necessario deselezionare una singola sfaccettatura. Un elemento con questa classe 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 data, lasciando invariate le altre sfaccettature selezionate.

Facet Click #

clerk-facet

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

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