Omnisearch

• Live resultater vises til dine besøgende, mens de skriver, og inkluderer produkter, kategorier og sider.
• Sortering og filtrering: så dine besøgende kan forfine deres søgning på en intuitiv og nem måde.
• Let at integrere på dit site ved hjælp af en af vores gode startskabeloner.
• Matcher dit brand gennem ændringer af få standardindstillinger som logo, skrifttyper, farver med mere.
• Fuldstændig tilpasningsdygtig med HTML, CSS og Liquid for udviklere.

Kom godt i gang #

Omnisearch består af et tilpasningsdygtigt Design til alt visuel og en Element blok, der gør det muligt at installere det på dit site.

Opret et design #

Dette gøres i Search > Designs > New Design

Vælg Omnisearch typen, vælg et startdesign, og giv det et navn.

Klik på Save & Close for at færdiggøre standarddesignet.

Vores standarddesign virker direkte ud af boksen og kan altid redigeres senere. Redigering kræver viden om HTML, CSS og Liquid. Se Styling i denne guide for mere information.

Opret et Element #

Dette gøres i Search > Element > New Element

Element-blokke er containere for de elementer, du opretter i din my.clerk.io konto. De indeholder logikken for at vise resultater og indstillinger for, hvor mange resultater der skal vises. Empty State Logic kan også styres gennem Rules.

• Navn hjælper dig med at identificere dit element, hvis du ønsker at oprette mere end et. Det kan ændres senere.

• Element type er Omnisearch som standard og bør ikke ændres. Her kan du også tilføje filtre om nødvendigt, men til de fleste opsætninger er dette ikke nødvendigt.

• Empty State Logic giver dig mulighed for at vælge, hvilke typer produkter der skal vises, når Omnisearch åbnes initialt, inden der er skrevet nogen ord. Som standard er dette Bestsellers, men kan også personliggøres, f.eks. med Visitor Recommendations.

Afslut designet #

Designet der skal bruges til at vise Element-blokken. Vælg det design, du har oprettet.

Hvis dit design indeholder nogen variabler, kan de også sættes her.

Du kan styre antallet af resultater, der skal vises for hver type, hver gang en søgning laves. Vi anbefaler generelt disse mængder:

• Produkter: 20-60
• Forslag: 5
• Kategorier & sider: 10

Vælg til sidst de attributter, du vil inkludere som Facets, og indstil navnene, som de skal vises under søgeresultaterne. Hvis du ikke kan finde en specifik attribut på listen, tilføj den i “filterable attributes”-listen under Search Configuration.

Indsæt på siden #

Visibility bruges til at styre, hvem der kan se Omnisearch.

• In preview gør det muligt at teste dit element uden at påvirke dit live site. Du kan åbne dit site i preview ved at klikke på “Open site in preview” eller ved at tilføje ?clerk_content_mode=preview til din sites url.

• In my live site bruges, når du er færdig med at teste og klar til at gøre det offentligt.

Brug af injection #

Dette er den nemmeste måde at installere på. Clerk tilføjer automatisk Omnisearch-koden til dit site ved at målrette et søgefelt efter eget valg, og trigge baseret på en event.

• Event styrer, hvad brugeren skal gøre for at trigge Omnisearch. Typisk vil du vise det, når dine besøgende klikker på dit søgeikon eller inputfelt.

• Element bestemmer den del af websiden, brugeren skal interagere med. F.eks., hvis du vil have dit Omnisearch-element til kun at vises, når dine besøgende interagerer med din søgebar (klik eller fokus), skal du finde den unikke CSS selector, der er anvendt. Hvis du har forskellige identifikatorer til mobil og desktop, tilføj dem begge.

Find din unikke CSS selector sådan:

1. Inspicer dit sites kode. I de fleste browsere kan du højreklikke overalt på din side og vælge Inspicer eller lignende.
2. Find det element, du vil målrette.
3. Højreklik over det, og vælg kopier > kopier selector.

Brug af embedkode #

Hvis der er nogen ændringer, du ikke har gemt, skal de gemmes for at generere embedkoden.

Kopier denne kode og indsæt den i filen, der genererer alle sider i webshoppen, helst nær slutningen af </body>-tagget.

Erstat INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selektoren for det HTML-element, der skal trigge din Omnisearch.

Herunder ses et fuldt eksempel på en Omnisearch embed-kode med alle konfigurationsmuligheder:

<span class="clerk"
    data-template="@omnisearch"
    data-api="search/omni"
    data-trigger-element="INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH"
    data-limit="40"
    data-suggestions="6"
    data-categories="6"
    data-pages="6"
    data-omni-search-suggestions="6"
    data-omni-search-categories="6"
    data-omni-search-pages="6"
    data-omni-search-empty="recommendations/popular">
</span>

Designkonfiguration #

Det meste af Omni-search kan konfigureres ved at ændre variablerne, der er i designfilerne.

I liquid template language har en variabel denne struktur:

{% assign variable_name = "variable value" %}

Som tommelfingerregel skal kun variabelværdien ændres for at konfigurere Omni-search.

Mere tekniske brugere kan selvfølgelig stadig ændre specifikke HTML- og CSS-linjer, se dette afsnit.

Logo #

For at tilføje logoet til Omni-search-designet skal du blot finde billedets URL og indsætte det som værdien for variablen: os_brand_logo.

Variablen hedder typisk noget i stil med os_brand_logo, og det skal se sådan ud, når logoet er sat ind:

Uendelig/auto load #

Hvis du vil styre, om Omni-search automatisk skal indlæse flere produktresultater, når brugeren har scrollet til sidste række produkter, skal variablen sættes til true eller false.
Variablen hedder typisk os_autoload. I dette eksempel indlæser Omni-search ikke flere produktresultater automatisk.

Oversættelser #

Som standard er skabelonen på engelsk. Hvis du har en butik, der har et andet sprog, kan du oversætte tekstelementerne ved at ændre variabelværdierne.

Dette eksempel viser variablerne til sorteringsknappen:

Protip: Brug generativ AI (f.eks. chatGPT) til at oversætte variabelværdier på én gang ved at skrive “Translate these variable values from English to Danish. Return the full code back so it can be copy/pasted to replace the existing code: PASTE_VARIABLES_HERE”

Styling #

For at ændre styling foretages konfigurationen i CSS-variablerne.

Skabelonerne bruger CSS-variabler, som har denne struktur:

--variable_name: variable_value;

For mere tekniske brugere kan man ændre individuelle CSS-regler for at lave mere komplekse designændringer.

Farver #

De konfigurerbare farver kan identificeres og konfigureres i afsnittet under “Colors” CSS-kommentaren
/* Colors */

Skrifttyper #

På samme måde som farver findes font-variablen under kommentaren /* Font */.

Den har typisk en variabel som: --font-family: 'Kumbh Sans', sans serif;

For udviklere #

Styling #

Designs består af et hovedlayout, CSS-styling og et sæt del-designs, der kan refereres til i hovedlayoutet.

Du kan redigere alle disse for Desktop og Mobil hver for sig. Som standard bruger Omni-search den samme HTML til alle skærmstørrelser og benytter CSS til at være fuldt responsivt. Derfor er der ingen kode i Mobilfanen fra start.

Hvis nødvendigt kan du oprette et helt andet HTML-markup til mobil, som vil blive brugt på mindre skærme.

I første omgang vil du måske kun justere enkelte ting for at få designet til at matche dit brands udtryk – Du kan altid redigere dit design senere.

HTML #

Dette er hovedlayoutet, der styrer placeringen af alle elementer. Det bruger Liquid som skabelonsprog.

I vores startdesigns er det første afsnit dedikeret til de oftest ændrede elementer, såsom sorteringslabels, valuta og de forskellige tekster, du kan oversætte til dit sprog.

CSS #

Styling, der injiceres sammen med HTML’en og giver dig fuld kontrol over det visuelle på en afgrænset måde.

Tilgængelige del-designs #

Alle designs, der tilføjes her, kan refereres i generallayoutet. De fungerer som moduler, der redigeres separat og tilføjes med deres ID og navn: {{@247373 - TopBarSearchForm}}

Du kan slette, duplikere og kopiere referencen til ethvert del-design ved at klikke på knappen med de tre prikker.

For at redigere et del-design skal du klikke på dets Rediger-ikon. Når du er færdig med at redigere, klik på Save & close for at vende tilbage til hovedlayout-editoren.

Nogle elementer kræver specifikke identifikatorer, såsom:

• Inputfeltet id="clerk-omnisearch-input"
• Content wrapper id="clerk-omnisearch-content"

Når du ønsker at tjekke dine fremskridt, kan du gøre det ved at klikke på knappen “Preview design”.

De mest almindelige ændringer i designs er disse:

• Logo: Gå til TopBarSearchForm og udskift standardlogoet med dit eget.

• Skrifttyper: Juster skrifttyperne om nødvendigt for at matche dit sites udtryk.

• Farver: Du kan tilføje dine brandfarver i de elementer, du ønsker skal stå ud eller flette ind med resten af dit site, fx knapper og tags.

• Knapper og tag-kanter: Juster deres farve, radius, bredde…

• Links: Hvis du har en specifik styling til dine links, kan du også redigere det.

Overlaystruktur #

Når omnisearch initieres, oprettes et element med klassen clerk-omnisearch-overlay, som indsættes nederst i body.

Her injiceres designet, og da vi har input-elementet som en del af designet, er der strukturelle krav for at sikre, at vi ikke gengiver input-elementet på hver load. Strukturen skal derfor se sådan ud under overlayet:

<div>
    <input type="text" id="clerk-omnisearch-input"/>
    <div id="clerk-omnisearch-content">
        Element!
    </div>
</div>

Inputfelt #

For at finde inputfeltet skal det have følgende identifikator clerk-omnisearch-input. Når trigger-elementet er fired, flyttes cursorfokus til dette element, og vi tilføjer den query vi har, så vi kan holde brugeroplevelsen så gnidningsløs som muligt.

Content Wrapper #

Content wrapperen er, hvor det meste sker; wrapperen omkring den skal have identifikatoren clerk-omnisearch-content. Herinde skal facets, sliders og alt, der ikke er inputfelt, være.

Klasser #

Funktionalitet kan tilføjes til designet ved at tilføje specifikke klasser til elementer.

Lukkeknap #

clerk-omnisearch-close

Når denne klasse sættes på et element i designet, vil det skjule overlayet.

Sortering #

clerk-omnisearch-sort

Finder sorteringsdropdowns og tilføjer lyttere til dem.

For at få et sorteringselement i designet skal du tilføje denne klasse til det valgte element, fx et dropdown. For at virke skal elementet have følgende value:[desc|asc], dvs. den værdi, vi vil sortere efter, efterfulgt af kolon og enten desc eller asc. Du kan evt. tilføje et data-sort-type-attribut, hvis du vil sortere kategorier eller sider.

Search Facet #

clerk-facet-search

Hvis der er en facet-søgning til stede, oprettes en lytter, og de facets, der ikke matcher queryen, skjules.

Så snart denne klasse findes på en hjemmeside, tjekkes for facet search-elementer. Facet searches giver brugeren mulighed for at søge i facets. For at virke skal elementet have en strengværdi.

Full Clear #

clerk-omnisearch-full-reset

Når der klikkes, vil elementer med denne klasse fjerne alle valgte facets og nulstille søgeforespørgslen.

Facets Clear #

clerk-omnisearch-facet-full-reset

Når der klikkes, vil elementer med denne klasse fravælge alle aktive facets. Dette ses typisk på en ‘Clear all’-knap inden for en gruppe af facets, så brugerne let kan nulstille deres valgte filtre.

Group Clear #

clerk-omnisearch-facet-group-reset

Når der klikkes, vil elementer med denne klasse fravælge alle underordnede elementer i gruppen.

For at kunne fravælge en hel gruppe af facets kan et element gives denne klasse. Når elementet aktiveres (f.eks. ved klik), bliver alle elementer i denne gruppe fravalgt og nulstiller derved gruppen. For at fungere, skal elementet have den gruppe, der skal cleares, som en attribut med navnet data-facet-group.

Facet Clear #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal fravælge et enkelt element baseret på det givne group/value-attributpar.

Klassen bruges, når det kun er nødvendigt at fravælge en enkelt facet. Et element med denne klasse kan knyttes til en bestemt facet i en gruppe ved at tildele både et data-facet-group og et data-facet-value. Ved aktivering vil den kun fravælge sin tilknyttede facet baseret på attributparret og ikke ændre øvrige valgte facets.

Facet Click #

clerk-facet

Elementer med denne klasse vil blive behandlet som en valgbare facet.

Alle facets skal have klassen samt attributterne data-facet-group og data-facet-value, så vi ved, hvad kunden klikker på.