Omnisearch

Offre la flessibilità necessaria per offrire la migliore esperienza di ricerca moderna:

• I risultati in tempo reale vengono mostrati ai visitatori durante la digitazione e includono prodotti, categorie e pagine.
• I suggerimenti di ricerca ispirano i visitatori a scoprire il vostro catalogo attraverso ricerche popolari.
• Ordinamento e filtraggio**: per consentire ai visitatori di affinare la ricerca in modo intuitivo e semplice.
• È facile da integrare nel vostro sito utilizzando uno dei nostri modelli di partenza.
• Si adatta al vostro marchio modificando alcune impostazioni standard (logo, caratteri, colori…)
• È completamente personalizzabile per gli sviluppatori

Iniziare #

Omnisearch è composto da un Design personalizzabile per le immagini e da un blocco Content che ne consente l’installazione sul sito.

Creazione di un disegno #

Questa operazione viene eseguita in Search > Designs > New Design

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

I nostri design standard funzionano già pronti e possono sempre essere modificati in seguito. La modifica richiede la conoscenza di HTML, CSS e Liquid. Per maggiori informazioni, consultare Styling in questa guida.

Creare un contenuto #

Questo viene fatto in Search > Content > New Content

• Il nome aiuta a identificare il contenuto nel caso in cui se ne voglia creare più di uno. Può essere modificato in seguito.
• Il tipo di contenuto è Omnisearch per impostazione predefinita e non deve essere modificato.

Design #

Il disegno in cui rendere il blocco Contenuto. Selezionare il disegno creato.

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

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

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

Infine, si devono scegliere gli attributi da 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] (/piattaforma/ricerca/configurazione#attributi filtrabili).

Inserimento nel sito #

La visibilità serve a controllare chi può vedere Omnisearch.

• L’opzione In anteprima consente di testare il contenuto senza influenzare il sito live. È possibile aprire il sito in anteprima facendo clic su “Apri il 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.

Uso dell’iniezione #

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

• L’evento controlla ciò che l’utente deve fare per attivare Omnisearch. Molto probabilmente si desidera 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 di 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 ad esso applicato. Se si dispone di identificatori diversi per mobile e desktop, aggiungerli entrambi.

Trovate il selettore CSS unico 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 Inspect o simili.
2. Individuare l’elemento che si desidera selezionare
3. Cliccate con il tasto destro del mouse su di esso e trovate l’opzione copia > copia selettore

Il selettore dell’esempio precedente è #search. In alcuni casi, i selettori sono più complessi, come .menu > .search > input.

Utilizzo del codice incorporato #

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

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

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

Per gli sviluppatori #

Stilizzazione #

I progetti sono costituiti da un dispositivo principale, da stili CSS e da una serie di dispositivi secondari che possono essere referenziati nel layout principale. È possibile modificare tutti questi elementi per Desktop e Mobile separatamente.

Inizialmente, si possono apportare solo alcune modifiche per rendere il design in linea con l’aspetto e l’atmosfera del marchio - È sempre possibile modificare il design in seguito.

HTML #

È il layout principale che controlla il posizionamento di tutti gli elementi. Utilizza Liquid come linguaggio di template.

Nei nostri progetti iniziali, la prima sezione è dedicata agli elementi più comunemente modificati, come le etichette di ordinamento e la valuta.

CSS #

Lo styling che verrà iniettato nell’HTML, dando il pieno controllo sulla grafica in modo contenuto.

Sottoprogetti disponibili #

Tutti i design aggiunti qui 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 hanno bisogno di identificatori specifici per funzionare, come il campo di input id="clerk-omnisearch-input" o il content wrapper `id=“clerk-omnisearch-content”.

Ogni volta che si desidera verificare i propri progressi, è 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.

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

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

• Bordi dei pulsanti e dei tag: È possibile regolare il loro colore, il raggio, la larghezza…

• Link: 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 e viene iniettato nella parte inferiore del corpo.

Questo è il punto in cui 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 ingresso #

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 senza soluzione di continuità.

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 esserci le faccette, 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 essere del tipo value:[desc|asc], quindi il valore che si vuole ordinare, con i due punti e poi desc o asc. Opzionalmente, si può aggiungere un attributo data-sort-type se si vuole che l’ordinamento avvenga per categorie o pagine.

Facet di ricerca #

`cler-facet-search

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

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

Completo chiaro #

clerk-omnisearch-full-reset

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

Azzeramento delle sfaccettature #

clerk-omnisearch-facet-full-reset

Quando si fa clic, gli elementi con questa classe deselezionano tutte le sfaccettature attive. Questo elemento si trova tipicamente su un pulsante di tipo “Cancella tutto” all’interno di un gruppo di sfaccettature, consentendo agli utenti di ripristinare i filtri selezionati con un’unica azione.

Cancella gruppo #

`clerk-omnisearch-facet-gruppo-reset

Se cliccato, 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.

Facet Clear #

clerk-omnisearch-facet-reset

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

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 gruppo di sfaccettature che un valore di sfaccettature. All’attivazione, l’elemento deselezionerà solo la sfaccettatura associata in base alla coppia di attributi gruppo/valore, 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 sta premendo il cliente.