Search

Opsæt Search efter import og kontrol af dine data. Identificér først, hvordan dit tema åbner Search på desktop og mobil, og vælg derefter den oplevelse, der passer til det.

Inspicer Search #

Et tema kan have separate inputfelter til desktop, mobilikoner, skjulte paneler og søgefelter på forsiden. Inspicer hvert element, før du vælger triggere.

1. Åbn webshoppen på desktop og mobil. Find alle inputfelter eller kontroller, der åbner Search.
2. Brug udviklerværktøjer til at inspicere stabile selektorer, og bekræft hvilket input der modtager den indtastede tekst.
3. Test det oprindelige dropdown, mobilpanelet, Enter-tasten og formularindsendelse. Notér hvilke funktioner, der skal udskiftes eller bevares.
4. Tjek en anden type side; et søgefelt på forsiden kan afvige fra inputfeltet i headeren.

Fodmagasinet’s eksempel-triggere er .search-bar #search-overlay-input og #frontpage_search_container. Kontroller om disse selektorer eksisterer og har samme rolle i din webshop. En trigger-container er ikke nødvendigvis selve tekstinputtet.

Vælg oplevelse #

Brug Omnisearch for en samlet søgeoplevelse, eller bevar en separat dropdown og søgeresultatside, hvor det bedre passer til dit tema.

Opret Omnisearch #

1. Gå til Search > Designs > New Design og vælg en Omnisearch-skabelon.
2. Navngiv og gem Designet, og tilpas dets produktkort ved hjælp af kortdata-tjek. Produkt-side links understøtter produkter der kræver variantvalg.
3. Gå til Search > Elements > New Element, navngiv Elementet, og vælg Omni-search som type.
4. Vælg Designet, gem i In preview, og åbn indsætningsindstillingerne.
5. Konfigurer den verificerede trigger-selektor ved brug af injection, eller indsæt den genererede embedded kode i dit tema én gang.
6. Vælg fuldt overlay eller delvist overlay og test alle ønskede triggere.

For delvist overlay, indstil Header selector til det oprindelige header-wrapper og Search input selector til det reelle tekstinput. Konfigurer overlayets bredde og højde så det passer til layoutet. Se Omnisearch for disse indstillinger.

Fodmagasinets delvise opsætning bruger den oprindelige header og input fremfor en klonet header eller kurv. Dets selektorer, header-struktur, breakpoints, farver og mellemrum er eksempler der kan inspiceres, ikke krav til andre temaer.

Separat Search #

For et dropdown, lav et Instant Search Design og et Live-search Element. Vælg inputfeltet i indsætningsindstillingerne og vælg dropdown-positionen.

For en resultatside, lav et Search Page Design og Element, og indsæt det i temaplablonens resultside. Overfør den aktuelle søgeforespørgsel vha. den genererede embedkode, og få den oprindelige formular til at lede dertil.

Brug Instant Search og Search Page vejledningerne til fælles opsætning. Udskift kun de oprindelige resultater indenfor deres resultcontainer; bevar omgivende navigation og side-layout.

Oprindelig funktionalitet #

Løs overlappende handlers før Search aktiveres for besøgende. At skjule et oprindeligt dropdown kan efterlade aktive tastatur- eller formularhandlers.

Under Preview-testning; indtast rigtige tegn og kontroller om både oprindelige og Clerk.io resultater vises. Inspicer mobilikon og panel separat; åbner du det forkerte panel, kan input skjules eller navigationen ændres.

Hvis oprindelige handlers konkurrerer, skal temaudvikler kun justere det relevante input, panel eller formular. Afgræns midlertidig udskiftning til ønsket Search-tilstand, så normal sidebrug stadig fungerer, når det lukkes.

Test keydown, keyup og formular-submit veje. Enter skal enten åbne det valgte Clerk.io resultat eller udføre den ønskede søgning. Undlad at annullere Enter globalt eller fjerne alle tastatur-lyttere: pil-tast navigation mellem resultater skal fungere.

Luk og Escape skal gendanne siden, fokus og scroll uden at gå tilbage eller give en tom side. Gentag åben/luk, navigér til resultat, og test Tilbage/Frem på desktop og mobil.

Facetter #

Vælg filtre ud fra attributter, der reelt findes på de importerede produkter. En skabelons vendor, brand eller kategori-felt matcher måske ikke dit feed.

Inspicér flere poster, vælg tilgængelige attributter i Search-konfigurationen og giv dem lokaliserede labels. Tjek at hvert facet ændrer resultater korrekt, også for produkter uden valgfri attribut.

Ved sortering, sammenlign de importerede værdier med de viste kortpriser. Et visuelt laveste-varian-pris-label retter ikke en forkert overordnet pris anvendt til sorteringen.

Se Search best practices for valg af brugbare filtre og resultatlayouts.

Indholdsresultater #

Importer artikler og andre sider inden de aktiveres i Search. Følg Import Pages hvis det oprindelige feed mangler dem.

Tjek derefter både Elementets side-resultat-indstillinger og Designets side-resultatsektion. Importerede artikler kan forblive skjult, hvis Designet udelader den sektion, eller layoutet skjuler kolonnen.

Søg på en karakteristisk artikel-titel og bekræft dens link og indhold. Tjek dette separat fra produktmatch og side-baserede Recommendations.

Style sikkert #

Hold Search CSS indenfor dets komponent, så det ikke ændrer recommendation sliders andre steder på siden.

Eksempelvis, giv dit tilpassede Search-kort wrap en dedikeret klasse og afgræns alle regler til den:

.ideal-clerk-search .ideal-clerk-card {
  display: flex;
  flex-direction: column;
}

Undlad at anvende Search layout-regler på globale .clerk-slider, button eller .active-selektorer. Gennemgå forside- og produktsliders efter åbning og lukning af Search, inklusive deres pile, bredder og overflow.

Afslut med setup-tjeklisten. Se Search conflicts FAQ hvis oprindelige kontroller stadig forstyrrer.