Produktveivisere: Bla gjennom, tilgjengelighet og uttrekk

En produktveiviser er en horisontalt rullbar rad med produktkort som brukes til å vise et lite, relatert sett uten å gjøre det til sidens hovedkatalog. Den skal hjelpe en handler med å fortsette en definert kjøpssti – som å finne kompatible tilbehør eller sammenlignbare alternativer – samtidig som hvert elements identitet, rekkefølge og fakta bevares for både mennesker og maskiner.

Hvorfor dette elementet betyr noe

En veiviser styrer oppmerksomhet ved å vise noen få valg i det øyeblikket de blir relevante. På en produktside kan en kjøper som har forstått hovedproduktet, ønske seg kompatible tilbehør. Et fullt nett på det tidspunktet ville konkurrere med det primære kjøpet; én kompakt rad bevarer den opprinnelige beslutningen samtidig som den tillater utforskning.

Den fordelen har en psykologisk kostnad: alt utenfor den synlige kanten er lettere å overse. Det første kortet får mer eksponering enn det sjuende, og et avkuttet siste kort kan se ut som en feil med mindre designet signaliserer fortsettelse. En veiviser må derfor inneholde et sekundært, bevisst ordnet sett. Den må ikke skjule et valg leseren trenger for å forstå pris, sikkerhet, kompatibilitet eller utvalget i seg selv.

Maskinuttrekkbarhet er evnen søkemotorer, assistenter, strømmer og innholdsverktøy har til å isolere hvert produkt og holde feltene tilknyttet. En person kan sveipe for å avsløre kort seks; en nettskanner kan aldri utføre den interaksjonen. Når senere lysbilder bare kommer etter JavaScript, bruker display:none, eller bare finnes som bakgrunnsbilder, ser systemet en ufullstendig samling. Å gjengi hvert kort i semantisk kildekode-rekkefølge lar en maskin hente de samme navnene, URL-ene, posisjonene, prisene, valutaene og tilgjengeligheten som en handler kan nå.

Følg skrivereglene for elementer for forrang: klassifiser blokken etter formål før du velger utseende. Hvis jobben er å vise en sekundær produktvei, gjelder dette elementet. Hvis jobben er å vise fullstendige resultater eller muliggjøre side-ved-side-vurdering, har det aktuelle nettet eller den typede tabellen forrang.

Når du skal bruke det

Bruk en produktveiviser når alle disse betingelsene er oppfylt:

• Settet er sekundært i forhold til sidens hovedoppgave.
• Produktene deler én eksplisitt relasjon, som kompatible tilbehør, alternativer i samme kategori, nylig viste varer eller en redaksjonell kortliste.
• Fire til åtte konsise kort gir nyttig bredde uten å skape et skjult katalog.
• Rekkefølgen kan forklares gjennom relevans, kompatibilitet, redaksjonell rangering, nyhet eller en annen synlig regel.
• Hvert produkt forblir forståelig som et kompakt kort og har en kanonisk destinasjon for fullstendige detaljer.

En veiviser slår et nett når vertikal plass er begrenset og lesere ikke trenger å se alle valg samtidig. Den kan bevare kontekst på en produktdetaljside, holde et kort anbefalingssett sammen på mobil, og vise en neste vei uten å plassere åtte fulle beskrivelser i artikkelflyten.

Bruk et nett når settet er destinasjonen. Søkeresultater, en produktkategori, en filtrert samling eller en samling som må skannes i sin helhet, trenger synlige antall, sortering, filtre, paginering og stabile URL-er. Bruk en sammenligningstabell når lesere må vurdere de samme spesifikasjonene på tvers av alternativer. Bruk en bildeserie når varene er visninger av ett emne i stedet for separate kjøpsprodukter.

Vanlige nesten-treff inkluderer en to-vare-rad tvunget inn i karusellkontroller, en 30-produkt-kategori presset inn i en skinne, en hero-bannerkarusell som inneholder kampanjer i stedet for produkter, og en veiviser brukt til å skjule svake anbefalinger under brettet. «Nylig sett» er også et betinget nesten-treff: det er bare nyttig når besøkende faktisk har historikk, overskriften sier hvorfor varene vises, og en tom tilstand ikke fabrikkerer aktivitet.

Hvor du skal plassere det

Plassering bør svare på et spørsmål leseren nettopp har utviklet. Plasser kompatible tilbehør etter kompatibilitets- og medfølgende vare-informasjon, alternativer etter hovedproduktets begrensninger eller beslutningssammendrag, og relaterte produkter etter kategorienes hovedliste snarere enn før den. I redaksjonelt innhold plasserer du skinnen etter kriterier og bevis, ikke før leserne vet hvorfor produktene kvalifiserer.

Hold overskriften, relasjonserklæringen, vareantallet, kontrollene og kortene i én region. Sett en «Se alle»-lenke ved siden av overskriften eller etter raden når en fullstendig samling finnes. Lenken må lede til en crawlbar kanonisk side, ikke utvide en ubegrenset klient-side-skinne.

Ikke plasser en veiviser ved siden av en annen veiviser, et auto-roterende banner, en pristabell eller sidens primære kjøpskontroller. Tilstøtende horisontale bevegelser skaper tvetydighet, mens konkurrerende priser kan gjøre det uklart hvilket tilbud hoved-handlingsknappen kjøper. Ikke avbryt prosedyretrinn, en advarsel, kjøpsvilkår eller påkrevd juridisk informasjon med anbefalinger. Plasser aldri essensielle varianter inne i en veiviser hvis valg av én endrer hovedproduktets pris, tilgjengelighet eller konfigurasjon; varianter hører hjemme hos de tilhørende produktkontrollene.

På små skjermer, tillat ett helt kort pluss et bevisst glimt av neste kort, eller ett helt kort med en eksplisitt posisjonsetikett. Regionen kan rulle horisontalt, men selve dokumentet må ikke gjøre det. Bevar en synlig vei forbi veiviseren slik at en tastatur- eller berøringsbruker aldri blir fanget i gjentatt horisontal navigasjon.

Anatomi

1. Seksjonsoverskrift: navngir settet, for eksempel «Kompatible tilbehør», i stedet for det generiske «Du vil kanskje også like».
2. Relasjonserklæring: forklarer hvorfor produktene kvalifiserer og om rekkefølgen er redaksjonell, atferdsbasert eller kommersiell.
3. Vareantall: oppgir den endelige størrelsen før interaksjon, for eksempel «6 produkter».
4. Visningsport: beskjærer kun presentasjon; den fjerner ikke kort utenfor skjermen fra dokumentet.
5. Produktkort: bevarer ett produkts navn, destinasjon, avgjørende kvalifikator og gjeldende kommersielle fakta som én enhet.
6. Fortsettelsessignal: bruker et delvis neste kort, posisjonstekst eller begge deler; skygge alene er for lett å overse.
7. Forrige og neste knapper: bruker knapper oppkalt etter effekten og viser deaktivert tilstand ved endene.
8. Posisjonsindikator: kunngjør et område som «Produkter 1–3 av 6», ikke en rad med umerkede prikker.
9. Se alle-vei: åpner den kanoniske fullstendige samlingen når en slik finnes.
10. Fokusbehandling: forblir synlig på hver kontroll og kortlenke uten å bli beskåret av visningsporten.

Hvert kort følger produktkort -kontrakten. Veiviseren eier samlingsbetydning og navigasjon i stedet for å omdefinere produktfakta lokalt.

Designeksempler

Redaksjonell kortliste: bruk for fire til åtte produkter valgt etter angitte kriterier. Rekkefølgen kan representere rangering bare når siden inneholder bevisene for den rangeringen; merk det ellers som «Utvalgte alternativer» og unngå ordenspåstander.

Relaterte produkter: bruk for samme-kategori- eller erstatningsvarer etter at hovedproduktet er forklart. Oppgi den delte egenskapen, som formfaktor eller prissegment, i stedet for å antyde personalisering.

Kompatible tilbehør: bruk når hver vare har en verifisert relasjon til hovedproduktet. Gjenta den kompatible modellen eller serien i korttekst; nærhet er ingen kompatibilitetsgaranti.

Atferdshistorikk: bruk for nylig viste eller lagrede varer bare når besøkende har opprettet den tilstanden. Merk grunnlaget, bevar nyhetsrekkefølge, tilby fjerning der det er hensiktsmessig, og send ikke personlig historie til delte mellomlagre eller strukturerte data.

Parametre

Et bilde er betinget fordi et tekst-først-produktkort kan være komplett uten ett. Hvis det brukes, må filen eksistere, dimensjoner må reservere plass, og alternativ tekst må samsvare med formålet. Hvis ett kort viser pris eller tilgjengelighet, må alle tilsvarende kort vise et tilsvarende gjeldende felt eller eksplisitt status.

Syntaks og kodeeksempler

Bærbar Markdown-direktiv

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::

Hugo-snarvei-tilordning

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}

Dette er den tiltenkte adapter-spesifikasjonen, ikke en registrert snarvei-innkalling. Den bruker kun navngitte parametre. Inntil adapteren finnes, implementer samlingen som semantisk HTML eller en ikke-interaktiv rad uten å finne opp en ustøttet snarvei.

WordPress-blokk

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->

Eksempler

Bra: kompatibilitet er eksplisitt

Tilbehør verifisert for Arc 14 — 4 produkter
Arc bærbart stativ — USD 69 — På lager. Passer til 13–16 tommers bærbare datamaskiner; alle Arc 14-porter forblir tilgjengelige.
Dock 7 hub — USD 89 — På lager. Støtter Arc 14 USB-C-ladespesifikasjonen og 100 W gjennomgående lading.
Stille tastatursett — USD 74 — Lavt lager. Kobler til via Bluetooth; ingen mottaker opptar en Arc 14-port.
Task light Mini — USD 45 — På lager. Bruker en separat USB-C-strømforsyning; den trekker ikke strøm fra den bærbare datamaskinen.

Dette lykkes fordi relasjonen er navngitt og verifisert, hvert kort har en tydelig kompatibilitetserklæring, kommersielle felt er parallelle, og det endelige antallet er synlig. Alle fire varene kan finnes i kildekode-rekkefølge selv når bare tre får plass i visningsporten.

Dårlig: skjulte anbefalinger uten grunnlag

Du vil kanskje også like
BESTSELLER — $69 — Kjøp nå
TRENDENE — $89 — Kjøp nå
[Tre ytterligere kort lastes etter det andre sveipet.]

Dette mislykkes fordi overskriften ikke forklarer relasjonen, «bestseller» og «trenden» har ingen definert kilde eller periode, valutaen er antatt, og gjentatte «Kjøp nå»-etiketter mister produktidentitet uten kontekst. Mer alvorlig: tre produkter finnes ikke før interaksjon, så en tastaturbruker, nettskanner eller mislykket skript mottar et annet sett.

Skjemamarkering og tilgjengelighet

En redaksjonell produktveiviser kan mate ItemList når medlemskap og rekkefølge er meningsfulle. Bruk én ListItem per synlig produktenhet, med position, kanonisk URL og produktreferanse. Posisjoner må samsvare med DOM og visuell rekkefølge. Ikke merk personalisert nylig sett-historikk som en offentlig ItemList, fordi settet ikke er stabilt sideinnhold.

Hvert kort kan mate Product- og Offer-data bare når den synlige siden støtter de samme faktaene. Et navn og en destinasjon rettferdiggjør ikke oppfunnet pris, vurdering, merkevare, tilgjengelighet eller omtaledata. Generer synlige felt og strukturerte data fra samme godkjente produktkilde, og utelat flyktige egenskaper som ikke kan holdes synkroniserte. Det finnes ingen spesiell karusell-skjematype.

Bruk en navngitt <section> eller role="region" bare når overskriften ikke allerede gir tilstrekkelig landemerkesemantikk. Representer samlingen som en <ul>, <ol> eller tilsvarende liste; hvert kort er ett listeelement. Hold kort utenfor skjerm i DOM-en og tilgjengelighetstreet. Horisontal beskjæring er presentasjon, mens display:none, aria-hidden="true", inert eller klient-side-virtualisering gjør innhold utilgjengelig.

Bruk opprinnelige knapper for forrige og neste. Navngi dem «Forrige produkter» og «Neste produkter», deaktiver dem riktig ved endene, og behold fokus etter bevegelse. Kunngjør «Produkter 4–6 av 8» i en høflig statusregion uten å flytte fokus inn i det nylig viste kortet. Piltaster kan være en forbedring, men Tab må nå kontroller og lenker normalt. Sveip kan støttes, men aldri som eneste inndata.

Ikke automatisk gå videre. Respekter reduserte-bevegelser-preferanser og bruk umiddelbar eller begrenset rulling. En kortlenke trenger et distinkt tilgjengelig navn som inneholder produktnavnet. Forhindre dupliserte fokusmål når både bilde og tittel leder til samme URL. Ved 200 % zoom kan kort bli én-korts-visningsport, men tekst, kontroller og fokusringer må forbli fullstendige og siden må ikke renne over horisontalt.

Skriveregler

Teksten bør gjøre medlemskap forsvarlig før den gjør raden attraktiv.

• En spesifikk overskrift forklarer veien. Bruk 3–10 ord: «Kompatible Arc 14-tilbehør» eller «Alternativer under USD 100.» Stol aldri på «Mer», «Trendene» eller «Du vil kanskje også like» alene.
• Én setning etablerer utvalg. Bruk 8–30 ord til å oppgi delte kriterier, målgruppe, kompatibilitet eller historikkilde. Hvis rangering eller popularitet bestemmer rekkefølgen, navngi måltallet, markedet og perioden.
• Endelige sett forblir inspiserbare. Bruk 4–8 produkter normalt og ikke mer enn 12. To eller tre kort bør danne en statisk rad; større sortiment trenger et nett og kanonisk samlingsrute.
• Kortnavn bevarer identitet. Bruk det offisielle produktnavnet på 1–8 ord. Ikke erstatt det med «Best verdi», «Vårt valg» eller en kampanjeslagord.
• Kvalifikatorer svarer på ett beslutningsspørsmål. Bruk 4–18 ord for passform, særskillelsesevne, kompatibilitet eller begrensning. Unngå generisk ros som «premiumkvalitet.»
• Parallelle fakta støtter skanning. Hvis ett kort viser pris, valuta, tilgjengelighet, vurdering eller levering, viser liknende kort tilsvarende felt eller eksplisitte utilgjengelige tilstander fra samme kilde og marked.
• Rekkefølge trenger et ansvarlig grunnlag. Kompatibilitetsrekkefølge kan sette det sterkeste treffet først; rangering krever publiserte kriterier; nyhet gjenspeiler den besøkendes historikk. Betalt plassering må oppgis og kan ikke utgi seg for å være redaksjonell relevans.
• Handlinger beholder kontekst. Bruk «Vis Arc bærbart stativ», ikke fem tilfeller av «Lær mer.» En kort-handlingsknapp åpner den kanoniske detaljsiden for det produktet med mindre handlingen eksplisitt legger en kjent variant i handlekurven.
• Flyktige påstander trenger eierskap. Priser, lager, levering, rabatter, vurderinger og popularitet kommer fra godkjente systemer og har den nødvendige oppførselen for friskhet. Redaksjonell prosa må ikke hardkode en motstridende verdi.

Plasser aldri lange omtaler, sammenligningsmatriser, variantvelgere, antallskontroller, kjøpsvilkår, attester, nedtellingstidsmålere, popup-vinduer, videospillere eller påkrevde advarsler inne i et lysbilde. Ikke forhåndsvelg tilleggsprodukter, legg til produkter i handlekurven bare ved å navigere, eller skjul sponset rekkefølge. En veiviser forhåndsviser veier; destinasjonen eller den tilstøtende primærkomponenten inneholder den fullstendige beslutningen.

Innleggstyper som bruker det

Feltet postTypes i frontmatter driver denne tabellen. Inkludering betyr at elementet er betinget når et kompakt sekundært produktsett forbedrer den angitte siden.

QA-sjekkliste

• Settet er sekundært i forhold til sidens hovedoppgave og har én eksplisitt produktrelasjon.
• Et nett eller en sammenligningstabell ville ikke tjene leserens faktiske oppgave bedre.
• Veiviseren inneholder 4–8 produkter normalt og overstiger aldri 12.
• Overskriften, utvalgsgrunnlaget, vareantallet, kontrollene, posisjonsstatusen og Se alle-ruten er synlige der det er aktuelt.
• Hvert kort har en stabil identifikator, offisielt navn, kanonisk destinasjon og beslutningsrelevant kvalifikator.
• Pris, valuta, tilgjengelighet, vurdering, levering og kampanjefelt er parallelle og hentet fra kilde når de vises.
• Kompatibilitets-, rangerings-, popularitets-, personaliserings- og sponsorats-påstander oppgir grunnlaget.
• DOM-rekkefølge, visuell rekkefølge, kunngjort posisjon, tastaturrekkefølge og eventuelle ItemList-posisjoner samsvarer.
• Hvert produkt er server-gjengitt og brukbart uten JavaScript; intet senere lysbilde avhenger av interaksjon eller en klientforespørsel.
• Kort utenfor skjerm forblir i tilgjengelighetstreet og er ikke skjult, inaktive eller representert kun av bakgrunnsbilder.
• Forrige og neste knapper har distinkte navn, korrekte deaktiverte tilstander, synlig fokus og stabilt fokus etter bevegelse.
• Berøringssveip og piltaster er forbedringer; standard knapper og Tab-navigasjon gir fullstendig tilgang.
• Det er ingen automatisk bevegelse, fokustyveri, tastaturfelle eller side-nivå horisontalt overløp.
• Posisjonsendringer kunngjøres som tekst, og farge, beskjæring, skygger eller prikker bærer aldri fortsettelse alene.
• Hver bildesti løses før publisering, dimensjoner reserverer plass, og alternativ tekst gjenspeiler kortets formål.
• Ved 200 % zoom og på en smal skjerm forblir ett kort, dets tekst, dets kontroller og dets fokusring fullstendige.
• Strukturerte data gjentar synlige, oppdaterte fakta og utelater personalisert historikk eller oppfunne kommersielle egenskaper.
• Den fullstendige samlingen har en crawlbar Se alle-URL når lesere med rimelighet trenger å bla utover skinnen.
• Bærbar Markdown, Hugo og WordPress-representasjoner bevarer de samme produktene, rekkefølgen, feltene og reservealternativene.

FAQ

Akademimalen gjengir de fem gjennomgåtte spørsmålene lagret i [[faq]]-frontmatter.