Posuvné zoznamy produktov: Prehliadanie, prístupnosť a extrakcia

Posuvný zoznam produktov je horizontálne posúvateľný riadok kariet produktov, ktorý slúži na zobrazenie malej súvisiacej sady bez toho, aby sa táto sada stala hlavným katalógom stránky. Mal by pomôcť nakupujúcemu pokračovať v definovanej nákupnej ceste – napríklad nájsť kompatibilné príslušenstvo alebo porovnateľné alternatívy – pričom zachováva identitu, poradie a údaje každej položky pre ľudí aj stroje.

Prečo na tomto elemente záleží

Posuvný zoznam riadi pozornosť tým, že v okamihu, keď sa stanú relevantnými, zobrazí niekoľko možností. Na stránke produktu môže kupujúci, ktorý pochopil hlavnú položku, privítať kompatibilné príslušenstvo. Úplná mriežka by v tomto bode konkurovala primárnemu nákupu; jeden kompaktný riadok zachováva pôvodné rozhodnutie a zároveň umožňuje objavovanie.

Táto výhoda so sebou nesie psychologickú cenu: čokoľvek za viditeľným okrajom sa ľahšie prehliada. Prvá karta je vystavená viac ako siedma a orezaná posledná karta môže vyzerať ako chyba, pokiaľ dizajn nenaznačuje pokračovanie. Posuvný zoznam preto musí obsahovať sekundárnu, zámerne usporiadanú sadu. Nesmie skrývať voľbu, ktorú čitateľ potrebuje na pochopenie ceny, bezpečnosti, kompatibility alebo samotného rozsahu.

Strojová extrahovateľnosť je schopnosť vyhľadávačov, asistentov, informačných kanálov a nástrojov na prácu s obsahom izolovať každý produkt a udržať jeho polia priradené. Človek môže potiahnutím odhaliť kartu číslo šesť; crawler túto interakciu nikdy nemusí vykonať. Keď neskoršie snímky prichádzajú až po JavaScripte, používajú display:none alebo existujú len ako obrázky na pozadí, systém vidí neúplnú kolekciu. Vykreslenie každej karty v sémantickom zdrojovom poradí umožňuje stroju získať rovnaké názvy, URL, pozície, ceny, meny a dostupnosť, aké môže dosiahnuť nakupujúci.

Postupujte podľa pravidiel písania elementov pre prednosť: klasifikujte blok podľa účelu pred výberom jeho vzhľadu. Ak je jeho úlohou zobraziť sekundárnu produktovú cestu, platí tento element. Ak je jeho úlohou zobraziť úplné výsledky alebo umožniť porovnanie vedľa seba, prednosť má príslušná mriežka alebo typovaná tabuľka.

Kedy ho použiť

Použite posuvný zoznam produktov, keď platia všetky tieto podmienky:

• Sada je sekundárna voči hlavnej úlohe stránky.
• Produkty zdieľajú jeden explicitný vzťah, napríklad kompatibilné príslušenstvo, alternatívy v rovnakej kategórii, nedávno zobrazené položky alebo redakčný výber.
• Štyri až osem stručných kariet poskytuje užitočnú šírku bez vytvárania skrytého katalógu.
• Poradie možno vysvetliť prostredníctvom relevantnosti, kompatibility, redakčného poradia, aktuálnosti alebo iného viditeľného pravidla.
• Každý produkt zostáva zrozumiteľný ako kompaktná karta a má kanonický cieľ pre úplné podrobnosti.

Posuvný zoznam je lepší ako mriežka, keď je vertikálny priestor obmedzený a čitatelia nepotrebujú vidieť všetky možnosti súčasne. Môže zachovať kontext na detailnej stránke produktu, udržať krátku sadu odporúčaní pohromade na mobile a zobraziť ďalšiu cestu bez toho, aby do toku článku umiestnil osem úplných popisov.

Použite mriežku, keď je sada cieľom. Výsledky vyhľadávania, kategória produktov, filtrovaná kolekcia alebo kolekcia, ktorú je potrebné prehliadať celú, potrebuje viditeľné počty, triedenie, filtre, stránkovanie a stabilné URL. Použite porovnávaciu tabuľku , keď čitatelia musia posúdiť rovnaké špecifikácie naprieč možnosťami. Použite galériu obrázkov , keď sú položkami pohľady na jeden subjekt, nie samostatné produkty na nákup.

Medzi bežné takmer zásahy patrí dvojpoložkový riadok vnútený do ovládacích prvkov karuselu, 30-produktová kategória natlačená do úzkeho pásu, hero banner karusel obsahujúci propagácie namiesto produktov a posuvný zoznam použitý na skrytie slabých odporúčaní pod záhybom. „Naposledy zobrazené" je tiež podmienečný takmer zásah: je užitočný len vtedy, keď návštevník skutočne má históriu, nadpis hovorí, prečo sa tieto položky zobrazujú, a prázdny stav nevytvára fiktívnu aktivitu.

Kam ho umiestniť

Umiestnenie by malo zodpovedať otázke, ktorú si čitateľ práve vytvoril. Kompatibilné príslušenstvo umiestnite za informácie o kompatibilite a súčasťou balenia, alternatívy za obmedzenia alebo súhrn rozhodnutí o primárnom produkte a súvisiace produkty za hlavný zoznam kategórie, nie pred neho. V redakčnom obsahu umiestnite pás za kritériá a dôkazy, nie skôr, než čitatelia vedia, prečo produkty spĺňajú požiadavky.

Udržujte nadpis, vyhlásenie o vzťahu, počet položiek, ovládacie prvky a karty v jednom regióne. Umiestnite odkaz „Zobraziť všetko" vedľa nadpisu alebo za riadok, keď existuje úplná kolekcia. Odkaz musí viesť na prehľadávanú kanonickú stránku, nie rozširovať neobmedzený klientský pás.

Neumiestňujte posuvný zoznam vedľa iného posuvného zoznamu, automaticky rotujúceho banneru, cenovej tabuľky alebo primárnych nákupných ovládacích prvkov stránky. Susedné horizontálne gestá vytvárajú nejednoznačnosť, zatiaľ čo konkurenčné ceny môžu spôsobiť, že nebude jasné, ktorú ponuku hlavné CTA nakupuje. Neprerušujte procedurálne kroky, varovanie, podmienky nákupu ani povinné právne zverejnenia odporúčaniami. Nikdy neumiestňujte podstatné varianty do posuvného zoznamu, ak zmena jedného z nich mení cenu, dostupnosť alebo konfiguráciu primárneho produktu; varianty patria k ovládacím prvkom vlastného produktu.

Na malých obrazovkách ponechajte jednu celú kartu plus zámernú čiastočnú ukážku ďalšej karty, alebo jednu celú kartu s explicitným označením pozície. Región sa môže posúvať horizontálne, ale samotný dokument nie. Zachovajte viditeľnú cestu za posuvným zoznamom, aby používateľ klávesnice alebo dotyku nebol nikdy uväznený v opakovanom horizontálnom posúvaní.

Anatómia

1. Nadpis sekcie: pomenúva sadu, napríklad „Kompatibilné príslušenstvo" namiesto všeobecného „Mohlo by sa vám tiež páčiť."
2. Vyhlásenie o vzťahu: vysvetľuje, prečo produkty spĺňajú požiadavky a či je poradie redakčné, behaviorálne alebo komerčné.
3. Počet položiek: uvádza konečnú veľkosť pred interakciou, napríklad „6 produktov."
4. Výrez: orezáva len prezentáciu; neodstraňuje karty mimo obrazovky z dokumentu.
5. Karta produktu: zachováva názov, cieľ, rozhodujúci kvalifikátor a aktuálne komerčné údaje jedného produktu ako jednu jednotku.
6. Signál pokračovania: používa čiastočnú ďalšiu kartu, text o pozícii alebo oboje; samotný tieň je príliš ľahko prehliadnuteľný.
7. Tlačidlá predchádzajúci a nasledujúci: používajú tlačidlá pomenované podľa svojho účinku a na koncoch zobrazujú zakázaný stav.
8. Indikátor pozície: oznamuje rozsah, napríklad „Produkty 1–3 z 6," nie rad neoznačených bodiek.
9. Cesta Zobraziť všetko: otvára kanonickú úplnú kolekciu, ak existuje.
10. Ošetrenie zamerania: zostáva viditeľné na každom ovládacom prvku a odkaze karty bez orezania výrezom.

Každá karta sa riadi kontraktom karty produktu . Posuvný zoznam vlastní význam kolekcie a navigáciu, nie nanovo definuje produktové fakty lokálne.

Príklady dizajnu

Redakčný výber: použite pre štyri až osem produktov vybraných podľa uvedených kritérií. Poradie môže predstavovať hodnotenie len vtedy, keď stránka obsahuje dôkazy pre toto hodnotenie; v opačnom prípade ho označte ako „Vybrané možnosti" a vyhnite sa ordinálnym tvrdeniam.

Súvisiace produkty: použite pre produkty v rovnakej kategórii alebo náhradné položky po vysvetlení hlavného produktu. Uveďte zdieľanú vlastnosť, ako je formát alebo cenové pásmo, namiesto implikovania personalizácie.

Kompatibilné príslušenstvo: použite, keď má každá položka overený vzťah k vlastnému produktu. Zopakujte kompatibilný model alebo rozsah v texte karty; blízkosť nie je zárukou kompatibility.

Behaviorálna história: použite pre nedávno zobrazené alebo uložené položky len vtedy, keď návštevník vytvoril tento stav. Označte základ, zachovajte poradie podľa aktuálnosti, poskytnite možnosť odstránenia tam, kde je to vhodné, a nevysielajte personalizovanú históriu do zdieľaných vyrovnávacích pamätí ani štruktúrovaných údajov.

Parametre

Obrázok je podmienečný, pretože textovo orientovaná karta produktu môže byť kompletná aj bez neho. Ak je použitý, jeho súbor musí existovať, rozmery musia rezervovať miesto a alternatívny text musí zodpovedať jeho účelu. Ak jedna karta zobrazuje cenu alebo dostupnosť, každá porovnateľná karta musí zobrazovať ekvivalentné aktuálne pole alebo explicitný stav.

Syntax a príklady kódu

Prenosná Markdown direktíva

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

Mapovanie 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ýšľaná špecifikácia adaptéra, nie registrované volanie shortcode. Používa len pomenované parametre. Kým adaptér neexistuje, implementujte kolekciu ako sémantické HTML alebo neinteraktívny riadok bez vymýšľania nepodporovaného 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 -->

Príklady

Dobrý: kompatibilita je explicitná

Príslušenstvo overené pre Arc 14 — 4 produkty
Stojan na notebook Arc — 69 USD — Na sklade. Vhodný pre notebooky s uhlopriečkou 13–16 palcov; všetky porty Arc 14 zostávajú dosiahnuteľné.
Hub Dock 7 — 89 USD — Na sklade. Podporuje špecifikáciu nabíjania Arc 14 USB-C a priechod 100 W.
Tichá klávesnica a myš — 74 USD — Nízka zásoba. Pripojenie cez Bluetooth; žiadny prijímač neobsadzuje port Arc 14.
Stolové svetlo Mini — 45 USD — Na sklade. Používa samostatný USB-C napájací zdroj; neodoberá energiu z notebooku.

Toto je úspešné, pretože vzťah je pomenovaný a overený, každá karta uvádza odlišné vyhlásenie o kompatibilite, komerčné polia sú paralelné a konečný počet je viditeľný. Všetky štyri položky môžu existovať v zdrojovom poradí, aj keď sa do výrezu zmestia len tri.

Zlý: skryté odporúčania bez základu

Mohlo by sa vám tiež páčiť
BESTSELLER — 69 USD — Kúpiť teraz
TRENDING — 89 USD — Kúpiť teraz
[Tri ďalšie karty sa načítajú po druhom potiahnutí.]

Toto zlyháva, pretože nadpis nevysvetľuje vzťah, „bestseller" a „trending" nemajú definovaný zdroj ani obdobie, mena je implicitná a opakované označenia „Kúpiť teraz" strácajú identitu produktu mimo kontextu. Závažnejšie je, že tri produkty neexistujú až do interakcie, takže používateľ klávesnice, crawler alebo zlyhaný skript dostane inú sadu.

Schéma a prístupnosť

Redakčný posuvný zoznam produktov môže poskytovať ItemList, keď sú jeho členstvo a poradie zmysluplné. Použite jeden ListItem na každú viditeľnú entitu produktu s position, kanonickou URL a odkazom na produkt. Pozície musia zodpovedať DOM a vizuálnemu poradiu. Neoznačujte personalizovanú históriu naposledy zobrazených ako verejný ItemList, pretože sada nie je stabilným obsahom stránky.

Každá karta môže poskytovať údaje Product a Offer len vtedy, keď viditeľná stránka podporuje rovnaké fakty. Názov a cieľ neoprávňujú vymyslenú cenu, hodnotenie, značku, dostupnosť alebo recenziu. Generujte viditeľné polia a štruktúrované údaje z toho istého schváleného zdroja produktov a vynechajte nestále vlastnosti, ktoré nemožno udržať synchronizované. Neexistuje žiadny špeciálny typ schémy pre karusel.

Použite pomenovaný <section> alebo role="region" len vtedy, keď nadpis už neposkytuje dostatočnú orientačnú sémantiku. Reprezentujte kolekciu ako <ul>, <ol> alebo ekvivalentný zoznam; každá karta je jedna položka zoznamu. Uchovávajte karty mimo obrazovky v DOM a v strome prístupnosti. Horizontálne orezanie je prezentácia, zatiaľ čo display:none, aria-hidden="true", inert alebo klientska virtualizácia robí obsah nedostupným.

Používajte natívne tlačidlá pre predchádzajúci a nasledujúci. Pomenujte ich „Predchádzajúce produkty" a „Nasledujúce produkty", presne ich zakážte na koncoch a po pohybe zachovajte zameranie. Oznamujte „Produkty 4–6 z 8" v zdvorilej stavovej oblasti bez presunu zamerania do novo zobrazenej karty. Šípkové klávesy môžu byť vylepšením, ale Tab musí normálne dosiahnuť ovládacie prvky a odkazy. Potiahnutie prstom môže byť podporované, ale nikdy nie ako jediný vstup.

Neaktivujte automatický posun. Rešpektujte preferencie zníženého pohybu a používajte okamžité alebo obmedzené posúvanie. Odkaz karty potrebuje odlišný prístupný názov obsahujúci názov produktu. Zabráňte duplicitným cieľom zamerania, keď obrázok aj názov vedú na rovnakú URL. Pri 200% priblížení sa karty môžu stať výrezom pre jednu kartu, ale text, ovládacie prvky a krúžky zamerania musia zostať úplné a stránka nesmie pretiecť horizontálne.

Pravidlá písania

Písanie by malo robiť členstvo obhájiteľným skôr, než urobí riadok atraktívnym.

• Konkrétny nadpis vysvetľuje cestu. Použite 3–10 slov: „Kompatibilné príslušenstvo pre Arc 14" alebo „Alternatívy pod 100 USD." Nikdy sa nespoliehajte len na „Viac," „Trending" alebo „Mohlo by sa vám tiež páčiť."
• Jedna veta stanovuje výber. Použite 8–30 slov na uvedenie zdieľaných kritérií, publika, kompatibility alebo zdroja histórie. Ak poradie určuje hodnotenie alebo popularita, pomenujte metriku, trh a obdobie.
• Konečné sady zostávajú preskúmateľné. Použite normálne 4–8 produktov a maximálne 12. Dve alebo tri karty by mali tvoriť statický riadok; väčšie sortimenty potrebujú mriežku a kanonickú cestu kolekcie.
• Názvy kariet zachovávajú identitu. Použite oficiálny názov produktu v 1–8 slovách. Nenahrádzajte ho výrazmi „Najlepšia hodnota," „Náš výber" alebo propagačným sloganom.
• Kvalifikátory odpovedajú na jednu rozhodovaciu otázku. Použite 4–18 slov pre vhodnosť, rozlišovaciu schopnosť, kompatibilitu alebo obmedzenie. Vyhnite sa všeobecnej chvále ako „prémiová kvalita."
• Paralelné fakty podporujú skenovanie. Ak jedna karta zobrazuje cenu, menu, dostupnosť, hodnotenie alebo doručenie, porovnateľné karty zobrazujú ekvivalentné polia alebo explicitné stavy nedostupnosti z rovnakého zdroja a trhu.
• Poradie potrebuje zodpovedný základ. Poradie kompatibility môže dať najsilnejšiu zhodu prvú; hodnotenie vyžaduje publikované kritériá; aktuálnosť odráža históriu návštevníka. Platené umiestnenie musí byť zverejnené a nemôže sa vydávať za redakčnú relevantnosť.
• Akcie zachovávajú kontext. Použite „Zobraziť stojan na notebook Arc," nie päť inštancií „Dozvedieť sa viac." CTA karty otvára kanonickú detailnú stránku tohto produktu, pokiaľ akcia explicitne nepridáva známy variant do košíka.
• Nestále tvrdenia potrebujú vlastníctvo. Ceny, skladové zásoby, doručenie, zľavy, hodnotenia a popularita pochádzajú zo schválených systémov a nesú požadované správanie aktuálnosti. Redakčná próza nesmie pevne zakódovať konfliktnú hodnotu.

Nikdy neumiestňujte dlhé recenzie, porovnávacie matice, výber variantov, ovládacie prvky množstva, podmienky nákupu, referencie, odpočítavacie časovače, vyskakovacie okná, videoprehrávače ani povinné varovania do snímky. Nepredvolujte príslušenstvo, nepridávajte produkty do košíka len navigáciou a neskrývajte sponzorované poradie. Posuvný zoznam poskytuje náhľad ciest; cieľová alebo susedná primárna komponenta obsahuje úplné rozhodnutie.

Typy príspevkov, ktoré ho používajú

Pole postTypes v frontmattere riadi túto tabuľku. Zaradenie znamená, že element je podmienečný, keď kompaktná sekundárna sada produktov zlepšuje danú stránku.

Kontrolný zoznam QA

• Sada je sekundárna voči hlavnej úlohe stránky a má jeden explicitný vzťah medzi produktmi.
• Mriežka alebo porovnávacia tabuľka by neslúžila skutočnej úlohe čitateľa lepšie.
• Posuvný zoznam obsahuje normálne 4–8 produktov a nikdy nepresahuje 12.
• Nadpis, základ výberu, počet položiek, ovládacie prvky, stav pozície a cesta Zobraziť všetko sú viditeľné tam, kde je to relevantné.
• Každá karta má stabilný identifikátor, oficiálny názov, kanonický cieľ a rozhodovaco relevantný kvalifikátor.
• Polia ceny, meny, dostupnosti, hodnotenia, doručenia a propagácie sú paralelné a v prípade zobrazenia majú uvedený zdroj.
• Tvrdenia o kompatibilite, hodnotení, popularite, personalizácii a sponzorstve zverejňujú svoj základ.
• Poradie v DOM, vizuálne poradie, oznámená pozícia, poradie klávesnice a všetky ItemList pozície sa zhodujú.
• Každý produkt je vykreslený na strane servera a použiteľný bez JavaScriptu; žiadna neskoršia snímka nezávisí od interakcie alebo klientskej požiadavky.
• Karty mimo obrazovky zostávajú v strome prístupnosti a nie sú skryté, inertné ani reprezentované len obrázkami na pozadí.
• Tlačidlá predchádzajúci a nasledujúci majú odlišné názvy, správne zakázané stavy, viditeľné zameranie a stabilné zameranie po pohybe.
• Potiahnutie prstom a šípkové klávesy sú vylepšenia; štandardné tlačidlá a navigácia klávesom Tab poskytujú úplný prístup.
• Neexistuje žiadny automatický pohyb, krádež zamerania, klávesnicová pasca ani horizontálne pretékanie na úrovni stránky.
• Zmeny pozície sú oznamované ako text a farba, orezanie, tiene alebo bodky nikdy nenesú samotnú informáciu o pokračovaní.
• Každá cesta k obrázku je pred publikovaním platná, rozmery rezervujú miesto a alternatívny text odráža účel karty.
• Pri 200% priblížení a na úzkej obrazovke zostáva jedna karta, jej text, ovládacie prvky a krúžok zamerania úplné.
• Štruktúrované údaje opakujú viditeľné aktuálne fakty a vynechávajú personalizovanú históriu alebo vymyslené komerčné vlastnosti.
• Úplná kolekcia má prehľadávanú URL Zobraziť všetko, keď čitatelia rozumne potrebujú prehliadať nad rámec pásu.
• Prenosné Markdown, Hugo a WordPress reprezentácie zachovávajú rovnaké produkty, poradie, polia a záložné riešenie.

FAQ

Šablóna akadémie vykresľuje päť recenzovaných otázok uložených v [[faq]] frontmatteri.