Omnisearch

• Live resultater vises for 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.
• Nem integration på dit site ved brug af en af vores gode startskabeloner.
• Matcher dit brand ved at ændre nogle få standardindstillinger som logo, skrifttyper, farver og mere.
• Fuldstændigt tilpasselig med HTML, CSS og Liquid for developers.

Kom i gang #

Omnisearch består af et tilpasseligt design til det visuelle og en Element-blok, der gør det muligt at installere på dit site.

Oprettelse af 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 standarddesigns virker out-of-the-box og kan altid redigeres senere. Redigering kræver kendskab til HTML, CSS og Liquid. Se Styling i denne guide for mere info.

Oprettelse af et Element #

Dette gøres i Search > Element > New Element

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

• Name hjælper dig med at identificere dit element, hvis du ønsker at oprette flere. Det kan ændres senere.

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

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

Færdiggør designet #

Designet til at gengive Element-blokken igennem. Vælg det design du har oprettet.

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

Du kan kontrollere antallet af resultater der skal vises for hver type, hver gang en søgning foretages. 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 angiv, hvilke navne de skal vises som i søgeresultaterne. Hvis du ikke kan finde en bestemt attribut på listen, så tilføj den i “filterable attributes”-listen, i Search Configuration.

Indsættelse på dit site #

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

• In preview giver dig mulighed for at teste dit element uden at påvirke dit live site. Du kan åbne dit site i preview-tilstand ved at klikke på “Open site in preview” eller ved at tilføje ?clerk_content_mode=preview til dit 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 installationsmåde. 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 ønsker du at vise det, når dine besøgende klikker på dit søgeikon eller inputfelt.

• Element beslutter, hvilken del af websitet brugeren skal interagere med. For eksempel, hvis du kun ønsker, at dit Omnisearch-element skal vises, når dine besøgende interagerer med din søgelinje (klik eller fokus), skal du blot finde den unikke CSS selector, der bruges på det. Hvis du har forskellige identifikatorer til mobil og desktop, tilføj dem begge.

Find din unikke CSS selector på denne måde:

1. Inspicér din sides kode. I de fleste browsere kan du højreklikke overalt på siden og vælge Inspect eller lignende.
2. Find det element, du vil målrette.
3. Højreklik over det, og find muligheden copy > copy selector

Brug af embedded kode #

Hvis du har eventuelle ikke-gemte ændringer, så gem dem for at generere embedded-koden.

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

Udskift INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selektoren for det html-element, der skal trigge din Omnisearch.

Nedenfor er et komplet 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>

Visningstilstande #

Omnisearch understøtter to visningstilstande, der styrer, hvordan søgegrænsefladen vises på dit site. Dette konfigureres i fanen Insert, når du redigerer dit Omnisearch-element.

Fuld overlay #

Dette er standardtilstanden. Når Omnisearch trigges, dækker det hele viewporten med et fuldskærms-overlay. Søgegrænsefladen overtager siden og giver en fokuseret søgeoplevelse.

Brug denne tilstand, når du ønsker:

• Et distraktionsfrit søgemiljø
• Fuld kontrol over søgelayoutet
• At søgegrænsefladen skal være helt uafhængig af dit sites header

Delvist overlay #

Denne tilstand integrerer Omnisearch med dit eksisterende site-header. I stedet for at dække hele skærmen, vises søge-overlay’en under din header, mens headeren forbliver synlig og funktionel.

Brug denne tilstand, når du ønsker:

• At header og navigation stadig skal være tilgængelig under søgning
• En mere sømløs integration med dit sites layout
• At søgeoplevelsen skal føles som en naturlig del af sitet

Konfigurationsmuligheder #

Når Partial Overlay er valgt, bliver yderligere indstillinger tilgængelige:

Header selector

CSS-selektoren for dit sites header-element. Omnisearch bruger dette til at placere overlay’et direkte under din header, så det er korrekt justeret.

Eksempel på selectors:

• header
• .site-header
• #main-header

Search input selector

CSS-selektoren for dit eksisterende søge-inputfelt. Når den er angivet, synkroniserer Omnisearch med din headers søgefelt og skaber en ensartet søgeoplevelse, hvor indtastning i headerens søgeboks opdaterer Omnisearch-resultaterne.

Eksempel på selectors:

• #search-input
• .header-search input
• [name="search"]

Bredde

Styrer den horisontale størrelse af overlay’et:

• Full width: Fylder hele viewportens bredde
• Content width: Matcher bredden på det container-element, du vælger med en CSS-selektor
• Fixed width: En specifik pixelbredde, du definerer

Højde

Styrer den vertikale størrelse af overlay’et:

• From header to bottom: Fylder rummet fra under headeren og til bunden af viewporten
• Viewport percentage: En procentdel af viewportens højde (f.eks. 80%)
• Fixed height: En specifik pixelhøjde
• Max height: Sætter en øvre grænse, men lader overlay’et fylde mindre, hvis indholdet kræver mindre plads

Horisontal justering

Styrer, hvor overlay’et vises horisontalt:

• Left: Justerer til venstre side af viewporten
• Center: Centrerer overlay’et horisontalt
• Right: Justerer til højre side af viewporten

Vertikal position

Styrer den vertikale placering i forhold til headeren:

• Below header: Positionerer overlay’et direkte under dit header-element
• Fixed from top: En specifik pixelafstand fra toppen af viewporten

Designkonfiguration #

Det meste af Omni-search kan konfigureres ved at ændre de variabler, der findes i design-filerne.

I liquid template language har en variabel denne struktur:

{% assign variable_name = "variable value" %}

Som tommelfingerregel bør kun “variable value” ændres for at konfigurere Omni-search.

Mere tekniske brugere kan naturligvis 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 i værdien for variablen: os_brand_logo.

Variablen hedder typisk noget i stil med os_brand_logo, og det bør se sådan ud, når du har indsat logoet:

Uendelig/auto load #

Hvis du vil styre, om Omni-search automatisk skal indlæse flere produktresultater, når brugeren har scrollet til den sidste række af 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 din butik bruger et andet sprog, kan du oversætte tekstelementerne ved at ændre variabelværdierne.

Dette eksempel viser variablerne for sorteringsknappen:

Protip: Brug generativ AI (f.eks. chatGPT) til at oversætte på én gang ved at skrive: “Oversæt disse variable values fra engelsk til dansk. Returner hele koden, så den kan copy/pastes for at erstatte eksisterende kode: PASTE_VARIABLES_HERE”

Styling #

For at ændre noget stil, kan konfigurationen udføres i CSS-variablerne.

Skabelonerne anvender CSS-variabler, der har denne struktur:

--variable_name: variable_value;

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

Farver #

De konfigurerbare farver kan findes og ændres i sektionen under “Colors”-CSS-kommentaren /* Colors */

Skrifttyper #

Ligesom med farverne findes font-variablen under kommentaren /* Font */.

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

Standarddesign #

Standarddesignet for Omnisearch inkluderer:

• Variants dropdown support: Giver kunder mulighed for at vælge variantattributter (f.eks. størrelse, farve), inden de tilføjer til kurv.

• Mængdevælger.

• Native Add-to-Cart-knap, som notificerer Clerk.js, så analytics og merchandising forbliver synkroniseret.

• Rene, velstrukturerede markup med tydelige kommentarer.

• Centraliserede variabler for styling og opførsel, så det er nemt at ændre farver, afstande, labels og almindelige muligheder uden at ændre kernekoden.

• Pris-slider facet for hurtig filtrering af prisområde.

• Klikbare forslag, der straks udløser en søgning.

For developers #

Styling #

Designs består af et hoved-layout, CSS-styling og et sæt sub-designs, som kan refereres fra hoved-layoutet.

Du kan redigere alt dette for desktop og mobil separat. Som standard bruger Omni-search den samme HTML til alle skærmstørrelser og bruger CSS til at være fuldt responsiv. Derfor har Mobil-fanen ikke noget kode til at starte med.

Om nødvendigt kan du oprette et helt anderledes HTML-markup til mobil, som bruges på mindre skærme.

I starten vil du måske kun tilpasse nogle få ting for at få designet til at matche dit brand – Du kan altid ændre dit design senere.

HTML #

Dette er hoved-layoutet, der styrer placering af alle elementer. Det bruger Liquid som skabelonsprog.

I vores startdesigns er første sektion dedikeret til de mest almindelige ændringer, som sorteringslabels, valuta og de forskellige tekster, som 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 begrænset måde.

Tilgængelige sub-designs #

Alle design der tilføjes her, kan refereres i det generelle layout. 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 et sub-design ved at klikke på knappen med tre prikker.

For at redigere et sub-design, klik på dets Edit-ikon. Når du er færdig med at redigere, klik Save & close for at vende tilbage til hoved-layout-editoren.

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

• Inputfeltet id="clerk-omnisearch-input"
• Indholdsomslag id="clerk-omnisearch-content"

Når du vil se dit fremskridt, kan du gøre det ved at klikke på knappen “Preview design”.

De hyppigste ændringer til designs er disse:

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

• Skrifttyper: Tilpas om nødvendigt skrifttypen, så den matcher dit brands look.

• Farver: Du kan tilføje dit brands farver på de elementer, du vil fremhæve eller tilpasse dit site med, såsom knapper og tags.

• Knapper og tag-borders: Du kan justere deres farve, radius, bredde …

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

Overlay struktur #

Når omnisearch startes, oprettes et element med klassen clerk-omnisearch-overlay, som placeres nederst i body.

Her injicerer vi designet – da vi har input-elementet som del af designet, skal vi have nogle strukturelle krav for at sikre, at vi ikke genindlæser input-elementet på hver indlæsning. Strukturen skal se således ud under overlayet:

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

Inputfelt #

For at finde input-feltet skal det have denne identifikator clerk-omnisearch-input. Når trigger-elementet aktiveres, flytter vi fokus til dette element og lægger eventuel søgetekst i det, så brugeroplevelsen forbliver sømløs.

Indholdsomslag #

Indholdsomslaget er der, hvor det meste sker. Omslaget omkring det skal have identifikatoren clerk-omnisearch-content. Her skal facets, sliders og alt andet, der ikke er inputfeltet, placeres.

Klasser #

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

Lukknap #

clerk-omnisearch-close

Når denne klasse tildeles et element i designet, skjuler elementet overlayet.

Sortering #

clerk-omnisearch-sort

Finder sorteringsdropdowns og tilføjer lyttere til dem.

For at få et sorteringselement ind i designet, tilføj denne klasse til det valgte element, f.eks. et dropdown. For at virke skal elementet have formatet value:[desc|asc], altså den værdi, vi vil sortere efter, efterfulgt af kolon og så enten desc eller asc. Eventuelt kan man tilføje attributten data-sort-type, hvis man vil sortere kategorier eller sider.

Search Facet #

clerk-facet-search

Hvis der er facet-søgning til stede, oprettes en lytter og skjuler facets, der ikke matcher forespørgslen.

Klassen kontrollerer, om der er nogen facetsøgnings-elementer til stede på websiden. Facetsøgningsfunktionen gør det muligt for brugeren at søge i facets. For at det virker, skal elementet have en strengværdi.

Fuldt nulstil #

clerk-omnisearch-full-reset

Når elementer med denne klasse klikkes, nulstilles alle valgte facets og søgeforespørgslen.

Facet-nulstil #

clerk-omnisearch-facet-full-reset

Når elementer med denne klasse klikkes, fravælges alle aktive facets. Dette ses typisk på en ‘Clear all’-knap inden for en gruppe af facets, så brugeren nemt kan nulstille de valgte filtre.

Gruppér nulstil #

clerk-omnisearch-facet-group-reset

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

For at fravælge en hel gruppe af facets kan man give et element denne klasse. Når elementet aktiveres (f.eks. klikkes), fravælges alle elementer i gruppen, og denne facet-gruppe nulstilles. For at det virker, skal elementet have gruppen, der skal ryddes, som et attributnavn data-facet-group.

Facet nulstil #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal fravælge et enkelt element med det angivne group/value-attributpar.

Denne klasse er til brug i tilfælde, hvor man har behov for at fravælge et enkelt facet. Et element med denne klasse kan associeres med en bestemt facet i en gruppe ved at give det både data-facet-group og data-facet-value. Når det aktiveres, fravælges kun det tilknyttede facet og ikke andre udvalgte facets.

Facet klik #

clerk-facet

Elementer med denne klasse behandles som en selekterbar facet.

Alle facets skal have denne klasse og attributterne data-facet-group og data-facet-value, så vi ved, hvad brugeren trykker på.