Produktkaruseller: Bläddring, tillgänglighet och extrahering

En produktkarusell är en horisontellt rullningsbar rad med produktkort som används för att exponera en liten, relaterad uppsättning utan att göra den till sidans huvudkatalog. Den ska hjälpa en shoppare att fortsätta en definierad köpväg – som att hitta kompatibla tillbehör eller jämförbara alternativ – samtidigt som varje artikels identitet, ordning och fakta bevaras för både människor och maskiner.

Varför detta element är viktigt

En karusell hanterar uppmärksamhet genom att visa ett fåtal val när de blir relevanta. På en produktsida kan en köpare som har förstått huvudartikeln välkomna kompatibla tillbehör. Ett fullt rutnät vid den tidpunkten skulle konkurrera med det primära köpet; en kompakt rad bevarar det ursprungliga beslutet samtidigt som den tillåter utforskning.

Den fördelen har en psykologisk kostnad: allt bortom den synliga kanten är lättare att förbise. Det första kortet får mer exponering än det sjunde, och ett avklippt sista kort kan se ut som ett fel om inte designen signalerar fortsättning. En karusell måste därför innehålla en sekundär, avsiktligt ordnad uppsättning. Den får inte dölja ett val som läsaren behöver för att förstå pris, säkerhet, kompatibilitet eller sortimentet i sig.

Maskinell extraherbarhet är förmågan hos sökmotorer, assistenter, flöden och innehållsverktyg att isolera varje produkt och behålla dess fält kopplade. En person kan svepa för att avslöja kort sex; en crawler kanske aldrig utför den interaktionen. När senare bilder endast anländer efter JavaScript, använder display:none eller bara existerar som bakgrundsbilder, ser systemet en ofullständig samling. Att rendera varje kort i semantisk källkodsordning låter en maskin återfinna samma namn, webbadresser, positioner, priser, valutor och tillgänglighet som en shoppare kan nå.

Följ skrivreglerna för element för prioritet: klassificera blocket efter syfte innan du väljer dess utseende. Om dess uppgift är att exponera en sekundär produktväg, tillämpas detta element. Om dess uppgift är att visa fullständiga resultat eller möjliggöra sida-vid-sida-utvärdering, har det lämpliga rutnätet eller den typade tabellen företräde.

När du ska använda det

Använd en produktkarusell när alla dessa villkor gäller:

• Uppsättningen är sekundär till sidans huvuduppgift.
• Produkterna delar en explicit relation, såsom kompatibla tillbehör, alternativ i samma kategori, nyligen visade artiklar eller en redaktionell kortlista.
• Fyra till åtta koncisa kort ger användbar bredd utan att skapa en dold katalog.
• Ordningen kan förklaras genom relevans, kompatibilitet, redaktionell rangordning, aktualitet eller en annan synlig regel.
• Varje produkt förblir förståelig som ett kompakt kort och har en kanonisk destination för fullständig information.

En karusell slår ett rutnät när vertikalt utrymme är begränsat och läsare inte behöver se alla val samtidigt. Den kan bevara sammanhang på en produktinformationssida, hålla en kort rekommendationsuppsättning samlad på mobilen och visa nästa väg utan att placera åtta fullständiga beskrivningar i artikelns flöde.

Använd ett rutnät när uppsättningen är destinationen. Sökresultat, en produktkategori, en filtrerad samling eller en samling som måste skannas i sin helhet behöver synliga antal, sortering, filter, paginering och stabila webbadresser. Använd en jämförelsetabell när läsare måste bedöma samma specifikationer mellan alternativ. Använd ett bildgalleri när artiklarna är vyer av ett ämne snarare än separata köpbara produkter.

Vanliga nästan-träffar inkluderar en rad med två objekt som tvingats in i karusellkontroller, en 30-produkters kategori som klämts in i en rad, en hjältebannerkarusell som innehåller kampanjer istället för produkter, och en karusell som används för att dölja svaga rekommendationer nedanför sidvecket. “Nyligen visade” är också en villkorad nästan-träff: det är användbart endast när besökaren faktiskt har historik, rubriken säger varför dessa artiklar visas och en tomt tillstånd inte fabricerar aktivitet.

Var du ska placera det

Placeringen bör besvara en fråga som läsaren just har utvecklat. Placera kompatibla tillbehör efter kompatibilitets- och medföljande-artikelinformation, alternativ efter den primära produktens begränsningar eller beslutsammanfattning, och relaterade produkter efter kategoriens huvudsakliga lista snarare än före den. I redaktionellt innehåll, placera raden efter kriterier och bevis, inte innan läsarna vet varför produkterna kvalificerar sig.

Håll rubriken, relationsuttalandet, artikelantalet, kontrollerna och korten i en region. Sätt en “Visa alla”-länk bredvid rubriken eller efter raden när en fullständig samling finns. Länken måste leda till en crawlbart kanonisk sida, inte expandera en obegränsad klientsidig rad.

Placera inte en karusell bredvid en annan karusell, en auto-roterande banner, en pristabell eller sidans primära köp-kontroller. Angränsande horisontella gester skapar otydlighet, medan konkurrerande priser kan göra det oklart vilket erbjudande den huvudsakliga CTA:n köper. Avbryt inte procedursteg, en varning, kassavillkor eller obligatoriska juridiska upplysningar med rekommendationer. Placera aldrig viktiga varianter inuti en karusell om val av en ändrar den primära produktens pris, tillgänglighet eller konfiguration; varianter hör till den ägande produktens kontroller.

På små skärmar, tillåt ett komplett kort plus en avsiktlig glimt av nästa kort, eller ett komplett kort med en explicit positionsetikett. Regionen får scrollas horisontellt, men själva dokumentet får inte göra det. Bevara en synlig väg förbi karusellen så att en tangentbords- eller touchanvändare aldrig fastnar i upprepad horisontell navigering.

Anatomi

1. Sektionsrubrik: namnger uppsättningen, till exempel “Kompatibla tillbehör,” snarare än det generiska “Du kanske också gillar.”
2. Relationsuttalande: förklarar varför produkterna kvalificerar sig och om ordningen är redaktionell, beteendebaserad eller kommersiell.
3. Artikelantal: anger det begränsade antalet före interaktion, till exempel “6 produkter.”
4. Visningsport: beskär endast presentation; den tar inte bort kort utanför skärmen från dokumentet.
5. Produktkort: bevarar en produkts namn, destination, avgörande kvalificerare och aktuella kommersiella fakta som en enhet.
6. Fortsättningssignal: använder ett delvis nästa kort, positionstext eller båda; skugga ensam är för lätt att missa.
7. Föregående- och nästa-kontroller: använder knappar namngivna för sin effekt och visar inaktiverat tillstånd vid ändarna.
8. Positionsindikator: meddelar ett intervall som “Produkter 1–3 av 6,” inte en rad omärkta punkter.
9. Visa alla-väg: öppnar den kanoniska fullständiga samlingen när en sådan finns.
10. Fokusbehandling: förblir synlig på varje kontroll och kortlänk utan att beskäras av visningsporten.

Varje kort följer produktkorts kontraktet. Karusellen äger samlingsbetydelse och navigering snarare än att omdefiniera produktfakta lokalt.

Designexempel

Redaktionell kortlista: använd för fyra till åtta produkter valda enligt angivna kriterier. Ordningen får endast representera rangordning när sidan innehåller bevisen för den rangordningen; märk annars “Utvalda alternativ” och undvik ordinala påståenden.

Relaterade produkter: använd för produkter i samma kategori eller substitutionsartiklar efter att huvudprodukten har förklarats. Ange den delade egenskapen, såsom formfaktor eller prisklass, snarare än att antyda personanpassning.

Kompatibla tillbehör: använd när varje artikel har en verifierad relation till den ägande produkten. Upprepa den kompatibla modellen eller serien i korttext; närhet är inget kompatibilitetsgaranti.

Beteendehistorik: använd för nyligen visade eller sparade artiklar endast när besökaren har skapat det tillståndet. Märk grunden, bevara ordning efter aktualitet, tillhandahåll borttagning där lämpligt och skicka inte personanpassad historik till delade cachningssystem eller strukturerad data.

Parametrar

En bild är villkorlig eftersom ett text-först-produktkort kan vara komplett utan en. Om den används måste filen finnas, dimensionerna måste reservera utrymme och alternativ text måste matcha dess syfte. Om ett kort visar pris eller tillgänglighet måste varje motsvarande kort visa ett motsvarande aktuellt fält eller explicit status.

Syntax och kodexempel

Portabel Markdown-direktiv

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="Visa alla tillbehör" viewAllUrl="/accessories/"}
## Kompatibla skrivbordstillbehör

Verifierade för Arc 14-bärbara datorer; fyra produkter.

::item{id=arc-stand name="Arc laptopställ" url="/products/arc-stand/" price="69 USD" availability="in-stock"}
Höjer 13–16 tums bärbara datorer och håller laddningsportarna fria.
::

::item{id=dock-7 name="Dock 7-hubb" url="/products/dock-7/" price="89 USD" availability="in-stock"}
Lägger till sju portar och stödjer 100 W genomströmningsladdning.
::
:::

Hugo shortcode-mappning

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="Visa alla tillbehör" viewAllUrl="/accessories/" >}}
## Kompatibla skrivbordstillbehör

Verifierade för Arc 14-bärbara datorer; fyra produkter.

{{< product-slide id="arc-stand" name="Arc laptopställ" url="/products/arc-stand/" price="69 USD" availability="in-stock" >}}
Höjer 13–16 tums bärbara datorer och håller laddningsportarna fria.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7-hubb" url="/products/dock-7/" price="89 USD" availability="in-stock" >}}
Lägger till sju portar och stödjer 100 W genomströmningsladdning.
{{< /product-slide >}}
{{< /product-slider >}}

Detta är den avsedda adapter-specifikationen, inte en registrerad shortcode-anropning. Den använder endast namngivna parametrar. Tills adaptern existerar, implementera samlingen som semantisk HTML eller en icke-interaktiv rad utan att uppfinna en shortcode som inte stöds.

WordPress-block

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"Visa alla tillbehör","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Kompatibla skrivbordstillbehör</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verifierade för Arc 14-bärbara datorer; fyra produkter.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptopställ","url":"/products/arc-stand/","price":"69 USD","availability":"in-stock","qualifier":"Höjer 13–16 tums bärbara datorer och håller laddningsportarna fria."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7-hubb","url":"/products/dock-7/","price":"89 USD","availability":"in-stock","qualifier":"Lägger till sju portar och stödjer 100 W genomströmningsladdning."} /-->
<!-- /wp:amicited/product-slider -->

Exempel

Bra: kompatibiliteten är explicit

Tillbehör verifierade för Arc 14 — 4 produkter
Arc laptopställ — 69 USD — I lager. Passar 13–16 tums bärbara datorer; alla Arc 14-portar förblir åtkomliga.
Dock 7-hubb — 89 USD — I lager. Stödjer Arc 14 USB-C-laddningsspecifikationen och 100 W genomströmning.
Tyst tangentuppsättning — 74 USD — Lågt lager. Ansluter via Bluetooth; ingen mottagare upptar en Arc 14-port.
Arbetslampa Mini — 45 USD — I lager. Använder en separat USB-C-strömkälla; den drar inte ström från den bärbara datorn.

Detta lyckas eftersom relationen är namngiven och verifierad, varje kort gör ett distinkt kompatibilitetsuttalande, kommersiella fält är parallella och det begränsade antalet är synligt. Alla fyra artiklar kan finnas i källkodsordning även när endast tre får plats i visningsporten.

Dåligt: dolda rekommendationer utan grund

Du kanske också gillar
BÄSTSÄLJARE — 69 $ — Handla nu
TRENDANDE — 89 $ — Handla nu
[Ytterligare tre kort laddas efter den andra svepningen.]

Detta misslyckas eftersom rubriken inte förklarar relationen, “bästsäljare” och “trendande” har ingen definierad källa eller period, valutan är underförstådd och upprepade “Handla nu”-etiketter förlorar produktidentitet ur sitt sammanhang. Ännu allvarligare, tre produkter existerar inte förrän interaktion, så en tangentbordsanvändare, crawler eller misslyckat skript får en annan uppsättning.

Schema-markup och tillgänglighet

En redaktionell produktkarusell kan mata ItemList när dess medlemskap och ordning är meningsfulla. Använd en ListItem per synlig produktentitet, med position, kanonisk webbadress och produktreferensen. Positioner måste matcha DOM och visuell ordning. Markera inte personanpassad nyligen visad historik som en publik ItemList, eftersom uppsättningen inte är stabilt sidinnehåll.

Varje kort får mata Product och Offer-data endast när den synliga sidan stödjer samma fakta. Ett namn och en destination rättfärdigar inte påhittade pris-, betygs-, varumärkes-, tillgänglighets- eller recensionsdata. Generera synliga fält och strukturerad data från samma godkända produktkälla och utelämna volatila egenskaper som inte kan förbli synkroniserade. Det finns ingen särskild karusell-schematyp.

Använd en namngiven <section> eller role="region" endast när rubriken inte redan ger tillräcklig landmärkessemantik. Representera samlingen som en <ul>, <ol> eller motsvarande lista; varje kort är en listpost. Behåll kort utanför skärmen i DOM och tillgänglighetsträdet. Horisontell beskärning är presentation, medan display:none, aria-hidden="true", inert eller klientsidig virtualisering gör innehållet otillgängligt.

Använd inbyggda knappar för föregående och nästa. Namnge dem “Föregående produkter” och “Nästa produkter,” inaktivera dem korrekt vid ändarna, och behåll fokus efter förflyttning. Meddela “Produkter 4–6 av 8” i en artig statusregion utan att flytta fokus till det nyligen exponerade kortet. Piltangenter kan vara en förbättring, men Tab måste nå kontroller och länkar normalt. Svep får stödjas, men aldrig som den enda inmatningsmetoden.

Kör inte automatiskt fram. Respektera preferenser för minskad rörelse och använd omedelbar eller återhållsam scrollning. En kortlänk behöver ett distinkt tillgängligt namn som innehåller produktnamnet. Förhindra dubbla fokusmål när både bild och titel leder till samma URL. Vid 200 % zoom kan kort bli en vy med ett kort, men text, kontroller och fokusringar måste förbli kompletta och sidan får inte flöda över horisontellt.

Skrivregler

Skrivandet bör göra medlemskap försvarbart innan det gör raden attraktiv.

• En specifik rubrik förklarar vägen. Använd 3–10 ord: “Kompatibla Arc 14-tillbehör” eller “Alternativ under 100 USD.” Förlita dig aldrig enbart på “Mer,” “Trendande” eller “Du kanske också gillar.”
• En mening etablerar urvalet. Använd 8–30 ord för att ange delade kriterier, målgrupp, kompatibilitet eller historikkälla. Om rangordning eller popularitet bestämmer ordningen, namnge mätvärde, marknad och period.
• Ändliga uppsättningar förblir inspekterbara. Använd normalt 4–8 produkter och högst 12. Två eller tre kort bör bilda en statisk rad; större sortiment behöver ett rutnät och en kanonisk samlingsväg.
• Kortnamn bevarar identitet. Använd det officiella produktnamnet i 1–8 ord. Ersätt det inte med “Bästa värdet,” “Vårt val” eller en kampanjslogan.
• Kvalificerare besvarar en beslutsfråga. Använd 4–18 ord för passform, särskiljande förmåga, kompatibilitet eller begränsning. Undvik generiskt beröm som “premiumkvalitet.”
• Parallella fakta stödjer överskådlighet. Om ett kort visar pris, valuta, tillgänglighet, betyg eller leverans, visar motsvarande kort motsvarande fält eller explicit otillgängliga tillstånd från samma källa och marknad.
• Ordning behöver en ansvarig grund. Kompatibilitetsordning kan placera den starkaste matchningen först; rangordning kräver publicerade kriterier; aktualitet återspeglar besökarens historik. Betald placering måste redovisas och får inte utge sig för att vara redaktionell relevans.
• Åtgärder behåller sammanhang. Använd “Visa Arc laptopställ,” inte fem instanser av “Läs mer.” En kort-CTA öppnar den produktens kanoniska detaljsida om inte åtgärden explicit lägger till en känd variant i en varukorg.
• Volatila påståenden behöver ägarskap. Priser, lagerstatus, leverans, rabatter, betyg och popularitet kommer från godkända system och har det erforderliga uppförandet för färskhet. Redaktionell prosa får inte hårdkoda ett motstridigt värde.

Placera aldrig långa recensioner, jämförelsematriser, variantväljare, kvantitetskontroller, kassavillkor, vittnesmål, nedräkningstimers, popup-fönster, videospelare eller obligatoriska varningar inuti en bild. Förvälj inte tillägg, lägg inte till produkter i en varukorg enbart genom navigering, eller dölj sponsrad ordning. En karusell förhandsvisar vägar; destinationen eller den intilliggande primära komponenten håller det fullständiga beslutet.

Bloggtyper som använder det

Fältet postTypes i frontmatter styr denna tabell. Inkludering innebär att elementet är villkorat när en kompakt sekundär produktuppsättning förbättrar den angivna sidan.

QA-checklista

• Uppsättningen är sekundär till sidans huvuduppgift och har en explicit produktrelation.
• Ett rutnät eller en jämförelsetabell skulle inte tjäna läsarens faktiska uppgift bättre.
• Karusellen innehåller normalt 4–8 produkter och överstiger aldrig 12.
• Rubriken, urvalsgrunden, artikelantalet, kontrollerna, positionsstatusen och Visa alla-vägen är synliga där tillämpligt.
• Varje kort har en stabil identifierare, officiellt namn, kanonisk destination och beslutsmässigt relevant kvalificerare.
• Pris-, valuta-, tillgänglighets-, betygs-, leverans- och kampanjfält är parallella och källhänvisade när de visas.
• Kompatibilitets-, rangordnings-, popularitets-, personanpassnings- och sponsringspåståenden redovisar sin grund.
• DOM-ordning, visuell ordning, annonserad position, tangentbordsordning och eventuella ItemList-positioner matchar.
• Varje produkt är server-renderad och användbar utan JavaScript; ingen senare bild beror på interaktion eller en klientsidig begäran.
• Kort utanför skärmen förblir i tillgänglighetsträdet och är inte dolda, inerta eller representerade endast av bakgrundsbilder.
• Föregående- och nästa-knappar har distinkta namn, korrekta inaktiverade tillstånd, synligt fokus och stabilt fokus efter förflyttning.
• Beröringssvep och piltangenter är förbättringar; vanliga knappar och Tab-navigering ger fullständig åtkomst.
• Det finns ingen automatisk rörelse, fokusstöld, tangentbordsfälla eller horisontellt överflöde på sidnivå.
• Positionsändringar meddelas som text, och färg, beskärning, skuggor eller punkter bär aldrig fortsättning ensam.
• Varje bilds sökväg löses före publicering, dimensioner reserverar utrymme och alternativ text återspeglar kortets syfte.
• Vid 200 % zoom och på en smal skärm förblir ett kort, dess text, dess kontroller och dess fokusring kompletta.
• Strukturerad data upprepar synliga, aktuella fakta och utelämnar personlig historik eller påhittade kommersiella egenskaper.
• Den fullständiga samlingen har en crawlbart Visa alla-URL när läsare rimligen behöver bläddra bortom raden.
• Portabel Markdown, Hugo och WordPress-representationer bevarar samma produkter, ordning, fält och reservalternativ.

FAQ

Academy-mallen renderar de fem granskade frågorna som lagras i [[faq]] frontmatter.