Omnisearch

Drevet af Clerks nyeste Search-teknologi giver Omnisearch dig fleksibiliteten, du har brug for, for at tilbyde den bedste moderne søgeoplevelse:

• 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.
• Matcher dit brand gennem ændring af nogle få standardindstillinger som logo, fonte, farver og mere.
• Fuldstændig tilpasningsbar med HTML, CSS og Liquid for udviklere.

Kom godt i gang #

Omnisearch består af et tilpasseligt Design til det visuelle og et Element-blok, som gør det muligt at installere det 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 standarddesigns fungerer direkte 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.

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 skal vises. Empty State Logic kan også tilpasses via Rules.

• Name hjælper dig med at identificere dit element, hvis du ønsker at oprette flere. Det kan altid æ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 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 dette Bestsellers, men det kan også personaliseres, f.eks. med Visitor Recommendations.

Færdiggør Design #

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

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

Du kan styre 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 Facetter, og angiv navnene, de skal vises som i søgeresultaterne. Hvis du ikke kan finde en specifik attribut på listen, kan du tilføje den i listen over “filterbare attributter” i Search Configuration.

Indsæt på sitet #

Den anbefalede metode er injektion, men du kan også indsætte elementet på dit site med en embedcode.

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 test og klar til at gøre det offentligt.

Brug af injektion #

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 udløse det baseret på en begivenhed.

• Event styrer, hvad brugeren skal gøre for at udløse Omnisearch. Sandsynligvis vil du have det til at blive vist, når dine besøgende klikker på dit søgeikon eller inputfelt.

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

Find din unikke CSS selector sådan:

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

Brug af embedded kode #

Dette lader dig tilføje Omnisearch med et snippet. For at bruge denne metode skal du kunne redigere HTML-filerne i din webshop eller tilføje kode med en editor.

Hvis du har ændringer, der ikke er gemt, så gem dem for at generere embedded-koden.

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

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

Herunder ses 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, som styrer, hvordan søgeinterfacet vises på dit site. Konfigurer dette i Insert fanen, når du redigerer dit Omnisearch-Element.

Fuldt overlay #

Dette er standardtilstanden. Når den udløses, dækker Omnisearch hele vinduet med et fuldskærms overlay. Søgeinterfacet overtager siden og giver en fokuseret søgeoplevelse.

Brug denne tilstand hvis du ønsker:

• Et distraktionsfrit søgemiljø
• Fuld kontrol over søgelayoutet
• At søgeinterfacet skal være helt uafhængigt af dit site’s header

Delvist overlay #

Denne tilstand integrerer Omnisearch med din eksisterende side-header. I stedet for at dække hele skærmen vises overlayet under din header, mens denne stadig er synlig og funktionsdygtig.

Brug denne tilstand hvis du ønsker:

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

Konfigurationsmuligheder #

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

Header selector

CSS-selectoren for dit sites header-element. Omnisearch bruger denne til at placere overlayet direkte under din header for korrekt justering.

Eksempler på selectors:

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

Search input selector

CSS-selectoren for dit eksisterende søgefelt. Når den er angivet, synkroniserer Omnisearch med din headers søgefelt, så brugeren får en samlet søgeoplevelse, hvor indtastning i header-feltet opdaterer Omnisearch-resultater.

Eksempler på selectors:

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

Width

Styrer overlayets vandrette størrelse:

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

Height

Styrer overlayets lodrette størrelse:

• From header to bottom: Fylder området fra under headeren og ned til bunden af vinduet
• Viewport percentage: En procentdel af vindueshøjden (f.eks. 80%)
• Fixed height: En specifik pixelhøjde
• Max height: Sætter en øvre grænse, men tillader overlayet at være mindre, hvis indholdet kræver mindre plads

Horizontal alignment

Styrer, hvor overlayet vises vandret:

• Left: Justeret til venstre side af vinduet
• Center: Centreret vandret
• Right: Justeret til højre side af vinduet

Vertical position

Styrer den lodrette placering i forhold til headeren:

• Below header: Placerer overlayet direkte under dit header-element
• Fixed from top: Et bestemt pixel-offset fra toppen af vinduet

Designkonfiguration #

Størstedelen af Omni-search kan konfigureres ved at ændre de variabler, der er i designfilerne.

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 et logo til Omnisearch-design, sæt os_brand_logo til URL’en for dit logo.

Infinite/auto load #

Hvis du vil bestemme, 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. Sæt den til false for at forhindre Omnisearch i automatisk at indlæse flere resultater.

Oversættelser #

Som standard er skabelonen på engelsk. Hvis din butik har et andet sprog, kan du oversætte tekstelementerne ved at ændre variable-værdierne.

Oversæt også variabler til sorteringsknapperne i skabelonen sammen med de andre tekstvariabler.

Protip: Brug generativ AI (fx chatGPT) til bulk-oversættelse 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, kan du konfigurere det i CSS-variablerne.

Skabelonerne bruger CSS-variabler, som har denne struktur:

--variable_name: variable_value;

For mere tekniske brugere kan individuelle CSS-regler justeres for at ændre designet mere grundlæggende.

Farver #

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

Fonte #

Ligesom farverne kan fontvariablen findes under kommentaren /* Font */

Der er typisk en variabel som: --font-family: 'Kumbh Sans', sans serif;

Standarddesign #

Standarddesignet for Omnisearch inkluderer:

• Variants dropdown support: Lad køberne vælge variantattributter (f.eks. størrelse, farve) før de lægger i kurven.

• Antalsvælger.

• Indbygget Tilføj-til-kurv-knap, der giver besked til Clerk.js, så analyse og merchandising holdes opdateret.

• Rydelig, velstruktureret markup med klare kommentarer.

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

• Pris-slider facet til hurtig række-filtrering.

• Klikbare forslag, som 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 fra hovedlayoutet.

Du kan redigere dem alle for Desktop og Mobil separat. Som standard bruger Omni-search den samme HTML til alle skærmstørrelser og gør designet fuldt responsivt via CSS. Derfor er der ikke nogen kode i Mobile-fanen som udgangspunkt.

Hvis nødvendigt, kan du oprette et helt andet HTML-markup til Mobil, som så bruges på små skærme.

Først vil du typisk kun justere nogle få ting for at få designet til at matche dit brands udtryk – du kan altid redigere dit design senere.

HTML #

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

I vores startdesigns er første sektion reserveret til de mest almindelige elementer, der ændres, såsom sorteringslabels, valuta og forskellige tekster, der kan oversættes til dit sprog.

CSS #

Stylingen injiceres sammen med HTML’en 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 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 ethvert sub-design ved at klikke på de tre prikker.

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

Nogle elementer skal have bestemte identifikatorer, som f.eks.:

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

Når du vil tjekke dine ændringer, kan du gøre det ved at klikke på “Preview design”-knappen.

De hyppigste ændringer i design er disse:

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

• Fonte: Justér fontene, hvis det er nødvendigt, for at matche dit sites visuelle identitet.

• Farver: Tilpas dine brandfarver på de elementer, du vil fremhæve eller tilpasse resten af sitet, som knapper og tags.

• Knapper og tag-kanter: Juster farve, radius, bredde osv.

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

Reaktive vs statiske dele #

Det er vigtigt at forstå hvilke dele af Omnisearch, der genskriver sig selv for hver forespørgsel – og hvilke der ikke gør – når du tilpasser designet.

Statiske dele renderes kun én gang, når overlayet åbnes, og bliver ikke rørt ved senere søgninger:

• Overlay-containeren selv (clerk-omnisearch-overlay)
• Søgeinput-feltet (#clerk-omnisearch-input)
• Enhver HTML i designet udenfor #clerk-omnisearch-content — som logo, luk-knap eller topbar

Input-feltet er bevidst statisk. Hvis det blev rendret igen for hvert tastetryk, ville det afbryde brugerens indtastning og ødelægge søgeoplevelsen.

Reaktive dele er alt indenfor #clerk-omnisearch-content. Hele denne wrapper rendres igen for hver søgning:

• Produktresultater
• Facetter og filtre
• Kategorier, sider og forslag
• Resultattal og sorteringskontroller
• “Ingen resultater”-beskeder

Hvis du vil have et element til at opdatere, når søgeforespørgslen ændrer sig – fx et livevisende resultattal i headeren – så skal det placeres inde i #clerk-omnisearch-content. Hvis det skal være synligt og stabilt, mens brugeren skriver, skal det placeres udenfor denne wrapper.

“Ingen resultater”-tilstand #

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

Den anbefalede tilgang er at tjekke om products er tom, og ellers vise en fallback-slider og en tilpasset besked:

{% if products.length > 0 %}
  <!-- Normale resultater -->
  {% for product in products %}
    <!-- produktkort -->
  {% endfor %}

{% else %}
  <!-- Fallback når intet findes -->
  <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, når Omnisearch viser fuzzy eller relaterede 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 nærmeste matches:
  </div>
{% endif %}

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

Teksten i “ingen resultater”-beskeden er almindelig HTML i designet, så den frit kan oversættes eller styles uden at ændre noget udenfor design-editoren.

Overlay-struktur #

Når omnisearch startes, opretter den et element med klassen clerk-omnisearch-overlay og indsætter den i bunden af body.

Her vil vi indsætte designet, og da vi har inputfeltet som del af designet, skal vi have nogle strukturelle krav for at være sikre på, at inputfeltet ikke rendres igen på hver forespørgsel. Strukturen bør se sådan ud under overlayet:

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

Inputfelt #

Inputfeltet skal have identifikatoren clerk-omnisearch-input. Når trigger-elementet er aktiveret, flytter vi automatisk markørfokus til dette felt og tilføjer eventuel eksisterende forespørgsel, så brugeroplevelsen forbliver sømløs.

Content Wrapper #

Content wrapperen er der, hvor det meste sker – den skal have identifikatornavnet clerk-omnisearch-content. Her skal facetter, sliders og alt andet end inputfeltet placeres.

Klasser #

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

Luk-knap #

clerk-omnisearch-close

Når klassen sættes på et element i designet, vil dette element skjule overlayet.

Sortering #

clerk-omnisearch-sort

Finder sorterings-dropdowns og tilføjer lyttere til dem.

For at få et sorteringselement i designet, tilføj denne klasse til det valgte element, f.eks. et dropdown. For at virke, skal elementet have følgende value:[desc|asc], altså værdien vi vil sortere, kolon og 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 search, oprettes en lytter, og facetter der ikke matcher søgningen skjules.

Klassen ser efter, om der findes facet search-elementer på en side. Facet searches giver brugerne mulighed for at søge indeni facetterne. For at det virker, skal elementet have en strengværdi.

Full Clear #

clerk-omnisearch-full-reset

Når elementer med denne klasse klikkes, ryddes alle valgte facetter og forespørgslen nulstilles.

Facets Clear #

clerk-omnisearch-facet-full-reset

Når elementer med denne klasse klikkes, fjernes alle aktive facetter. Typisk på en ‘Ryd alle’-knap i en gruppe af facetter, så brugerne nemt kan nulstille udvalgte filtre.

Group Clear #

clerk-omnisearch-facet-group-reset

Når der klikkes på et element med denne klasse, fravælges alle underliggende elementer i gruppen.

For at muliggøre rydning af en hel gruppe facetter, kan et element gives denne klasse. Når det aktiveres (f.eks. klik), deselecter det alle elementer i gruppen og nulstiller gruppen. For at det virker, skal elementet have attributten data-facet-group med det gruppenavn, der skal ryddes.

Facet Clear #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal kunne afvælge et enkelt element med det angivne gruppe-/værdipar.

Denne klasse bruges, når det er nødvendigt at afvælge en enkelt facet. Elementet skal have både data-facet-group og data-facet-value. Ved aktivering fjernes kun den tilknyttede facet, mens andre udvalgte facetter forbliver.

Facet Click #

clerk-facet

Elementer med denne klasse behandles som valgbare facetter.

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