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 finjustere deres søgning på en intuitiv og nem måde.
• Nem at integrere på dit site ved at bruge en af vores fremragende startskabeloner.
• Tilpasses til dit brand gennem ændring af nogle få standardindstillinger som logo, skrifttyper, farver og mere.
• Fuldstændigt tilpasselig med HTML, CSS og Liquid for developers.

Kom godt i gang #

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

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 standard designs fungerer 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 #

Dette gøres i Search > Element > New Element

Element-blokke er beholdere til elementer, du opretter i din my.clerk.io-konto. De indeholder logik, der viser resultater og indstillinger for, hvor mange resultater der skal vises. Empty State Logic kan også tilpasses 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 som standard Omnisearch og bør ikke ændres. Her kan du også tilføje filters efter behov, men for de fleste opsætninger er det ikke nødvendigt.

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

Færdiggør Design #

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

Hvis dit design inkluderer nogen variabler, kan de også indstilles her.

Du kan styre antallet af resultater, der skal vises for hver type, hver gang der søges. Vi anbefaler generelt følgende:

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

Til sidst, vælg de attributter, du ønsker at inkludere som Facets, og angiv navnene, de skal vises med i søgeresultaterne. Hvis du ikke kan finde en specifik attribut på listen, skal du tilføje den i “filterable attributes”-listen i Search Configuration.

Indsæt på sitet #

Synlighed 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 ved at klikke “Open site in preview” eller ved at tilføje ?clerk_content_mode=preview til dit site’s 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 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 aktivere det baseret på en hændelse.

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

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

Sådan finder du din unikke CSS-selector:

1. Inspicér sidens kode. 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 find muligheden kopier > kopier selector.

Brug af embedded code #

Hvis du har ændringer, der ikke er gemt, skal du gemme dem for at generere embedkoden.

Kopier denne kode og indsæt den i filen, der genererer alle sider på webshoppen, ideelt 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 aktivere din Omnisearch.

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

Designkonfiguration #

De fleste indstillinger for 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 skal kun værdien af variablen ændres for at konfigurere Omni-search.

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

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

Uendelig/auto-load #

Hvis du vil styre, om Omni-search automatisk skal indlæse flere produktresultater, når brugeren scroller til 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 du har en butik på et andet sprog, kan du oversætte tekstelementerne ved at ændre værdierne for variablerne.

Dette eksempel viser variablerne for sorteringsknappen:

Protip: Brug generativ AI (f.eks. chatGPT) til at lave en masseoversæ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 ethvert element i stilen, kan dette konfigureres i CSS-variablerne.

Skabelonerne bruger CSS-variabler med følgende struktur:

--variable_name: variable_value;

Mere tekniske brugere kan tilpasse individuelle CSS-regler for at lave mere avancerede ændringer i designet.

Farver #

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

Skrifttyper #

På samme måde som med farver kan du finde variablen for fonts under kommentaren /* Font */.

Typisk har den en variabel som: --font-family: 'Kumbh Sans', sans serif;

For developers #

Styling #

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

Du kan redigere dem alle for Desktop og Mobile separat. Som udgangspunkt bruger Omni-search samme HTML for alle skærmstørrelser og gør brug af CSS for at være fuldt responsiv. Derfor har fanen Mobile intet kode til at begynde med.

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

I starten vil du måske 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, der styrer placeringen af alle elementer. Det bruger Liquid som templating-sprog.

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

CSS #

Styling, der bliver injiceret 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 til 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å 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 hovedlayouteditoren.

Nogle elementer kræver specifikke ID’er, som for eksempel:

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

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

De hyppigste ændringer, som laves i designs, er disse:

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

• Skrifttyper: Tilpas skrifttyperne til at matche din sides udtryk, hvis nødvendigt.

• Farver: Du kan tilføje dit brands farver på de elementer, du ønsker skal skille sig ud eller passe sammen 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 specifik styling for dine links, kan du også redigere dette.

Overlay-struktur #

Når omnisearch igangsættes, oprettes der et element med klassen clerk-omnisearch-overlay, som bliver sat ind i bunden af body.

Det er her, vi indsprøjter designet, og da vi har input-elementet som en del af designet, kræver vi en strukturel opbygning for at sikre, vi ikke 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 identifikatoren clerk-omnisearch-input. Når trigger-elementet aktiveres, flytter vi cursor-fokusset til dette element og indsætter den eventuelle søgeforespørgsel, så vi kan holde brugeroplevelsen nogenlunde sammenhængende.

Content Wrapper #

Content wrapperen er der, hvor det meste foregår — wrapperen omkring det skal have identifikatoren clerk-omnisearch-content. Her skal facets, sliders og alt andet end inputfeltet være placeret.

Klasser #

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

Luk-knap #

clerk-omnisearch-close

Når denne klasse sættes på et element indeni designet, vil elementet skjule overlayet.

Sortering #

clerk-omnisearch-sort

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

Hvis du skal have et sorteringselement i designet, skal du tilføje dette til det valgte element, f.eks. en dropdown. For at virke skal elementet have følgende value:[desc|asc], altså værdien, vi vil sortere, efterfulgt af 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 findes en facet-søgning, oprettes en lytter og skjuler facets, der ikke matcher forespørgslen.

Klassen tjekker, hvis den er til stede i en webside, om der findes nogen facet-søgeelementer. Facet-søgninger giver brugerne mulighed for at søge blandt facets. For at det virker, skal elementet have en strengværdi.

Fuldt Nulstil #

clerk-omnisearch-full-reset

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

Facet Nulstil #

clerk-omnisearch-facet-full-reset

Når elementer med denne klasse klikkes, fravælges alle aktive facets. Det ses typisk på en “Clear all” knap i en facetgruppe, så brugeren nemt kan nulstille alle udvalgte filtre.

Gruppe Nulstil #

clerk-omnisearch-facet-group-reset

Når denne klasse aktiveres (f.eks. klik), vil alle elementer indenfor gruppen blive fravalgt, hvilket nulstiller gruppen af facets. For at det virker, skal elementet have gruppen vi vil nulstille som attributten med navnet data-facet-group.

Facet Nulstil #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal fravælge et enkelt element med det givne gruppe-/værdi-attribut-par.

Denne klasse bruges, når det er nødvendigt at fravælge et enkelt facet. Et element med denne klasse kan knyttes til et specifikt facet i en gruppe ved både at have et data-facet-group og et data-facet-value. Ved aktivering fravælges kun det pågældende facet, de øvrige ændres ikke.

Facet Klik #

clerk-facet

Elementer med denne klasse behandles som et valgbart facet.

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