Produktskyder: Gennemsyn, tilgængelighed og ekstraktion

En produktskyder er en vandret scrolbar række af produktkort, der bruges til at vise et lille, relateret sæt uden at gøre det til sidens primære katalog. Den skal hjælpe en shopper med at fortsætte en defineret købssti – såsom at finde kompatible tilbehør eller sammenlignelige alternativer – samtidig med at den bevarer hver enkelt vares identitet, rækkefølge og fakta for mennesker og maskiner.

Hvorfor dette element er vigtigt

En skyder styrer opmærksomhed ved at vise nogle få valg i det øjeblik, de bliver relevante. På en produktside kan en køber, der har forstået hovedvaren, være åben for kompatibelt tilbehør. Et fuldt gitter på det tidspunkt ville konkurrere med det primære køb; én kompakt række bevarer den oprindelige beslutning, mens den tillader udforskning.

Den fordel har en psykologisk omkostning: alt ud over den synlige kant er lettere at overse. Det første kort får mere eksponering end det syvende, og et afskåret sidste kort kan ligne en fejl, medmindre designet signalerer fortsættelse. En skyder må derfor indeholde et sekundært, bevidst ordnet sæt. Den må ikke skjule et valg, læseren har brug for at forstå pris, sikkerhed, kompatibilitet eller selve sortimentet.

Maskinekstraherbarhed er evnen hos søgemaskiner, assistenter, feeds og indholdsværktøjer til at isolere hvert produkt og bevare dets felter. En person kan swipe for at afsløre kort seks; en crawler udfører måske aldrig den handling. Når senere slides kun ankommer efter JavaScript, bruger display:none eller blot eksisterer som baggrundsbilleder, ser systemet en ufuldstændig samling. Ved at gengive hvert kort i semantisk kildeorden kan en maskine gendanne de samme navne, URL’er, positioner, priser, valutaer og tilgængelighed, som en shopper kan nå.

Følg element-skrivereglerne for forrang: klassificér blokken efter formål, før du vælger dens udseende. Hvis dens opgave er at vise en sekundær produktvej, gælder dette element. Hvis dens opgave er at vise komplette resultater eller muliggøre sammenligning side om side, har det passende gitter eller den typetabel forrang.

Hvornår skal det bruges

Brug en produktskyder, når alle disse betingelser er opfyldt:

• Sættet er sekundært i forhold til sidens hovedopgave.
• Produkterne deler én eksplicit relation, såsom kompatibelt tilbehør, alternativer i samme kategori, for nylig sete varer eller en redaktionel shortliste.
• Fire til otte koncise kort giver nyttig bredde uden at skabe et skjult katalog.
• Rækkefølgen kan forklares gennem relevans, kompatibilitet, redaktionel rangering, seneste dato eller en anden synlig regel.
• Hvert produkt forbliver forståeligt som et kompakt kort og har en kanonisk destination for fuld detalje.

En skyder slår et gitter, når vertikal plads er begrænset, og læsere ikke behøver at se alle valg samtidigt. Den kan bevare kontekst på en produktdetaljeside, holde et kort anbefalingssæt samlet på mobil og vise en næste rute uden at placere otte fulde beskrivelser i artikel-flowet.

Brug et gitter, når sættet er destinationen. Søgeresultater, en produktkategori, en filtreret samling eller en kollektion, der skal scannes fuldt ud, har brug for synlige antal, sortering, filtre, paginering og stabile URL’er. Brug en sammenligningstabel , når læsere skal vurdere de samme specifikationer på tværs af muligheder. Brug et billedgalleri , når emnerne er visninger af ét motiv snarere end separate købbare produkter.

Almindelige næsten-miss’er omfatter en række med to varer, der tvinges ind i karussel-kontroller, en 30-produkt-kategori presset ind i en skinne, en hero-banner-karussel med kampagner i stedet for produkter og en skyder, der bruges til at skjule svage anbefalinger under folden. “For nylig set” er også et betinget næsten-miss: det er kun nyttigt, når besøgende faktisk har historik, overskriften siger, hvorfor disse varer vises, og en tom tilstand ikke fabrikerer aktivitet.

Hvor skal det placeres

Placering bør besvare et spørgsmål, læseren netop har udviklet. Placer kompatibelt tilbehør efter kompatibilitets- og medfølgende vareinformation, alternativer efter det primære produkts begrænsninger eller beslutningsoversigt og relaterede produkter efter kategoriens hovedliste snarere end før den. I redaktionelt indhold placeres skinnen efter kriterier og dokumentation, ikke før læsere ved, hvorfor produkterne kvalificerer sig.

Hold overskrift, relationserklæring, vareantal, kontroller og kort i én region. Placer et “Se alle”-link ved siden af overskriften eller efter rækken, når en komplet samling findes. Linket skal føre til en crawlebar kanonisk side, ikke udvide en ubegrænset klientside-skinne.

Placer ikke en skyder ved siden af en anden skyder, et auto-roterende banner, en pristabel eller sidens primære købskontroller. Tilstødende horisontale gestusser skaber tvetydighed, mens konkurrerende priser kan gøre det uklart, hvilket tilbud hoved-CTA’en køber. Afbryd ikke proceduremæssige trin, en advarsel, checkout-betingelser eller påkrævet juridisk oplysning med anbefalinger. Placer aldrig essentielle varianter inde i en skyder, hvis valg af én ændrer hovedproduktets pris, tilgængelighed eller konfiguration; varianter hører til hos det tilhørende produkts kontroller.

På små skærme tillades ét komplet kort plus et bevidst glimt af det næste kort, eller ét komplet kort med en eksplicit positionslabel. Regionen må scrolle horisontalt, men dokumentet selv må ikke. Bevar en synlig vej forbi skyderen, så en tastatur- eller touch-bruger aldrig bliver fanget i gentagen horisontal navigation.

Anatomi

1. Sektionsoverskrift: navngiver sættet, f.eks. “Kompatibelt tilbehør,” i stedet for det generiske “Du vil måske også kunne lide.”
2. Relationserklæring: forklarer, hvorfor produkterne kvalificerer sig, og om rækkefølgen er redaktionel, adfærdsbaseret eller kommerciel.
3. Vareantal: angiver den begrænsede størrelse før interaktion, f.eks. “6 produkter.”
4. Viewport: klipper kun præsentation; fjerner ikke kort uden for skærmen fra dokumentet.
5. Produktkort: bevarer ét produkts navn, destination, afgørende kvalifikation og aktuelle kommercielle fakta som én enhed.
6. Fortsættelsessignal: bruger et delvist næste kort, positionstekst eller begge dele; skygge alene er for let at overse.
7. Forrige og næste kontroller: bruger knapper navngivet efter deres effekt og viser deaktiveret tilstand ved enderne.
8. Positionsindikator: annoncerer en række som “Produkter 1–3 af 6,” ikke en række umærkede prikker.
9. Se alle-vej: åbner den kanoniske komplette samling, når en sådan findes.
10. Fokusbehandling: forbliver synlig på hver kontrol og kortlink uden at blive klippet af viewporten.

Hvert kort følger produktkortkontrakten . Skyderen ejer samlingsbetydning og navigation i stedet for at omdefinere produktfakta lokalt.

Designeksempler

Redaktionel shortliste: bruges til fire til otte produkter udvalgt efter angivne kriterier. Rækkefølgen må kun repræsentere rangering, når siden indeholder dokumentation for den rangering; mærk den ellers “Udvalgte muligheder” og undgå ordinale påstande.

Relaterede produkter: bruges til varer i samme kategori eller erstatningsvarer efter hovedproduktet er blevet forklaret. Angiv den delte egenskab, såsom formfaktor eller prisklasse, i stedet for at antyde personalisering.

Kompatibelt tilbehør: bruges, når hver vare har en verificeret relation til det ejende produkt. Gentag den kompatible model eller række i kortets tekst; nærhed er ikke en kompatibilitetsgaranti.

Adfærdshistorik: bruges til for nylig sete eller gemte varer, kun når den besøgende har skabt denne tilstand. Mærk grundlaget, bevar seneste-dato-rækkefølge, giv mulighed for fjernelse hvor relevant, og udsend ikke personaliseret historik i delte caches eller strukturerede data.

Parametre

Et billede er betinget, fordi et tekst-først produktkort kan være komplet uden et. Hvis det bruges, skal filen eksistere, dimensioner skal reservere plads, og alternativ tekst skal matche dets formål. Hvis ét kort viser pris eller tilgængelighed, skal hvert tilsvarende kort vise et tilsvarende aktuelt felt eller eksplicit 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 shortcode-tilknytning

{{< 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 påtænkte adapter-specifikation, ikke en registreret shortcode-invokation. Den bruger kun navngivne parametre. Indtil adapteren eksisterer, implementér samlingen som semantisk HTML eller en ikke-interaktiv række uden at opfinde en ikke-understøttet shortcode.

WordPress-blok

<!-- 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

God: kompatibilitet er eksplicit

Tilbehør verificeret til Arc 14 — 4 produkter
Arc bærbarsstativ — USD 69 — På lager. Passer til 13–16 tommer bærbare computere; alle Arc 14-porte forbliver tilgængelige.
Dock 7 hub — USD 89 — På lager. Understøtter Arc 14 USB-C-opladningsspecifikation og 100 W gennemløb.
Stille tastatursæt — USD 74 — Lavt lager. Opretter forbindelse via Bluetooth; ingen modtager optager en Arc 14-port.
Task light Mini — USD 45 — På lager. Bruger en separat USB-C-strømforsyning; den trækker ikke strøm fra den bærbare computer.

Dette lykkes, fordi relationen er navngivet og verificeret, hvert kort kommer med en tydelig kompatibilitetserklæring, kommercielle felter er parallelle, og det begrænsede antal er synligt. Alle fire varer kan eksistere i kildeorden, selv når kun tre passer i viewporten.

Dårlig: skjulte anbefalinger uden grundlag

Du vil måske også kunne lide
BESTSELLER — $69 — Køb nu
TRENDING — $89 — Køb nu
[Tre yderligere kort indlæses efter andet swipe.]

Dette fejler, fordi overskriften ikke forklarer relationen, “bestseller” og “trending” har ingen defineret kilde eller periode, valutaen er underforstået, og gentagne “Køb nu”-labels mister produktidentitet uden for kontekst. Mere alvorligt: tre produkter eksisterer ikke før interaktion, så en tastaturbruger, crawler eller mislykket script modtager et andet sæt.

Schema-markup og tilgængelighed

En redaktionel produktskyder kan fodre ItemList, når dens medlemskab og orden er meningsfuld. Brug ét ListItem pr. synligt produkt entitet med position, kanonisk URL og produktreferencen. Positioner skal matche DOM og visuel orden. Markér ikke personaliseret for nylig set-historik som en offentlig ItemList, da sættet ikke er stabilt sideindhold.

Hvert kort må fodre Product- og Offer-data kun, når den synlige side understøtter de samme fakta. Et navn og en destination retfærdiggør ikke opfundne priser, vurderinger, mærker, tilgængeligheds- eller anmeldelsesdata. Generér synlige felter og strukturerede data fra samme godkendte produktkilde, og udelad flygtige egenskaber, der ikke kan forblive synkroniserede. Der er ingen særlig karussel-schema-type.

Brug en navngivet <section> eller role="region" kun, når overskriften ikke allerede giver tilstrækkelig landmærke-semantik. Repræsentér samlingen som en <ul>, <ol> eller tilsvarende liste; hvert kort er ét listeelement. Behold kort uden for skærmen i DOM’en og tilgængelighedstræet. Horisontal beskæring er præsentation, hvorimod display:none, aria-hidden="true", inert eller klient-only virtualisering gør indhold utilgængeligt.

Brug native knapper til forrige og næste. Navngiv dem “Forrige produkter” og “Næste produkter,” deaktivér dem korrekt ved enderne, og bevar fokus efter bevægelse. Annoncér “Produkter 4–6 af 8” i en høflig statusregion uden at flytte fokus ind i det nyligt viste kort. Piletaster kan være en forbedring, men Tab skal nå kontroller og links normalt. Swipe kan understøttes, men aldrig som eneste indgang.

Auto-avancer ikke. Respektér reduced-motion-præferencer og brug øjeblikkelig eller begrænset scrollning. Et kortlink har brug for et tydeligt tilgængeligt navn, der indeholder produktnavnet. Forhindr dobbelte fokusmål, når både billede og titel fører til samme URL. Ved 200 % zoom kan kort blive en enkeltkort-viewport, men tekst, kontroller og fokusringe skal forblive komplette, og siden må ikke overløbe horisontalt.

Skriveregler

Skrivningen bør gøre medlemskab forsvarligt, før den gør rækken attraktiv.

• En specifik overskrift forklarer ruten. Brug 3–10 ord: “Kompatible Arc 14-tilbehør” eller “Alternativer under USD 100.” Stol aldrig alene på “Mere,” “Trending” eller “Du vil måske også kunne lide.”
• Én sætning etablerer udvælgelse. Brug 8–30 ord til at angive delte kriterier, målgruppe, kompatibilitet eller historikkilde. Hvis rangering eller popularitet bestemmer rækkefølgen, navngiv metrikken, markedet og perioden.
• Begrænsede sæt forbliver inspicerbare. Brug normalt 4–8 produkter og højst 12. To eller tre kort bør danne en statisk række; større sortimenter har brug for et gitter og en kanonisk samlingsrute.
• Kortnavne bevarer identitet. Brug det officielle produktnavn på 1–8 ord. Erstat det ikke med “Bedste værdi,” “Vores valg” eller en kampagneslogan.
• Kvalifikationer besvarer ét beslutningsspørgsmål. Brug 4–18 ord til pasform, særskilne egenskaber, kompatibilitet eller begrænsninger. Undgå generisk ros som “premium kvalitet.”
• Parallelle fakta understøtter scanning. Hvis ét kort viser pris, valuta, tilgængelighed, vurdering eller levering, viser tilsvarende kort tilsvarende felter eller eksplicitte utilgængelige tilstande fra samme kilde og marked.
• Rækkefølge har brug for et ansvarligt grundlag. Kompatibilitetsrækkefølge kan sætte det stærkeste match først; rangering kræver offentliggjorte kriterier; seneste dato afspejler den besøgendes historik. Betalt placering skal oplyses og må ikke udgive sig for at være redaktionel relevans.
• Handlinger bevarer kontekst. Brug “Se Arc bærbarsstativ,” ikke fem forekomster af “Lær mere.” En kort-CTA åbner den pågældende produkts kanoniske detaljeside, medmindre handlingen eksplicit tilføjer en kendt variant til en kurv.
• Flygtige påstande har brug for ejerskab. Priser, lager, levering, rabatter, vurderinger og popularitet kommer fra godkendte systemer og bærer den nødvendige friskhedsadfærd. Redaktionel prosa må ikke hårdkode en modstridende værdi.

Placer aldrig lange anmeldelser, sammenligningsmatricer, variantvælgere, antalskontroller, checkout-betingelser, udtalelser, nedtællingstimere, pop-ups, videoafspillere eller påkrævede advarsler inde i et slide. Forudvælg ikke tilkøb, tilføj ikke produkter til en kurv blot ved at navigere, eller skjul sponsoreret rækkefølge. En skyder forhåndsviser ruter; destinationen eller den tilstødende primære komponent indeholder den fulde beslutning.

Indlægstyper, der bruger det

Feltet postTypes i front matter driver denne tabel. Inklusion betyder, at elementet er betinget, når et kompakt sekundært produktsæt forbedrer den specificerede side.

QA-tjekliste

• Sættet er sekundært i forhold til sidens hovedopgave og har én eksplicit produktrelation.
• Et gitter eller en sammenligningstabel ville ikke betjene læserens faktiske opgave bedre.
• Skyderen indeholder normalt 4–8 produkter og overstiger aldrig 12.
• Overskrift, udvælgelsesgrundlag, vareantal, kontroller, positionsstatus og Se alle-rute er synlige, hvor det er relevant.
• Hvert kort har en stabil identifikator, officielt navn, kanonisk destination og beslutningsrelevant kvalifikation.
• Pris, valuta, tilgængelighed, vurdering, levering og kampagnefelter er parallelle og kildebaserede, når de vises.
• Kompatibilitets-, rangerings-, popularitets-, personaliserings- og sponsoratspåstande oplyser deres grundlag.
• DOM-orden, visuel orden, annonceret position, tastaturorden og eventuelle ItemList-positioner matcher.
• Hvert produkt er server-gengivet og brugbart uden JavaScript; intet senere slide afhænger af interaktion eller en klientanmodning.
• Kort uden for skærmen forbliver i tilgængelighedstræet og er ikke skjulte, inerte eller kun repræsenteret af baggrundsbilleder.
• Forrige og næste knapper har tydelige navne, korrekte deaktiverede tilstande, synligt fokus og stabilt fokus efter bevægelse.
• Touch-swipe og piletaster er forbedringer; standardknapper og Tab-navigation giver fuld adgang.
• Der er ingen automatisk bevægelse, fokustyveri, tastaturfælde eller horisontalt overløb på sideniveau.
• Positionsændringer annonceres som tekst, og farve, beskæring, skygger eller prikker bærer aldrig fortsættelse alene.
• Alle billedstier løses før publicering, dimensioner reserverer plads, og alternativ tekst afspejler kortets formål.
• Ved 200 % zoom og på en smal skærm forbliver ét kort, dets tekst, dets kontroller og dets fokusring komplette.
• Strukturerede data gentager synlige, aktuelle fakta og udelader personaliseret historik eller opfundne kommercielle egenskaber.
• Den komplette samling har en crawlebar Se alle-URL, når læsere med rimelighed har brug for at browse ud over skinnen.
• Bærbare Markdown-, Hugo- og WordPress-repræsentationer bevarer de samme produkter, orden, felter og fallback.

FAQ

Akademi-skabelonen gengiver de fem gennemgåede spørgsmål gemt i [[faq]] front matter.