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 indsnævre deres søgning på en intuitiv og nem måde.
• Let at integrere på din side med en af vores gode startskabeloner.
• Matcher dit brand ved at ændre et par standardindstillinger som logo, skrifttyper, farver og mere.
• Fuldstændig tilpasningsdygtig med HTML, CSS og Liquid for developers.

Kom godt i gang #

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

Opret 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 direkte og kan altid redigeres senere. Redigering kræver kendskab til 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 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 ønsker at oprette flere. Det kan ændres senere.

• Elementtype er Omnisearch som standard og bør ikke ændres. Her kan du også tilføje filters hvis nødvendigt, men i de fleste opsætninger er dette ikke nødvendigt.

• Empty State Logic giver dig mulighed for at vælge, hvilke produkter der vises, når Omnisearch åbnes initialt, før der er skrevet noget. Som standard er dette Bestsellers, men det kan også personligt tilpasses fx med Visitor Recommendations.

Færdiggør design #

Designet som skal 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 styre antal viste resultater for hver type, hver gang der søges. Vi anbefaler generelt følgende mængder:

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

Til sidst vælger du de attributter, du ønsker som Facets og angiver de navne, der skal vises som i søgeresultaterne. Hvis du ikke kan finde en specifik attribut på listen, tilføjer du den i “filterbare attributter” listen under Search Configuration.

Indsættelse på siden #

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

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

• På min live-side bruges, når du er færdig med at teste og klar til at gøre den offentlig.

Brug af injektion #

Dette er den nemmeste måde at installere på. Clerk tilføjer automatisk Omnisearch-koden til din side ved at sigte mod et søgefelt efter eget valg og udløse baseret på en begivenhed.

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

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

Find din unikke CSS selector sådan:

1. Inspicer din sides kode. I de fleste browsere kan du højreklikke hvor som helst på siden, og vælge Inspekter eller lignende.
2. Find det element, du vil rette mod
3. Højreklik over det, og vælg muligheden kopier > kopier vælger

Brug af embedded kode #

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

Kopiér denne kode og sæt den ind i filen, der genererer alle sider på webshoppen, helst tæt på slutningen af </body>-tagget.

Udskift INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selectoren 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øgeinterfacet vises på din side. Konfigurer dette i Insert fanen, når du redigerer dit Omnisearch Element.

Fuldt overlay #

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

Brug denne tilstand, når du ønsker:

• Et distraktionsfrit søgemiljø
• Fuld kontrol over søgelayout
• At søgeinterfacet er helt uafhængigt af dit websteds header

Delvist overlay #

Denne tilstand integrerer Omnisearch med dit eksisterende sidehoved (header). I stedet for at dække hele skærmen, vises overlayet under dit header, mens header forbliver synlig og funktionsdygtig.

Brug denne tilstand, når du ønsker:

• At header og navigation stadig er tilgængelige under søgning
• En mere integreret oplevelse med dit websteds layout
• At søgeoplevelsen føles som en naturlig del af siden

Konfigurationsmuligheder #

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

Header selector

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

Eksempler på selectors:

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

Search input selector

CSS-selectoren for dit eksistrende søgeinputfelt. Når dette gives, synkroniserer Omnisearch med din headers søgefelt, så indtastning i headerens søgefelt opdaterer Omnisearch-resultaterne.

Eksempler på selectors:

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

Bredde

Styrer overlayets horisontale størrelse:

• Fuld bredde: Fylder hele visningsområdets bredde
• Indholdsbredde: Matcher bredden på et container-element, du angiver med en CSS-selector
• Fast bredde: En specifik pixelbredde du selv definerer

Højde

Styrer overlayets vertikale størrelse:

• Fra header til bund: Fylder pladsen fra under header til bunden af visningsområdet
• Procentdel af viewport: En procentdel af visningshøjden (f.eks. 80%)
• Fastsat højde: En specifik pixelhøjde
• Maks højde: Sætter en øvre grænse men tillader overlay at være mindre, hvis indholdet kræver det

Horisontal placering

Styrer hvor overlay vises horisontalt:

• Venstre: Justerer til venstre side af visningsområdet
• Center: Centrerer overlay horisontalt
• Højre: Justerer til højre side af visningsområdet

Vertikal position

Styrer placeringen i forhold til headeren:

• Under header: Placerer overlay direkte under dit header-element
• Fast fra top: En specifik pixelafstand fra toppen af visningsområdet

Designkonfiguration #

Det meste 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 værdien for variablen æ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 logo til Omni-search-designet, find linket til billedet og indsæt det som værdi 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 logoet er sat ind:

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. I dette eksempel indlæser Omni-search ikke automatisk flere produktresultater.

Oversættelser #

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

Dette eksempel viser variablerne til sorteringsknappen:

Protip: Brug generativ AI (fx chatGPT) til at oversætte bulk 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 på styling kan konfigurationen ske i CSS-variablerne.

Skabelonerne bruger CSS-variabler, der har samme 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 sektionen under “Colors”-kommentaren i CSS /* Colors */

Skrifttyper #

På samme måde som farverne kan skrifttypevariablen findes under /* Font */ kommentaren.

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

Standarddesign #

Standarddesignet for Omnisearch inkluderer:

• Variants dropdown-support: Lad kunder vælge variantattributter (fx størrelse, farve) før tilføjelse til kurv.

• Antalsvælger.

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

• Rydeligt, velstruktureret markup med tydelige kommentarer.

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

• Pris-slider facet til hurtig filtrering af prisinterval.

• 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 i hovedlayoutet.

Du kan redigere alle disse for Desktop og Mobil hver for sig. Som standard bruger Omni-search det samme HTML til alle skærmstørrelser og bruger CSS for optimal responsivitet. Det er derfor, Mobil-fanen ikke har nogen kode til at starte med.

Hvis nødvendigt kan du oprette helt særskilt HTML-markup til Mobil, der bruges på mindre skærme.

Indledningsvist kan du nøjes med at tilpasse 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 templating-sprog.

I vores startdesign er den første sektion dedikeret til de elementer, der oftest ændres, som sorteringslabels, valuta og de forskellige tekster, der kan oversættes til dit sprog.

CSS #

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

Tilgængelige sub-designs #

Alle designs tilføjet her kan refereres i det overordnede 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 af ethvert sub-design ved at klikke på knappen med de tre prikker.

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

Nogle elementer skal have specifikke identifikatorer, såsom:

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

Når du vil tjekke din fremgang, kan du gøre det ved at trykke på “Preview design”-knappen.

De oftest ændrede ting i designs er:

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

• Skrifttyper: Hvis nødvendigt, tilpas skrifttyper, så de matcher din sides udtryk.

• Farver: Du kan tilføje dine brandfarver til de elementer, du vil fremhæve eller tilpasse, så de matcher resten af din side, f.eks. knapper og tags.

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

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

Overlay-struktur #

Når omnisearch initieres, opretter den et element med klassen clerk-omnisearch-overlay, der injiceres nederst i bodyen.

Det er her, vi injicerer designet, da vi har input-elementet som en del af designet, og derfor skal have nogle strukturelle krav, så vi ikke re-render input-elementet på hver indlæsning. Strukturen skal se nogenlunde 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, flytter vi cursorfokus til dette felt og tilføjer den aktuelle forespørgsel, så brugeroplevelsen forbliver flydende.

Indholdswrapper #

Indholdswrapperen er hvor det meste sker, og wrapperen omkring den skal have identifikatoren clerk-omnisearch-content. Her skal være facets, sliders og alt andet, der ikke er inputfeltet.

Klasser #

Funktioner kan tilføjes til 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 skjule overlayet.

Sortering #

clerk-omnisearch-sort

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

For at få et sorteringselement frem i designet skal dette tilføjes til det pågældende element, fx en dropdown. For at virke skal elementet have værdien value:[desc|asc], altså den værdi vi vil sortere på, et kolon, og dernæst desc eller asc. Evt. 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 facetter, der ikke matcher forespørgslen, skjules.

Klassen søger efter facet search-elementer, når den er til stede på en side. Facetsøgninger giver brugere mulighed for at søge i de enkelte facets. For at fungere skal elementet have en strengværdi.

Fuld reset #

clerk-omnisearch-full-reset

Når man klikker på elementer med denne klasse, ryddes alle valgte facetter og søgeforespørgslen nulstilles.

Facets reset #

clerk-omnisearch-facet-full-reset

Når man klikker på elementer med denne klasse, fravælges alle aktive facets. Typisk bruges dette til en ‘Nulstil alle’-knap i en facet-gruppe, så brugerne kan nulstille alle valgte filtre på én gang.

Gruppe-nulstilling #

clerk-omnisearch-facet-group-reset

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

For at kunne fravælge en hel facetgruppe kan et element få denne klasse. Når elementet aktiveres (f.eks. ved klik), bliver alle elementer i gruppen fravalgt. For at det virker, skal elementet have gruppen vi vil nulstille som attributten data-facet-group.

Facet-nulstilling #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal fravælge et enkelt element ud fra det givne gruppe/værdi-attributpar.

Klassen er designet til scenarier, hvor det er nødvendigt at fjerne markeringen af en enkelt facet. Et element med denne klasse kan knyttes til en bestemt facet i en gruppe ved både at tildele det et data-facet-group og et data-facet-value. Når det aktiveres, fravælges kun den tilknyttede facet baseret på det aktuelle gruppe/værdi-par, mens andre valgte facets forbliver.

Facet klik #

clerk-facet

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

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