Productové slider: Procházení, přístupnost a extrakce

Produktový slider je horizontálně posouvatelný řádek produktových karet, který slouží k zobrazení malé, související sady, aniž by se tato sada stala hlavním katalogem stránky. Měl by pomoci nakupujícímu pokračovat v definované nákupní cestě – například najít kompatibilní příslušenství nebo srovnatelné alternativy – a zároveň zachovat identitu, pořadí a fakta každé položky pro lidi i stroje.

Proč na tomto elementu záleží

Slider řídí pozornost tím, že ukazuje několik možností právě ve chvíli, kdy se stanou relevantními. Na produktové stránce může kupující, který pochopil hlavní položku, uvítat kompatibilní příslušenství. Plná mřížka by v tu chvíli konkurovala primárnímu nákupu; jeden kompaktní řádek zachovává původní rozhodnutí a zároveň umožňuje průzkum.

Tato výhoda s sebou nese psychologickou cenu: cokoli za viditelným okrajem je snazší přehlédnout. První karta získává větší pozornost než sedmá a useknutá poslední karta může vypadat jako chyba, pokud design nenaznačuje pokračování. Slider proto musí obsahovat sekundární, záměrně seřazenou sadu. Nesmí skrývat volbu, kterou čtenář potřebuje k pochopení ceny, bezpečnosti, kompatibility nebo samotného rozsahu.

Strojová extrahovatelnost je schopnost vyhledávačů, asistentů, feedů a nástrojů pro práci s obsahem izolovat každý produkt a udržet jeho pole pohromadě. Člověk může přejetím odhalit kartu číslo šest; crawler tuto interakci nikdy neprovede. Když pozdější snímky přicházejí až po JavaScriptu, používají display:none nebo existují pouze jako obrázky na pozadí, systém vidí neúplnou kolekci. Vykreslení každé karty v sémantickém zdrojovém pořadí umožňuje stroji získat stejné názvy, URL, pozice, ceny, měny a dostupnost, ke kterým se dostane i nakupující.

Řiďte se pravidly pro psaní elementů ohledně precedence: klasifikujte blok podle účelu ještě před volbou jeho vzhledu. Pokud je jeho úkolem zobrazit sekundární produktovou cestu, platí tento element. Pokud je jeho úkolem ukázat kompletní výsledky nebo umožnit srovnání vedle sebe, má přednost příslušná mřížka nebo typová tabulka.

Kdy jej použít

Použijte produktový slider, pokud platí všechny tyto podmínky:

• Sada je sekundární vůči hlavnímu úkolu stránky.
• Produkty sdílejí jeden explicitní vztah, například kompatibilní příslušenství, alternativy ve stejné kategorii, nedávno zobrazené položky nebo redakční výběr.
• Čtyři až osm stručných karet poskytuje užitečnou šíři, aniž by vytvářelo skrytý katalog.
• Pořadí lze vysvětlit pomocí relevance, kompatibility, redakčního hodnocení, recence nebo jiného viditelného pravidla.
• Každý produkt zůstává srozumitelný jako kompaktní karta a má kanonický cíl pro úplné podrobnosti.

Slider je lepší než mřížka, když je vertikální prostor omezený a čtenáři nepotřebují vidět všechny volby současně. Může zachovat kontext na detailní stránce produktu, udržet krátkou sadu doporučení pohromadě na mobilu a odhalit další cestu, aniž by umístil osm úplných popisů do toku článku.

Použijte mřížku, když je sada cílem. Výsledky vyhledávání, kategorie produktů, filtrovaná kolekce nebo kolekce, která musí být prohlédnuta celá, potřebuje viditelné počty, řazení, filtry, stránkování a stabilní URL. Použijte srovnávací tabulku , když čtenáři musí posuzovat stejné specifikace napříč možnostmi. Použijte galerii obrázků , když jsou položky pohledy na jeden subjekt, nikoli samostatné prodejné produkty.

Mezi běžné téměř zásahy patří dvoupoložkový řádek nuceně vložený do ovládacích prvků karuselu, 30produktová kategorie nacpaná do lišty, hero banner karusel obsahující propagace místo produktů a slider použitý k ukrytí slabých doporučení pod záhybem. „Nedávno zobrazené" je také podmíněný téměř zásah: je užitečný pouze tehdy, když návštěvník skutečně má historii, nadpis říká, proč se tyto položky zobrazují, a prázdný stav nevytváří falešnou aktivitu.

Kam jej umístit

Umístění by mělo odpovídat na otázku, kterou si čtenář právě vytvořil. Umístěte kompatibilní příslušenství až po informacích o kompatibilitě a součástech balení, alternativy až po omezeních primárního produktu nebo souhrnu rozhodnutí a související produkty až po hlavním výpisu kategorie, nikoli před něj. V redakčním obsahu umístěte lištu až po kritériích a důkazech, nikoli dříve, než čtenáři vědí, proč produkty splňují podmínky.

Udržujte nadpis, prohlášení o vztahu, počet položek, ovládací prvky a karty v jedné oblasti. Umístěte odkaz „Zobrazit vše" vedle nadpisu nebo za řádek, pokud existuje kompletní kolekce. Odkaz musí vést na procházenou kanonickou stránku, nikoli rozšiřovat neomezenou klientskou lištu.

Neumisťujte slider vedle jiného slideru, automaticky rotujícího banneru, cenové tabulky nebo primárních nákupních ovládacích prvků stránky. Sousedící horizontální gesta vytvářejí nejednoznačnost, zatímco konkurenční ceny mohou způsobit nejasnosti ohledně toho, kterou nabídku hlavní CTA nakupuje. Nepřerušujte procedurální kroky, varování, podmínky pokladny nebo povinné právní informace doporučeními. Nikdy neumisťujte zásadní varianty do slideru, pokud jejich výběr mění cenu, dostupnost nebo konfiguraci primárního produktu; varianty patří k ovládacím prvkům vlastního produktu.

Na malých obrazovkách povolte jednu celou kartu plus záměrný náhled další karty, nebo jednu celou kartu s explicitním popiskem pozice. Oblast se může horizontálně posouvat, ale samotný dokument nikoli. Zachovejte viditelnou cestu kolem slideru, aby uživatel klávesnice nebo dotyku nebyl nikdy uvězněn v opakované horizontální navigaci.

Anatomie

1. Nadpis sekce: pojmenovává sadu, například „Kompatibilní příslušenství", nikoli generické „Mohlo by se vám také líbit."
2. Prohlášení o vztahu: vysvětluje, proč produkty splňují podmínky a zda je pořadí redakční, behaviorální nebo komerční.
3. Počet položek: uvádí konečnou velikost před interakcí, například „6 produktů."
4. Výřez: ořezává pouze prezentaci; neodstraňuje karty mimo obrazovku z dokumentu.
5. Produktová karta: uchovává název jednoho produktu, cíl, rozhodující kvalifikátor a aktuální komerční údaje jako jeden celek.
6. Náznak pokračování: používá částečnou další kartu, text o pozici nebo obojí; samotný stín je příliš snadno přehlédnutelný.
7. Tlačítka zpět a vpřed: používají tlačítka pojmenovaná podle svého účinku a na koncích zobrazují vypnutý stav.
8. Indikátor pozice: oznamuje rozsah, například „Produkty 1–3 ze 6," nikoli řadu neoznačených teček.
9. Cesta Zobrazit vše: otevírá kanonickou kompletní kolekci, pokud existuje.
10. Zpracování fokusu: zůstává viditelné na každém ovládacím prvku a odkazu karty, aniž by bylo oříznuto výřezem.

Každá karta se řídí smlouvou produktové karty . Slider vlastní význam kolekce a navigaci, spíše než aby lokálně předefinovával produktová fakta.

Designové příklady

Redakční výběr: použijte pro čtyři až osm produktů vybraných podle uvedených kritérií. Pořadí může představovat hodnocení pouze tehdy, pokud stránka obsahuje důkazy pro toto hodnocení; jinak jej označte jako „Vybrané možnosti" a vyhněte se pořadovým tvrzením.

Související produkty: použijte pro položky ve stejné kategorii nebo náhradní položky poté, co byl hlavní produkt vysvětlen. Uveďte sdílenou vlastnost, například formát nebo cenové pásmo, spíše než naznačovat personalizaci.

Kompatibilní příslušenství: použijte, když má každá položka ověřený vztah k vlastnímu produktu. Opakujte kompatibilní model nebo řadu v textu karty; blízkost není zárukou kompatibility.

Behaviorální historie: použijte pro nedávno zobrazené nebo uložené položky pouze tehdy, když návštěvník tento stav vytvořil. Označte základ, zachovejte pořadí podle recence, poskytněte možnost odstranění tam, kde je to vhodné, a nevyzařujte personalizovanou historii do sdílených mezipamětí ani strukturovaných dat.

Parametry

Obrázek je podmíněný, protože textově orientovaná produktová karta může být úplná i bez něj. Pokud je použit, musí jeho soubor existovat, rozměry musí rezervovat místo a alternativní text musí odpovídat jeho účelu. Pokud jedna karta zobrazuje cenu nebo dostupnost, musí každá srovnatelná karta zobrazovat ekvivalentní aktuální pole nebo explicitní stav.

Syntaxe a příklady kódu

Přenosný Markdown direktiva

:::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.
::
:::

Mapování na Hugo shortcode

{{< 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 >}}

Toto je zamýšlená specifikace adaptéru, nikoli registrovaná invokace shortcode. Používá pouze pojmenované parametry. Dokud adaptér neexistuje, implementujte kolekci jako sémantické HTML nebo neinteraktivní řádek, aniž byste vytvářeli nepodporovaný 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 -->

Příklady

Dobrý: kompatibilita je explicitní

Příslušenství ověřené pro Arc 14 — 4 produkty Stojan na notebook Arc — 69 USD — Skladem. Pasuje na notebooky 13–16 palců; všechny porty Arc 14 zůstávají dosažitelné. Hub Dock 7 — 89 USD — Skladem. Podporuje specifikaci nabíjení Arc 14 USB-C a průchozí nabíjení 100 W. Tichá klávesová sada — 74 USD — Nízká skladová zásoba. Připojuje se přes Bluetooth; žádný přijímač neobsazuje port Arc 14. Stolní lampa Mini — 45 USD — Skladem. Používá samostatný USB-C napájecí zdroj; neodebírá energii z notebooku.

Toto je úspěšné, protože vztah je pojmenován a ověřen, každá karta činí zřetelné prohlášení o kompatibilitě, komerční pole jsou paralelní a konečný počet je viditelný. Všechny čtyři položky mohou existovat ve zdrojovém pořadí, i když se do výřezu vejdou pouze tři.

Špatný: skrytá doporučení bez základu

Mohlo by se vám také líbit NEJPRODÁVANĚJŠÍ — 69 $ — Koupit nyní TREND — 89 $ — Koupit nyní [Tři další karty se načtou po druhém přejetí.]

Toto selhává, protože nadpis nevysvětluje vztah, „nejprodávanější" a „trend" nemají definovaný zdroj ani období, měna je odvozená a opakované popisky „Koupit nyní" ztrácejí identitu produktu mimo kontext. Závažněji, tři produkty neexistují až do interakce, takže uživatel klávesnice, crawler nebo neúspěšný skript obdrží jinou sadu.

Schema markup a přístupnost

Redakční produktový slider může napájet ItemList, pokud jsou jeho členství a pořadí smysluplné. Použijte jeden ListItem na každou viditelnou entitu produktu s position, kanonickou URL a referencí na produkt. Pozice musí odpovídat DOM a vizuálnímu pořadí. Neoznačujte personalizovanou historii nedávno zobrazených položek jako veřejný ItemList, protože sada není stabilním obsahem stránky.

Každá karta může napájet data Product a Offer pouze tehdy, když viditelná stránka podporuje stejná fakta. Název a cíl neospravedlňují vymyšlená data o ceně, hodnocení, značce, dostupnosti nebo recenzích. Generujte viditelná pole a strukturovaná data ze stejného schváleného zdroje produktu a vynechejte volatilní vlastnosti, které nelze udržet synchronizované. Neexistuje žádný speciální typ schématu pro karusel.

Použijte pojmenovaný <section> nebo role="region" pouze tehdy, když nadpis již neposkytuje dostatečnou orientační sémantiku. Reprezentujte kolekci jako <ul>, <ol> nebo ekvivalentní seznam; každá karta je jedna položka seznamu. Udržujte karty mimo obrazovku v DOM a stromu přístupnosti. Horizontální ořezávání je prezentace, zatímco display:none, aria-hidden="true", inert nebo výhradně klientská virtualizace činí obsah nedostupným.

Použijte nativní tlačítka pro zpět a vpřed. Pojmenujte je „Předchozí produkty" a „Další produkty", přesně je na koncích vypněte a po pohybu udržte fokus. Oznamte „Produkty 4–6 z 8" ve zdvořilé stavové oblasti bez přesouvání fokusu do nově zobrazené karty. Šipkové klávesy mohou být vylepšením, ale Tab musí normálně dosáhnout na ovládací prvky a odkazy. Přejetí může být podporováno, nikdy však jako jediný vstup.

Neposouvejte automaticky. Respektujte preference omezení pohybu a používejte okamžité nebo zdrženlivé rolování. Odkaz karty potřebuje zřetelný přístupný název obsahující název produktu. Zabraňte duplicitním cílům fokusu, když obrázek i název vedou na stejnou URL. Při 200% zvětšení se karty mohou stát výřezem pro jednu kartu, ale text, ovládací prvky a fokusové kroužky musí zůstat kompletní a stránka nesmí horizontálně přetékat.

Pravidla psaní

Psaní by mělo učinit členství obhajitelným dříve, než udělá řádek atraktivním.

• Konkrétní nadpis vysvětluje cestu. Použijte 3–10 slov: „Kompatibilní příslušenství pro Arc 14" nebo „Alternativy pod 100 USD." Nikdy se nespoléhejte pouze na „Více," „Trend" nebo „Mohlo by se vám také líbit."
• Jedna věta stanoví výběr. Použijte 8–30 slov k uvedení sdílených kritérií, publika, kompatibility nebo zdroje historie. Pokud pořadí určuje hodnocení nebo popularita, pojmenujte metriku, trh a období.
• Konečné sady zůstávají zkontrolovatelné. Použijte běžně 4–8 produktů a ne více než 12. Dvě nebo tři karty by měly tvořit statický řádek; větší sortimenty potřebují mřížku a kanonickou cestu ke kolekci.
• Názvy karet zachovávají identitu. Použijte oficiální název produktu o 1–8 slovech. Nahrazujte jej výrazy jako „Nejlepší hodnota," „Naše volba" nebo sloganem kampaně.
• Kvalifikátory odpovídají na jednu rozhodovací otázku. Použijte 4–18 slov pro vhodnost, rozlišovací schopnost, kompatibilitu nebo omezení. Vyhněte se obecné chvále jako „prémiová kvalita."
• Paralelní fakta podporují skenování. Pokud jedna karta zobrazuje cenu, měnu, dostupnost, hodnocení nebo doručení, srovnatelné karty zobrazují ekvivalentní pole nebo explicitní stavy nedostupnosti ze stejného zdroje a trhu.
• Pořadí potřebuje odpovědný základ. Pořadí podle kompatibility může umístit nejsilnější shodu první; hodnocení vyžaduje zveřejněná kritéria; recence odráží historii návštěvníka. Placené umístění musí být zveřejněno a nemůže se vydávat za redakční relevanci.
• Akce zachovávají kontext. Použijte „Zobrazit stojan na notebook Arc," nikoli pět instancí „Zjistit více." CTA karty otevírá kanonickou detailní stránku tohoto produktu, pokud akce explicitně nepřidává známou variantu do košíku.
• Proměnlivá tvrzení potřebují vlastnictví. Ceny, skladová zásoba, doručení, slevy, hodnocení a popularita pocházejí ze schválených systémů a nesou požadované chování čerstvosti. Redakční próza nesmí pevně zakódovat konfliktní hodnotu.

Nikdy neumisťujte dlouhé recenze, srovnávací matice, výběr variant, ovládání množství, podmínky pokladny, reference, odpočítávací časovače, vyskakovací okna, videopřehrávače nebo povinná varování do snímku. Nepředvybírejte doplňky, nepřidávejte produkty do košíku pouhou navigací a neskrývejte sponzorované řazení. Slider nabízí náhled cest; cíl nebo sousední primární komponenta nese úplné rozhodnutí.

Typy příspěvků, které jej používají

Pole postTypes v frontmatteru řídí tuto tabulku. Zařazení znamená, že element je podmíněný, když kompaktní sekundární sada produktů zlepšuje danou stránku.

QA kontrolní seznam

• Sada je sekundární vůči hlavnímu úkolu stránky a má jeden explicitní produktový vztah.
• Mřížka nebo srovnávací tabulka by nesloužila skutečnému úkolu čtenáře lépe.
• Slider obsahuje běžně 4–8 produktů a nikdy nepřesahuje 12.
• Nadpis, základ výběru, počet položek, ovládací prvky, stav pozice a cesta Zobrazit vše jsou tam, kde je to vhodné, viditelné.
• Každá karta má stabilní identifikátor, oficiální název, kanonický cíl a rozhodovací kvalifikátor.
• Cena, měna, dostupnost, hodnocení, doručení a propagační pole jsou paralelní a při zobrazení mají zdroj.
• Tvrzení o kompatibilitě, hodnocení, popularitě, personalizaci a sponzoringu zveřejňují svůj základ.
• Pořadí DOM, vizuální pořadí, oznámená pozice, pořadí v klávesnici a případné ItemList pozice se shodují.
• Každý produkt je vykreslen na serveru a použitelný bez JavaScriptu; žádný pozdější snímek nezávisí na interakci nebo klientském požadavku.
• Karty mimo obrazovku zůstávají ve stromu přístupnosti a nejsou skryté, inertní nebo reprezentované pouze obrázky na pozadí.
• Tlačítka zpět a vpřed mají zřetelné názvy, správné vypnuté stavy, viditelný fokus a stabilní fokus po pohybu.
• Dotykové přejetí a šipkové klávesy jsou vylepšení; standardní tlačítka a navigace Tab poskytují úplný přístup.
• Nedochází k automatickému pohybu, krádeži fokusu, klávesnicové pasti nebo horizontálnímu přetékání stránky.
• Změny pozice jsou oznamovány jako text a barva, ořezávání, stíny nebo tečky nikdy nenesou samotný náznak pokračování.
• Každá cesta k obrázku se před publikováním vyřeší, rozměry rezervují místo a alternativní text odráží účel karty.
• Při 200% zvětšení a na úzké obrazovce zůstává jedna karta, její text, ovládací prvky a fokusový kroužek kompletní.
• Strukturovaná data opakují viditelná, aktuální fakta a vynechávají personalizovanou historii nebo vymyšlené komerční vlastnosti.
• Kompletní kolekce má procházenou URL Zobrazit vše, když čtenáři rozumně potřebují procházet za lištou.
• Přenosné reprezentace Markdown, Hugo a WordPress zachovávají stejné produkty, pořadí, pole a záložní chování.

FAQ

Šablona akademie vykresluje pět recenzovaných otázek uložených v [[faq]] frontmatteru.