Search

Imposta Search dopo aver importato e controllato i tuoi dati. Identifica innanzitutto come il tuo tema apre Search su desktop e mobile, quindi scegli l’esperienza più adatta.

Analizza Search #

Un tema può avere input desktop separati, icone mobile, pannelli nascosti e campi di ricerca in homepage. Analizza ciascuno prima di scegliere i trigger.

1. Apri il webshop su desktop e mobile. Trova ogni input o controllo che apre Search.
2. Usa gli strumenti per sviluppatori per ispezionare i selettori stabili e confermare quale input riceve il testo digitato.
3. Testa il menu a discesa nativo, il pannello mobile, il tasto Invio ed invio del form. Prendi nota di quali comportamenti devono essere sostituiti o mantenuti.
4. Controlla un altro tipo di pagina; un campo ricerca in homepage può differire dall’input nell’header.

I trigger di esempio di Fodmagasinet sono .search-bar #search-overlay-input e #frontpage_search_container. Verifica se questi selettori esistono e hanno lo stesso ruolo sul tuo webshop. Un contenitore trigger non è necessariamente l’input stesso.

Scegli l’esperienza #

Usa Omnisearch per un’esperienza di ricerca combinata, oppure mantieni menu a discesa e pagina di ricerca separata se si adattano meglio al tuo tema.

Crea Omnisearch #

1. Vai su Search > Designs > New Design e scegli un modello Omnisearch.
2. Dai un nome e salva il Design, poi adatta le schede prodotto tramite i controlli card-data. I link delle pagine prodotto supportano prodotti che richiedono la scelta di varianti.
3. Vai su Search > Elements > New Element, nomina l’Element e scegli Omni-search come tipo.
4. Seleziona il Design, salva in In preview e apri le impostazioni di inserimento.
5. Configura il selettore trigger verificato tramite iniezione, oppure copia il codice embed generato all’interno del tema una volta sola.
6. Scegli tra Full Overlay e Partial Overlay e testa tutti i trigger previsti.

Per Partial Overlay, imposta il selettore Header al contenitore dell’header nativo e selettore Search input al vero campo di testo. Configura larghezza e altezza dell’overlay in base al layout. Vedi Omnisearch per queste opzioni.

La configurazione Partial di Fodmagasinet usa header e input nativi, non una copia di header o carrello. Selettori, struttura header, breakpoint, colori e spaziature sono esempi da analizzare, non requisiti per altri temi.

Search separato #

Per un menu a discesa, crea un Design Instant Search e un Element Live-search. Nelle impostazioni, punta all’input verificato e scegli la posizione del menu.

Per una pagina risultati, crea un Design e un Element Search Page, poi inseriscilo nel template della pagina risultati. Passa la query corrente usando il codice embed generato e indirizza il form nativo a quella pagina.

Utilizza le guide Instant Search e Search Page per le impostazioni comuni. Sostituisci i risultati nativi solo nel loro contenitore; mantieni la navigazione e il layout della pagina.

Comportamento nativo #

Risolvere gli handler sovrapposti prima di attivare Search per i visitatori. Nascondere solo il menu a discesa nativo può lasciarne attivi gestori tastiera o form.

Durante i test in Preview, digita caratteri reali e verifica che appaiano sia risultati nativi sia Clerk.io. Analizza l’icona mobile e il pannello separatamente; aprire il pannello sbagliato può nascondere l’input o cambiare la cronologia.

Se gli handler nativi competono, domanda allo sviluppatore di modificare solo input, pannello o form rilevanti. Limita qualunque sostituzione temporanea allo stato Search previsto così che la pagina sia usabile quando viene chiuso.

Testa le sequenze keydown, keyup, e l’invio del form submit. Invio deve aprire il risultato selezionato di Clerk.io oppure eseguire la ricerca prevista. Non annullare globalmente Invio o rimuovere tutti i listener tastiera: selezione con le frecce deve funzionare.

Close ed Escape devono ripristinare la pagina sottostante, focus e scrolling senza navigare Indietro né lasciare la pagina vuota. Ripeti apertura/chiusura, naviga verso un risultato e prova Indietro/Avanti su desktop e mobile.

Facets #

Scegli filtri partendo dagli attributi effettivamente presenti nei prodotti importati. Un campo vendor, brand o categorie del template può non corrispondere al feed.

Analizza vari record, seleziona gli attributi disponibili nella configurazione di Search e assegna loro etichette localizzate. Verifica che ciascun facet modifichi correttamente i risultati, inclusi i prodotti privi di attributi opzionali.

Per l’ordinamento, confronta i valori importati con i prezzi visualizzati nelle schede. Un’etichetta visuale “prezzo più basso variante” non corregge un prezzo parent errato usato per l’ordinamento.

Consulta Search best practices per filtri e layout di risultati utili.

Risultati di contenuti #

Importa articoli e altre pagine prima di abilitarli in Search. Segui Import Pages se mancano nel feed nativo.

Verifica poi sia le impostazioni page-result dell’Element, sia la sezione page-results del Design. Gli articoli importati possono restare nascosti se la sezione manca o il layout nasconde la colonna.

Cerca un titolo articolo specifico e verifica link e contenuto. Fai questa verifica separatamente dal matching prodotti e dalle raccomandazioni basate sulla pagina.

Stile in sicurezza #

Mantieni il CSS di Search all’interno del suo componente così da non alterare slider raccomandazioni altrove nella pagina.

Ad esempio, assegna al wrapper delle schede Search una classe dedicata e limita ogni regola:

.ideal-clerk-search .ideal-clerk-card {
  display: flex;
  flex-direction: column;
}

Non applicare regole di layout Search a selettori globali come .clerk-slider, button o .active. Controlla nuovamente slider homepage e prodotto dopo aver aperto/chiuso Search, incluse le frecce, larghezze e overflow.

Concludi con la checklist di configurazione. Consulta le Search conflicts FAQ se i controlli nativi interferiscono ancora.