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.
• Nem integration på dit site med en af vores gode startskabeloner.
• Tilpasser sig dit brand gennem få ændringer i standardindstillinger som logo, skrifttyper, farver og mere.
• Fuldstændig tilpasselig med HTML, CSS og Liquid for udviklere.

Kom godt i gang #

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

Oprettelse af et design #

Dette gøres i Search > Designs > New Design

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

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

Vores standarddesign fungerer lige ud af boksen og kan altid redigeres senere. Redigering kræver kendskab til HTML, CSS og Liquid. Se Styling i denne guide for mere info.

Opret et Element #

Det sker i Search > Element > New Element

Element-blokke er beholdere til 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å manipuleres via Rules.

• Navn hjælper dig med at identificere dit element, hvis du vil oprette mere end ét. Det kan altid ændres senere.

• Elementtype er som standard Omnisearch og bør ikke ændres. Her kan du også tilføje filtre 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, inden der er skrevet noget. Standard er Bestsellers, men det kan også personliggøres fx med Visitor Recommendations.

Færdiggør design #

Det design, der skal gengive Element-blokken. Vælg det design, du har oprettet.

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

Du kan styre antallet af resultater pr. type, hver gang en søgning foretages. Vi anbefaler generelt følgende mængder:

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

Vælg til sidst, hvilke attributter du vil inkludere som Facets, og giv dem de navne, de skal vises med i søgeresultaterne. Hvis du ikke kan finde en bestemt attribut på listen, kan du tilføje den under “filterbare attributter” i Search Configuration.

Indsæt på siden #

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

• In preview giver dig mulighed for at teste dit element uden at påvirke din live-side. Du kan åbne sitet i preview ved at klikke på “Open site in preview” eller ved at tilføje ?clerk_content_mode=preview til din sitemap-url.

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

Brug af injection #

Dette er den nemmeste måde at installere på. Clerk tilføjer automatisk Omnisearch-koden på dit site ved at målrette et søgefelt, du vælger, og udløser det baseret på en begivenhed.

• Event styrer, hvad brugeren skal gøre for at udløse Omnisearch. Du ønsker sandsynligvis, at den vises, når dine besøgende klikker på dit søgeikon eller søgefelt.

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

Sådan finder du din unikke CSS-selector:

1. Inspicer koden på dit site. I de fleste browsere kan du højreklikke hvor som helst og vælge Inspect eller tilsvarende.
2. Find det element, du vil målrette mod.
3. Højreklik på det, og vælg copy > copy selector

Brug af embedded kode #

Hvis du har ikke-gemte ændringer, så gem disse for at generere embed-koden.

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

Udskift INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selector for det html-element, der skal udløse din Omnisearch.

Herunder er 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>

Visningstilstande #

Omnisearch understøtter to visningstilstande, der styrer, hvordan søgegrænsefladen vises på dit site. Konfigurer dette under Insert fanen, når du redigerer dit Omnisearch Element.

Full overlay #

Dette er standardtilstanden. Når Omnisearch udløses, dækker den hele vinduet med et full-screen overlay. Søgegrænsefladen overtager siden og giver en fokuseret søgeoplevelse.

Brug denne tilstand, når du ønsker:

• Et fokusert, forstyrrelsesfrit søgemiljø
• Fuld kontrol over søgelayoutet
• At søgegrænsefladen er helt uafhængig af dit site’s header

Partial overlay #

Denne tilstand integrerer Omnisearch med dit eksisterende site header. I stedet for at dække hele skærmen, vises overlægget under din header, mens headeren stadig er synlig og funktionel.

Brug denne tilstand, når du ønsker:

• At din header og navigation forbliver tilgængelig under søgning
• En mere problemfri integration med dit sites eksisterende layout
• At søgeoplevelsen føles som en naturlig del af sitet

Konfigurationsmuligheder #

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

Header selector

CSS-selector for dit site’s header-element. Omnisearch bruger dette til at placere overlægget direkte under din header og sikre korrekt justering.

Eksempler på selectors:

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

Search input selector

CSS-selector for dit eksisterende søgefelt/input. Når den er angivet, synkroniserer Omnisearch sig med din headers søgefelt og skaber en samlet søgeoplevelse, hvor indtastninger i headerens søgefelt opdaterer Omnisearch-resultater.

Eksempler:

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

Bredde

Styrer overlayets vandrette størrelse:

• Full width: Fylder hele vinduets bredde
• Content width: Matcher bredden på et container-element, du definerer med en CSS-selector
• Fixed width: En specifik pixelbredde, du angiver

Højde

Styrer overlayets lodrette størrelse:

• Fra header til bund: Fylder området fra under header til bund af vinduet
• Viewport procent: En procentdel af vinduets højde (fx 80%)
• Fixed height: En specifik pixelhøjde
• Max height: Sætter en maksimal højde, men lader overlayet være mindre, hvis indholdet kræver mindre plads

Vandret placering

Kontrollerer, hvor overlayet vises vandret:

• Venstre: Justeres til venstre kant af vinduet
• Centreret: Centrerer overlayet vandret
• Højre: Justeres til højre kant

Lodret placering

Styrer placeringen i forhold til headeren:

• Below header: Placerer overlayet direkte under header-elementet
• Fixed from top: En specifik pixelafstand fra toppen af vinduet

Design konfiguration #

Det meste af Omni-search kan konfigureres ved at ændre variablerne i design-filerne.

I liquid template language har en variabel følgende struktur:

{% assign variable_name = "variable value" %}

Som tommelfingerregel bør kun variablens værdi ændres for at konfigurere Omni-search.

Tekniske brugere kan selvfølgelig stadig ændre specifikke HTML- og CSS-linjer, se denne sektion.

Logo #

For at tilføje logoet til Omni-search-designet, find blot billedets URL og indsæt det som værdi i variablen: os_brand_logo.

Variablen hedder typisk noget som os_brand_logo, og det skal se sådan ud, når logoet er indsat:

Infinite/auto load #

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

Oversættelser #

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

Dette eksempel viser variablerne til sorteringsknappen:

Protip: Brug generativ AI (fx chatGPT) til at oversætte mange 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 #

Styling kan ændres i CSS-variablerne.

Skabelonerne bruger CSS-variabler med følgende struktur:

--variable_name: variable_value;

Mere tekniske brugere kan ændre individuelle CSS-regler for mere avancerede designændringer.

Farver #

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

Skrifttyper #

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

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

Standarddesign #

Standarddesignet for Omnisearch inkluderer:

• Variants dropdown support: Lader kunder vælge variant-attributter (fx størrelse, farve) før de tilføjer til kurv.

• Antalsvælger.

• Native Add-to-Cart-knap, der notificerer Clerk.js, så analyser og merchandising holdes i sync.

• Rydeligt markup med klare kommentarer.

• Centraliserede variabler til styling og adfærd, så det er nemt at justere farver, afstand, labels og almindelige indstillinger uden at ændre kernekode.

• Pris-slider facet til hurtig intervalfiltrering.

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

For udviklere #

Styling #

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

Du kan redigere disse separat for Desktop og Mobile. Som standard bruger Omni-search samme HTML for alle skærmstørrelser og bruger CSS til at være fuldt responsiv. Derfor er der som udgangspunkt ingen kode i Mobile-fanen.

Om nødvendigt kan du lave et helt andet HTML-markup til Mobile, som kun bruges på mindre skærme.

Indledningsvist ønsker du måske kun at justere få ting, så designet matcher dit brands look-and-feel – Du kan altid redigere dit design senere.

HTML #

Dette er hovedlayoutet, der styrer placeringen af alle elementer. Det bruger Liquid som templating-sprog.

I vores startdesigns er den første sektion dedikeret til de mest ændrede elementer, fx sorteringslabels, valuta og forskellige tekster, du kan oversætte til dit sprog.

CSS #

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

Tilgængelige Sub-designs #

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

Du kan slette, duplikere og kopiere reference til et sub-design ved at klikke på tre-punkts-knappen.

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

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

• Inputfeltet id="clerk-omnisearch-input"
• Content wrapper 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 i design er disse:

• Logo: Gå ind i TopBarSearchForm og udskift det eksisterende logo med dit eget.

• Fonts: Juster skrifttyper om nødvendigt, så de matcher dit brands look-and-feel.

• Farver: Du kan tilføje dit brands farver til de elementer, du ønsker at fremhæve eller tilpasse til resten af dit site, såsom knapper og tags.

• Knapper og tag-kanter: Du kan justere farve, radius, bredde osv.

• Links: Hvis du har en særlig styling for links, kan du også redigere den.

Reaktive vs Statiske dele #

Det er vigtigt at forstå, hvilke dele af Omnisearch der genrenders pr. søgning – og hvilke der ikke – når du tilpasser designet.

Statiske dele rendres én gang, når overlayet åbnes, og ændres ikke ved efterfølgende søgninger:

• Selve overlay-containeren (clerk-omnisearch-overlay)
• Søgeinputfeltet (#clerk-omnisearch-input)
• Al HTML i designet udenfor #clerk-omnisearch-content – fx logo, luk-knap eller topbar

Inputfeltet er med vilje statisk. At genrendre det ved hvert tastetryk ville forstyrre brugeroplevelsen og bryde søgningen.

Reaktive dele er alt inde i #clerk-omnisearch-content. Denne wrapper genrendres ved hver søgning:

• Produktresultater
• Facets og filtre
• Kategorier, sider og forslag
• Resultattællinger og sorteringskontroller
• Ingen-resultat-beskeder

Hvis du vil have, at et element opdateres på hver søgning – fx et live result-count i header – skal det være inde i #clerk-omnisearch-content. Hvis det skal forblive synligt og stabilt, mens brugeren skriver, skal det placeres udenfor denne wrapper.

No Results State #

Når en søgeforespørgsel ikke giver produkter, viser Omnisearch ikke automatisk et fallback – det styres i designet med Liquid.

Den anbefalede tilgang er at tjekke, om produktlisten er tom og betinget vise en fallback-slider og en custom besked:

{% if products.length > 0 %}
  <!-- Normal results -->
  {% for product in products %}
    <!-- product card -->
  {% endfor %}

{% else %}
  <!-- No results fallback -->
  <div class="clerk-no-results-message">
    Ingen resultater for "{{ query }}" — her er nogle populære valg i stedet:
  </div>

  <span class="clerk"
    data-api="recommendations/popular"
    data-limit="8"
    data-template="@omnisearch-product-card">
  </span>
{% endif %}

Du kan også bruge results.products.no_exact_match til at opdage, hvornår Omnisearch viser upræcise eller beslægtede resultater i stedet for eksakte matches, og vise en passende besked:

{% if results.products.no_exact_match %}
  <div class="clerk-no-exact-match">
    Ingen eksakte resultater for "{{ query }}" — viser de nærmeste matches:
  </div>
{% endif %}

Begge mønstre kan kombineres. En typisk opsætning viser no_exact_match-beskeden inline over resultaterne og fallback-slideren kun, når products.length == 0.

Teksten til ingen-resultat-beskeden er almindelig HTML i designet, så den kan frit oversættes og styles uden at skulle ændre nogen konfiguration udenfor designeditoren.

Overlay-struktur #

Når omnisearch startes, oprettes et element med klassen clerk-omnisearch-overlay, som injiceres i bunden af body.

Det er her, vi injicerer designet, og da vi har input-elementet som en del af designet, er der strukturelle krav for at sikre, at inputfeltet ikke genrendres på hver søgning. Strukturen skal 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 identifikatoren clerk-omnisearch-input. Når trigger-elementet aktiveres, flyttes cursoren automatisk til dette felt, og vi tilføjer den aktuelle forespørgsel, så brugeroplevelsen forbliver glidende.

Content Wrapper #

Content wrapperen er der, hvor det meste sker – denne wrapper rundt om det hele skal have identifikatoren clerk-omnisearch-content. Her skal facets, sliders og alt andet, der ikke er inputfeltet, være.

Klasser #

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

Luk-knap #

clerk-omnisearch-close

Når du tilføjer denne klasse til et element inde i designet, skjuler det overlayet.

Sortering #

clerk-omnisearch-sort

Finder sorterings-dropdowns og tilføjer lyttere.

For at få et sorteringselement i designet skal du tilføje dette til det valgte element, fx en dropdown. For at fungere skal elementet have følgende værdi value:[desc|asc], altså værdien der sorteres på, kolon, og så enten desc eller asc. Valgfrit kan du 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, oprettes en lytter, og facets, der ikke matcher søgningen, skjules.

Klassen tjekker for eksistensen af facet-søgeelementer på websiden. Facet-søgninger giver brugeren mulighed for at søge blandt facets. For at det virker, skal elementet have en string-værdi.

Full Clear #

clerk-omnisearch-full-reset

Når elementer med klassen klikkes, ryddes alle valgte facets og forespørgslen nulstilles.

Facets Clear #

clerk-omnisearch-facet-full-reset

Når klassen klikkes, deselectes alle aktive facets. Det ses typisk på en ‘Ryd alle’-knap i en facetgruppe, så brugeren nemt kan nulstille de valgte filtre i én handling.

Group Clear #

clerk-omnisearch-facet-group-reset

Når elementer med denne klasse klikkes, deselectes alle underliggende elementer i gruppen.

For at give mulighed for at deselecte en hel facetgruppe skal der angives denne klasse på et element. Når elementet aktiveres (fx klikkes), bliver alle elementer i den pågældende gruppe deselectet. For at det virker, skal elementet have den gruppe, der skal ryddes, som attribut med navnet data-facet-group.

Facet Clear #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal deselecte et enkelt element med det angivne group/value-attribut-par.

Klassen er lavet til scenarier, hvor det kun er nødvendigt at deselecte en enkelt facet. Et element med denne klasse kan kobles til en bestemt facet i en gruppe ved både at give det et data-facet-group og et data-facet-value-attribut. Når det aktiveres, deselectes kun den tilknyttede facet, mens andre valgte facets forbliver uændrede.

Facet Click #

clerk-facet

Elementer med denne klasse behandles som et valgbart facet.

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