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 forfine deres søgning på en intuitiv og nem måde.
• Nem at integrere på dit site ved at bruge en af vores fantastiske startskabeloner.
• Det matcher dit brand ved at ændre et par standardindstillinger som logo, skrifttyper, farver og mere.
• Det er fuldt tilpasseligt med HTML, CSS og Liquid for udviklere.

Kom godt i gang #

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

Oprettelse af et design #

Dette gøres i Search > Designs > New Design

Vælg Omnisearch-typen, 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. Tjek Styling i denne guide for mere info.

Oprettelse af et Element #

Dette gøres i Search > Element > New Element

Elementblokke er containere til elementer, du opretter i din my.clerk.io-konto. De indeholder logikken til at vise resultater og indstillinger for, hvor mange resultater der skal vises. Empty State Logic kan også manipuleres gennem Rules.

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

• Elementtype er Omnisearch som standard og bør ikke ændres. Her kan du også tilføje filtre, hvis det er nødvendigt, men for de fleste opsætninger er dette 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 nogen ord. Som standard er dette Bestsellers, men det kan også tilpasses f.eks. med Visitor Recommendations.

Færdiggør design #

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

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

Du kan kontrollere 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

Til sidst skal du vælge de attributter, du vil inkludere som Facetter, og indstille de navne, de skal vises som i søgeresultaterne. Hvis du ikke kan finde en specifik attribut i listen, skal du tilføje den i listen “filterbare attributter” i Search Configuration.

Indsættelse på site #

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

• I forhåndsvisning giver dig mulighed for at teste dit element uden at påvirke dit live site. Du kan åbne dit site i forhåndsvisning ved at klikke på “Åbn site i forhåndsvisning” eller ved at tilføje ?clerk_content_mode=preview til dit sites URL.

• På mit 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 vil automatisk tilføje Omnisearch-koden til dit site ved at målrette et søgefelt efter eget valg og udløse baseret på en hændelse.

• Hændelse kontrollerer, hvad brugeren skal gøre for at udløse Omnisearch. Mest sandsynligt vil du have det til at vises, når dine besøgende klikker på dit søgeikon eller inputfelt.

• Element bestemmer den del af hjemmesiden, som 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øgebar (klik eller fokusere på den), skal du blot finde den unikke CSS-selektor, der er anvendt på den. Hvis du har forskellige identifikatorer på mobil og desktop, skal du tilføje dem begge.

Find din unikke CSS-selektor på denne måde:

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

Brug af indlejret kode #

Hvis du har nogen usparede ændringer, skal du gemme dem for at generere den indlejrede kode.

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

Erstat INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selektoren for HTML-elementet, der skal udløse dit Omnisearch.

Designkonfiguration #

Det meste af Omni-søgningen kan konfigureres ved at ændre de variabler, der er i designfilerne.

I liquid template language har en variabel en struktur som denne:

{% assign variable_name = "variable value" %}

Som en tommelfingerregel bør kun variabelværdien ændres for at konfigurere Omni-søgningen.

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

Logo #

For at tilføje logoet til Omni-søgningsdesignet skal du blot finde billed-URL’en og sætte den ind i værdien for variablen: os_brand_logo.

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

Uendelig/automatisk indlæsning #

Hvis du vil have kontrol over, om Omni-søgningen skal indlæse flere produktresultater automatisk, når brugeren er scrollet til den sidste række af produkter, skal variablen indstilles til true eller false. Variablen hedder typisk os_autoload. I dette eksempel indlæser Omni-søgningen ikke flere produktresultater automatisk.

Oversættelser #

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

Dette eksempel viser variablerne for sorteringsknappen:

Protip: Brug generativ AI (f.eks. chatGPT) til at bulk-oversætte ved at skrive “Oversæt disse variabelværdier fra engelsk til dansk. Returner hele koden tilbage, så den kan kopieres/indsættes for at erstatte den eksisterende kode: INDSÆT_VARIABLER_HER”

Styling #

For at ændre nogen af stylingerne kan konfigurationen gøres i CSS-variablerne.

Skabelonerne bruger CSS-variabler, som har en struktur som denne:

--variable_name: variable_value;

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

Farver #

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

Skrifttyper #

Ligesom farverne kan skrifttypevariablen findes under /* Font */ kommentaren.

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

For udviklere #

Styling #

Design består af et hovedlayout, CSS-styling og et sæt underdesigns, der kan refereres i hovedlayoutet.

Du kan redigere alle disse for desktop og mobil separat. Som standard bruger Omni-søgningen den samme HTML for alle skærmstørrelser og bruger CSS til at være fuldt responsiv. Dette er grunden til, at mobilfanen ikke har nogen kode at starte med.

Hvis det er nødvendigt, kan du oprette en helt anden HTML-markup til mobil, som vil blive brugt på mindre skærme.

I starten vil du måske kun justere et par ting for at få designet til at matche dit brands udseende og følelse - Du kan altid redigere dit design senere.

HTML #

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

I vores startdesign er den første sektion dedikeret til de mest almindeligt ændrede elementer, såsom sorteringsetiketter, valuta og de forskellige tekster, som du kan oversætte til dit sprog.

CSS #

Styling, der vil blive injiceret med HTML, hvilket giver dig fuld kontrol over de visuelle elementer på en indeholdt måde.

Tilgængelige Under-designs #

Enhver design, der tilføjes 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 under-design ved at klikke på de tre prikker.

For at redigere et under-design skal du klikke på dets Rediger ikon. Når du er færdig med at redigere, skal du klikke på Gem & luk for at vende tilbage til hovedlayouteditoren.

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

• Inputfelt id="clerk-omnisearch-input"
• Indholdwrapper id="clerk-omnisearch-content"

Når du vil tjekke din fremgang, kan du gøre det ved at klikke på knappen “Forhåndsvis design”.

De mest almindelige ændringer, der foretages i design, er disse:

• Logo: Få adgang til TopBarSearchForm og erstat det standardlogo med dit.

• Skrifttyper: Juster skrifttyperne, hvis det er nødvendigt, så de matcher dit sites udseende og følelse.

• Farver: Du kan tilføje dit brands farver i de elementer, du ønsker at fremhæve eller strømline med resten af dit site som knapper og tags.

• Knapper og taggrænser: Du kan justere deres farve, radius, bredde…

• Links: Hvis du har en specifik styling til dine links, kan du også redigere det.

Overlay-struktur #

Når omnisearch initieres, opretter det et element med klassen clerk-omnisearch-overlay, som injiceres i bunden af body.

Dette er, hvor vi vil injicere designet, da vi har inputelementet som en del af designet, vi skal have strukturelle krav for at sikre, at vi ikke genindlæser inputelementet ved hver indlæsning. 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 følgende identifikator clerk-omnisearch-input. Når trigger-elementet er blevet udløst, flytter vi cursorfokus til dette element og tilføjer den forespørgsel, vi har til det, så vi kan holde brugeroplevelsen nogenlunde sømløs.

Indhold Wrapper #

Indholdwrapperen er, hvor det meste af tingene sker, wrapperen omkring det skal have identifikatoren clerk-omnisearch-content. Her skal være facetterne, skyderne og alt andet, der ikke er inputfeltet.

Klasser #

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

Lukke-knap #

clerk-omnisearch-close

Når klassen knyttes til et element inde i designet, vil det element skjule overlayet.

Sortering #

clerk-omnisearch-sort

Finder sorteringsdropdowns og tilføjer lyttere til dem.

For at få et sorteringselement i designet skal du tilføje dette til det valgte element, f.eks. en dropdown. For at fungere skal elementet være følgende value:[desc|asc], så den værdi, vi ønsker at sortere, med et kolon og derefter enten desc eller asc. Valgfrit kan du tilføje et data-sort-type attribut, hvis du vil have det til at sortere kategorier eller sider.

Søgefacet #

clerk-facet-search

Hvis der er et facet-søgning til stede, opretter det en lytter og skjuler facetter, der ikke matcher forespørgslen.

Klassen, når den er til stede på en webside, kontrollerer eksistensen af eventuelle facet-søgeelementer. Facet-søgninger giver en måde for brugere at søge i facetterne. For at det kan fungere, skal elementet have en strengværdi.

Fuldt nulstil #

clerk-omnisearch-full-reset

Når den klikkes, vil elementer med klassen rydde alle valgte facetter og nulstille forespørgslen.

Facetter Nulstil #

clerk-omnisearch-facet-full-reset

Når den klikkes, vil elementer med klassen, deselectere alle aktive facetter. Dette ville typisk ses på en ‘Ryd alle’ stil knap inden for en gruppe af facetter, der giver brugerne mulighed for at nulstille deres valgte filtre i én nem handling.

Gruppe Nulstil #

clerk-omnisearch-facet-group-reset

Når den klikkes, vil elementer med denne klasse deselectere alle børnelementer inden for gruppen.

For at give funktionen til at deselectere en hel gruppe af facetter, kan et element gives klassen. Når elementet aktiveres (f.eks. klikket), bliver alle elementer inden for dets gruppe deselecteret, hvilket nulstiller den facetgruppe. For at det kan fungere, skal elementet have gruppen, vi ønsker at rydde som en attribut med navnet data-facet-group.

Facet Nulstil #

clerk-omnisearch-facet-reset

Elementer med denne klasse skal deselectere et enkelt element med den givne gruppe/værdi-attributpar.

Denne klasse er designet til scenarier, hvor det er nødvendigt at deselectere en enkelt facet. Et element med klassen kan være knyttet til en specifik facet i en gruppe ved at give det både en data-facet-group og en data-facet-value. Ved aktivering vil det kun deselectere sin tilknyttede facet baseret på den givne gruppe/værdi-attributpar, mens andre valgte facetter forbliver uændrede.

Facet Klik #

clerk-facet

Elementer med denne klasse vil blive behandlet som en vælgbar facet.

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