Omnisearch

• Live-resultater Søgetekster vises til dine besøgende, mens de skriver, og omfatter produkter, kategorier og sider.
• Sortering og filtreringOmnisearch giver dig mulighed for at lade dine besøgende forfine deres søgning på en intuitiv og nem måde.
• Let at integrere på dit websted ved hjælp af en af vores fantastiske startskabeloner.
• Det matcher dit brand gennem ændre nogle få standardindstillinger som logo, skrifttyper, farver og meget mere.
• Den kan tilpasses fuldt ud med HTML, CSS og Liquid til Udviklere.

Kom godt i gang #

Omnisearch består af en brugerdefinerbar Design til det visuelle og en Indhold -blok, der gør det muligt at installere den på dit websted.

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 færdiggøre standarddesignet.

Vores standarddesigns fungerer out-of-the-box og kan altid redigeres senere. Redigering kræver kendskab til HTML, CSS og Liquid. Se Styling i denne vejledning for mere information.

Skab et indhold #

Dette gøres i Search > Content > New Content

Indholdsblokke er beholdere for elementer, som du opretter på din my.clerk.io-konto. De indeholder logikken til at vise resultater med og indstillinger for, hvor mange resultater der skal vises.

• Navn på indhold hjælper dig med at identificere dit indhold, hvis du vil oprette mere end et. 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 i de fleste opsætninger er det ikke nødvendigt.

• Logik for tom tilstand giver dig mulighed for at vælge den type produkter, der skal vises, når Omnisearch åbnes første gang, før der er skrevet nogen ord. Som standard er dette Bestsellere, men det kan også gøres personligt, f.eks. med Anbefalinger til besøgende.

Færdiggør design #

Det design, som indholdsblokken skal gengives i. Vælg det design, du har oprettet.

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

Du kan styre Antal resultater, der skal vises for hver type, hver gang der foretages en søgning. Vi anbefaler generelt disse beløb:

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

Til sidst skal du vælge de attributter, du vil inkludere som facetter, og angive de navne, de skal vises som i søgeresultaterne. Hvis du ikke kan finde en bestemt attribut på listen, kan du tilføje den på listen over “filtrerbare attributter” på Konfiguration af søgning.

Indsæt på webstedet #

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 preview ved at klikke på “Open site in preview” 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 offentliggøre det.

Brug af injektion #

Dette er den nemmeste måde at installere på. Clerk tilføjer automatisk Omnisearch-koden til dit websted ved at målrette mod et søgefelt efter eget valg og udløse den på baggrund af en begivenhed.

• Begivenhed Den begivenhed, du vælger, styrer, hvad brugeren skal gøre for at udløse Omnisearch. Højst sandsynligt vil du have den vist, når dine besøgende klikker på dit søgeikon eller inputfelt.

• Element bestemmer den del af hjemmesiden, som brugeren skal interagere med. Hvis du f.eks. ønsker, at dit Omnisearch-indhold kun skal vises, når dine besøgende interagerer med dit søgefelt (klikker eller fokuserer på det), skal du bare finde den unikke CSS-vælger, der anvendes til 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. Undersøg koden på dit websted. I de fleste browsere kan du højreklikke hvor som helst på din side og vælge Inspicér eller lignende.
2. Find det element, du vil bruge som mål
3. Højreklik over det, og find indstillingen kopi > kopier vælger

Brug af indlejret kode #

Hvis du har ikke-gemte ændringer, skal du gemme dem for at generere den indlejrede kode.

Kopier denne kode, og indsæt den i den fil, der genererer alle sider i webshoppen, helst i slutningen af </body> tag.

Erstat INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH med CSS-selektoren for det html-element, der skal udløse din Omnisearch.

Konfiguration af design #

Det meste af Omni-search 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 tommelfingerregel er det kun variabelværdien, der skal ændres for at konfigurere Omni-search.

Mere tekniske brugere kan selvfølgelig stadig ændre 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 i retning af os_brand_logo, og den bør se sådan ud, når logoet er blevet indsat:

Uendelig/automatisk indlæsning #

Hvis du vil styre, om Omni-search automatisk skal indlæse flere produktresultater, når brugeren har scrollet til 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 flere produktresultater automatisk.

Oversættelser #

Som standard er skabelonen på engelsk. Hvis du har en butik med et andet sprog, kan du oversætte tekstelementerne ved at ændre de variable værdier.

Dette eksempel viser variablerne for sorteringsknappen:

Styling #

Hvis du vil ændre stylingen, kan du konfigurere den 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 afsnittet under CSS-kommentaren “Farver”. /* Colors */

Skrifttyper #

I lighed med farverne kan skrifttypevariablen findes under kommentaren /* Font */.

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

For udviklere #

Styling #

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

Du kan redigere alle disse for desktop og mobil separat. Som standard bruger Omni-search den samme HTML til alle skærmstørrelser og bruger CSS til at være fuldt responsiv. Det er derfor, fanen Mobil ikke har nogen kode til at starte med.

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

I første omgang kan det være en god idé kun at justere nogle få ting på få designet til at matche dit brands look and feel - du kan altid redigere dit design senere.

HTML #

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

I vores startdesigns er det første afsnit dedikeret til de mest almindeligt ændrede elementer, 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 det visuelle på en begrænset måde.

Tilgængelige underdesigns #

Alle designs, der tilføjes 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 underdesign ved at klikke på knappen med de tre prikker.

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

Nogle elementer har brug for specifikke identifikatorer, f.eks:

• Inputfeltet id="clerk-omnisearch-input"
• Indpakningen af indhold id="clerk-omnisearch-content"

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

De hyppigste ændringer, der foretages i design, er disse:

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

• Skrifttyper: Juster om nødvendigt skrifttyperne, så de passer til dit websteds udseende.

• Farver: Du kan tilføje dit brands farver i de elementer, du vil fremhæve eller strømline med resten af dit websted, f.eks. knapper og tags.

• Knapper og tag-grænser: Du kan justere deres farve, radius, bredde …

• Links: Hvis du har en bestemt stil til dine links, kan du også redigere den.

Overlay-struktur #

Når omnisearch startes, oprettes der et element med klassen clerk-omnisearch-overlay, som sættes ind i bunden af brødteksten.

Det er her, vi injicerer designet, og da vi har input-elementet som en del af designet, er vi nødt til at have et strukturelt krav for at sikre, at vi ikke gengiver input-elementet ved hver indlæsning. Strukturen skal se ud som følger under overlayet:

<div>
    <input type="text" id="clerk-omnisearch-input"/>
    <div id="clerk-omnisearch-content">
        Content!
    </div>
</div>

Input-felt #

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

Indpakning af indhold #

Indholdsindpakningen er der, hvor de fleste ting sker, og indpakningen omkring den skal have identifikatoren clerk-omnisearch-content. Her skal facetterne, skyderne og alt det 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 knyttes til et element i designet, skjuler dette element 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], altså den værdi, vi ønsker at sortere, med et kolon og derefter enten desc eller asc. Du kan eventuelt tilføje en data-sort-type -attribut, hvis du vil have den til at sortere kategorier eller sider.

Søgefacet #

clerk-facet-search

Hvis der er en facetsøgning til stede, oprettes en lytter og skjuler facetter, der ikke matcher forespørgslen.

Når klassen er til stede på en webside, tjekker den, om der findes facetsøgningselementer. Facetsøgninger giver brugerne mulighed for at søge i facetterne. For at det skal fungere, skal elementet have en strengværdi.

Fuld klar #

clerk-omnisearch-full-reset

Når der klikkes på elementer med klassen, slettes alle valgte facetter, og forespørgslen nulstilles.

Facetter ryddet #

clerk-omnisearch-facet-full-reset

Når der klikkes på elementer med klassen, fravælges alle de aktive facetter. Dette ses typisk på en knap i stil med “Ryd alt” i en gruppe af facetter, så brugerne kan nulstille deres valgte filtre i én nem handling.

Gruppe klar #

clerk-omnisearch-facet-group-reset

Når der klikkes på elementer med denne klasse, fravælges alle underordnede elementer i gruppen.

For at give mulighed for at fravælge en hel gruppe af facetter kan man give et element denne klasse. Når elementet er aktiveret (f.eks. klikket på), bliver alle elementer i gruppen fravalgt, og facetgruppen nulstilles. For at det skal fungere, skal elementet have den gruppe, vi vil fjerne, som en 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 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 knyttes til en bestemt 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 valgbar facet.

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