Omnisearch

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

• 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 at integrere på dit site ved at bruge en af vores gode startskabeloner.
• Det matcher dit brand via ændring af nogle få standardindstillinger såsom logo, skrifttyper, farver m.m.
• Fuldstændig tilpasningsbar med HTML, CSS og Liquid for udviklere.

Kom godt i gang #

Omnisearch består af et tilpasningsbart Design til visuelle elementer og en Element-blok, som gør det muligt at installere den 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 for at gemme standarddesignet. Gå tilbage til designlisten eller hoveddesignet som et separat navigationsskridt.

Vores standarddesigns fungerer direkte fra 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 #

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. Tom tilstand-logik kan også manipuleres gennem Rules.

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

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

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

Afslut Design #

Designet, der bruges til at gengive 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 der foretages en søgning. 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 navnene, de skal vises som i søgeresultaterne. Hvis du ikke kan finde en specifik attribut på listen, kan du tilføje den i “filterbare attributter”-listen i Search Configuration.

Indsættelse på site #

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

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-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 hjemmesides url.

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

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 valgfrit søgefelt og trigger det baseret på en hændelse.

• Event styrer, hvad brugeren skal gøre for at udløse Omnisearch. Typisk vil du have den til at blive vist, når dine besøgende klikker på søgeikonet eller inputfeltet.

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

Sådan finder du din unikke CSS selector:

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

Brug af embedded kode #

Dette gør det muligt at tilføje Omnisearch med et snippet. Det kræver, at du kan redigere HTML-filerne på din webshop eller tilføje kode gennem en editor.

Hvis du har nogen ikke-gemte ændringer, skal du gemme dem for at generere embedkoden.

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

Erstat 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 embedkode 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>

Vistilstande #

Omnisearch understøtter to vistilstande, der styrer, hvordan søgeinterfacet vises på dit site. Konfigurer dette i Insert fanen, når du redigerer dit Omnisearch Element.

Fuld overlay #

Dette er standardtilstand. Når den udløses, dækker Omnisearch hele viewportet med et fuldskærmsoverdæk. Søgeinterfacet overtager hele siden og giver en fokuseret søgeoplevelse.

Brug denne tilstand, når du ønsker:

• Et forstyrrelsesfrit søgemiljø
• Fuld kontrol over søgelayoutet
• Et søgeinterface helt uafhængigt af dit sites header

Delvis overlay #

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

Brug denne tilstand, når du ønsker:

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

Konfigurationsmuligheder #

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

Header selector

CSS-selectoren for dit site’s header element. Omnisearch bruger denne til at placere overlayet direkte under din header, så det passer korrekt.

Eksempler på selectorer:

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

Search input selector

CSS-selectoren for din eksisterende søgeinputboks. Når den angives, synkroniserer Omnisearch med din header’s søgefelt og skaber en samlet søgeoplevelse, hvor indtastning i headerens søgeboks opdaterer Omnisearch-resultaterne.

Eksempler på selectorer:

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

Bredde

Styrer overlayets vandrette størrelse:

• Fuld bredde: Fylder hele viewportens bredde
• Indholdsbredde: Matcher bredden på et containerelement, som du angiver med en CSS-selector
• Fast bredde: En specifik pixelbredde, du definerer

Højde

Styrer overlayets lodrette størrelse:

• Fra header til bund: Fylder området fra under headeren og ned til bunden af viewporten
• Viewport-procent: En procentdel af viewportens højde (fx 80%)
• Fast højde: Et bestemt pixelantal
• Max højde: Sætter en øvre grænse, mens overlayet stadig kan blive mindre, hvis indholdet kræver mindre plads

Vandret justering

Styrer, hvor overlayet vises horisontalt:

• Venstre: Justerer til venstre side af viewporten
• Centreret: Centrerer overlayet horisontalt
• Højre: Justerer til højre side af viewporten

Lodret position

Styrer den lodrette placering i forhold til headeren:

• Under header: Placerer overlayet direkte under din header
• Fast fra top: En specifik forskydning i pixels fra toppen af viewporten

Designkonfiguration #

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

I liquid template language har en variabel denne struktur:

{% assign variable_name = "variable value" %}

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

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

Logo #

For at tilføje et logo til Omnisearch-designet, sæt os_brand_logo til URL’en til dit logo-billede.

Uendelig/auto load #

Hvis du vil styre, om Omni-search automatisk skal indlæse flere produktresultater, når brugeren når den sidste række af produkter, skal variablen sættes til true eller false. Variablen hedder typisk os_autoload. Sæt den til false for at forhindre automatisk indlæsning af flere resultater.

Oversættelser #

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

Oversæt sorteringsknap-variablerne i skabelonen sammen med de øvrige text-variabler.

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

Styling #

Hvis du vil ændre nogle af stilarterne, kan konfigurationen ske i CSS-variabler.

Skabelonerne bruger CSS-variabler der har denne struktur:

--variable_name: variable_value;

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

Farver #

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

Skrifttyper #

Ligesom med farverne findes skrifttype-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 (fx størrelse, farve), inden de lægger i kurven.

• Antalsvælger.

• Native Tilføj-til-kurv-knap, der informerer Clerk.js, så analyse og merchandising holdes synkroniseret.

• Rengjort, veldokumenteret markup med tydelige kommentarer.

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

• Price 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, som kan refereres i hovedlayoutet.

Du kan redigere alle disse for Desktop og Mobil separat. Som standard bruger Omni-search samme HTML for alle skærmstørrelser og bruger CSS for at blive fuldt responsiv. Derfor er der ingen kode i Mobil-fanen til at starte med.

Om 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 nok kun justere et par 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 templating-sprog.

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

CSS #

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

Tilgængelige sub-designs #

I søgekoderedaktøren er Available Designs and Components under hovedkodeområdet. Scroll ned for at finde og redigere en komponent. Brug fanerne over editoren for at skifte mellem desktop og mobil HTML/CSS.

Når du har redigeret en komponent, skal du klikke på Save, og derefter gå tilbage til hoveddesignet separat. Alle designs, der er 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 et sub-design ved at klikke på knappen med de tre prikker.

For at redigere et sub-design, klik på Rediger-ikonet. Når du er færdig, klik på Gem & luk for at gå tilbage til hovedlayouteditoren.

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

• Input-feltet id="clerk-omnisearch-input"
• Indholdsomslaget id="clerk-omnisearch-content"

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

De mest almindelige ændringer i designs er:

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

• Skrifttyper: Tilpas om nødvendigt skrifttyperne, så det matcher dit site.

• Farver: Tilføj dit brands farver til de elementer, du vil fremhæve eller samstemme med resten af dit site som knapper og tags.

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

• Links: Hvis du har en særlig stil for dine links, kan du også redigere dem.

Reaktive vs statiske dele #

Det er vigtigt at forstå hvilke dele af Omnisearch der re-render på hver forespørgsel — og hvilke ikke — når du tilpasser designet.

Statiske dele rendres én gang, når overlayet åbnes, og røres ikke igen på efterfølgende forespørgsler:

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

Inputfeltet er med vilje statisk. Hvis det blev re-renderet ved hvert tastetryk, ville det afbryde besøgendes indtastning og ødelægge søgeoplevelsen.

Reaktive dele er alt indenfor #clerk-omnisearch-content. Denne wrapper rendres helt om på hver forespørgsel:

• Produktresultater
• Facets og filtre
• Kategorier, sider og forslag
• Resultatantal og sorteringskontroller
• Ingen-resultat-beskeder

Hvis du vil have et element til at opdatere, når forespørgslen ændres — fx et live resultatantal i headeren — skal det ligge inde i #clerk-omnisearch-content. Hvis det skal forblive synligt og stabilt mens besøgende skriver, placeres det udenfor denne wrapper.

No Results State #

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

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

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

{% else %}
  <!-- Ingen resultater 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, når Omnisearch viser fuzzy eller relaterede match i stedet for nøjagtige resultater, og vise en passende besked:

{% if results.products.no_exact_match %}
  <div class="clerk-no-exact-match">
    Ingen præcise resultater for "{{ query }}" — viser nærmeste match:
  </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 i no-results-beskeden er almindelig HTML inde i designet, så den kan oversættes eller styles frit uden at ændre konfiguration udenfor designeditoren.

Overlay-struktur #

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

Dette er, hvor vi indsprøjter designet, og da vi har input-elementet som en del af designet, skal vi stille visse strukturelle krav for ikke at re-render input-elementet ved 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 inputfeltet skal det have følgende identifikator: clerk-omnisearch-input. Når trigger-elementet aktiveres, flyttes markøren til dette element, og vi tilføjer den aktuelle forespørgsel, så brugeroplevelsen forbliver så sømløs som muligt.

Content Wrapper #

Content wrapperen er, hvor det meste sker; wrappen omkring den skal have identifikatoren clerk-omnisearch-content. Her skal facets, sliders og alt andet som ikke er inputfelt placeres.

Klasser #

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

Luk-knap #

clerk-omnisearch-close

Når klassen tilføjes til et element i designet, vil det element skjule overlayet.

Sortering #

clerk-omnisearch-sort

Finder sorteringsdropdowns og tilføjer lyttere til dem.

For at få en sortering i designet, tilføj denne klasse til det valgte element, fx et dropdown. For at det virker, skal elementet være følgende value:[desc|asc], altså værdien vi vil sortere, et kolon, og enten desc/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 facetsøgning til stede, oprettes en lytter, og facets der ikke matcher forespørgslen skjules.

Klassen, når til stede på en webside, tjekker efter facetsøgnings-elementer. Facetsøgninger giver brugerne mulighed for at søge i facets. For at det virker, skal elementet have en streng-værdi.

Full Clear #

clerk-omnisearch-full-reset

Når klassen klikkes, vil elementer med den klasse nulstille alle valgte facets og resette forespørgslen.

Facets Clear #

clerk-omnisearch-facet-full-reset

Når klassen klikkes, vil elementer med klassen fravælge alle aktive facets. Dette ses typisk på en ‘Clear all’-stil-knap indenfor en facet-gruppe, så brugeren let kan nulstille filtre.

Group Clear #

clerk-omnisearch-facet-group-reset

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

For at tilbyde funktionen at fravælge en hel facet-gruppe, kan et element tilføjes denne klasse. Når elementet aktiveres (fx klikkes), fravælges alle elementer i gruppen, og den pågældende facet-gruppe resettes. For at det virker, skal elementet have navnet på den gruppe, der skal nulstilles, som attribut med navnet data-facet-group.

Facet Clear #

clerk-omnisearch-facet-reset

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

Denne klasse er designet til scenarier, hvor et enkelt facet skal fravælges. Et element med klassen kan knyttes til en bestemt facet i en gruppe ved at give det både data-facet-group og data-facet-value. Når det aktiveres, vil det kun fravælge den tilknyttede facet ud fra group/value-parret.

Facet Click #

clerk-facet

Elementer med denne klasse behandles som et valgbart facet.

Alle facets skal have en klasse med data-facet-group og data-facet-value attributter, så vi ved hvad kunden trykker på.