Omnisearch

• Live resultater vises for dine besøgende, mens de skriver, og inkluderer produkter, kategorier og sider.
• Sortering og filtrering: for at lade dine besøgende 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 en Indhold 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 typen Omnisearch, vælg et startdesign og giv det et navn.

Klik på Save & Close for at afslutte 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 vejledning for mere info.

Oprettelse af et indhold #

Dette gøres i Search > Content > New Content

Indholdsblokke er beholdere 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.

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

• Indholdstype 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.

• Tom tilstand logik 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 kan også tilpasses f.eks. med Visitor Recommendations.

Afslut design #

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

Indsættelse på site #

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

• I forhåndsvisning giver dig mulighed for at teste dit indhold 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.

• I mit live site bruges, når du er færdig med at teste og klar til at gøre det offentligt.

Brug af injektion #

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 begivenhed.

• Begivenhed kontrollerer, hvad brugeren skal gøre for at udløse Omnisearch. Mest sandsynligt ønsker du, at det skal 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 ønsker, at dit Omnisearch-indhold kun skal vises, når dine besøgende interagerer med din søgefelt (klik eller fokusere på det), skal du blot finde den unikke CSS-selektor, der er anvendt på det. 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 sites 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 på det, og find muligheden kopier > kopier 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 sider af webshoppen, ideelt set nær slutningen af </body>-tagget.

Erstat INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selektoren for det html-element, 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 skabelonsprog 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 indsætte den i værdien for variablen: os_brand_logo.

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

Uendelig/automatisk indlæsning #

Hvis du vil have kontrol over, hvorvidt 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 er typisk navngivet 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 oversætte i bulk ved at skrive “Oversæt disse variabelværdier fra engelsk til dansk. Returner den fulde kode 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 /* Skrift */ kommentaren.

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

For udviklere #

Styling #

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

Du kan redigere alle disse for Desktop og Mobil separat. Som standard bruger Omni-søgningen det samme HTML for alle skærmstørrelser og bruger CSS til at være fuldt responsiv. Dette er grunden til, at Mobil-fanen 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 kontrollerer 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 visuelle elementer på en kontrolleret 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 hovedlayoutredigeringsværktøjet.

Nogle elementer har brug for specifikke identifikatorer, såsom:

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

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

De mest almindelige ændringer, der foretages i designene, 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 vil fremhæve eller strømline med resten af dit site, såsom knapper og tags.

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

• Links: Hvis du har en specifik styling for 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 kroppen.

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">
        Indhold!
    </div>
</div>

Inputfelt #

For at finde inputfeltet skal det have følgende identifikator clerk-omnisearch-input. Når trigger-elementet er blevet aktiveret, flytter vi cursorfokus til dette element og tilføjer den forespørgsel, vi har til det, så vi kan holde brugeroplevelsen nogenlunde problemfri.

Indholdsomslag #

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

Klasser #

Funktionalitet 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 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å værdien, 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 for eksistensen af eventuelle facet-søgeelementer. Facet-søgninger giver brugerne mulighed for at søge i facetterne. For at det kan fungere, skal elementet have en strengværdi.

Fuldt nulstil #

clerk-omnisearch-full-reset

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

Facetter Nulstil #

clerk-omnisearch-facet-full-reset

Når det klikkes, vil elementer med klassen, fravælge 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 det klikkes, vil elementer med denne klasse fravælge alle under-elementer inden for gruppen.

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

Facet Nulstil #

clerk-omnisearch-facet-reset

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

Denne klasse er designet til scenarier, hvor det er nødvendigt at fravælge 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 fravælge sin tilknyttede facet baseret på det 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å.