Slider-uri de produse: Navigare, Accesibilitate și Extragere

Un slider de produse este un rând derulabil orizontal de carduri de produse, utilizat pentru a expune un set mic și înrudit, fără a transforma acel set în catalogul principal al paginii. Ar trebui să ajute un cumpărător să continue un traseu definit de achiziție—cum ar fi găsirea accesoriilor compatibile sau a alternativelor comparabile—păstrând în același timp identitatea, ordinea și informațiile fiecărui articol atât pentru oameni, cât și pentru mașini.

De ce contează acest element

Un slider gestionează atenția arătând câteva opțiuni în momentul în care devin relevante. Pe o pagină de produs, un cumpărător care a înțeles articolul principal poate aprecia accesorii compatibile. Un grid complet în acel moment ar concura cu achiziția principală; un rând compact păstrează decizia originală, permițând totuși explorarea.

Acest avantaj are un cost psihologic: orice se află dincolo de marginea vizibilă este mai ușor de trecut cu vederea. Primul card primește mai multă expunere decât al șaptelea, iar un card tăiat la capăt poate părea o eroare dacă designul nu semnalează continuarea. Prin urmare, un slider trebuie să conțină un set secundar, ordonat intenționat. Nu trebuie să ascundă o alegere de care cititorul are nevoie pentru a înțelege prețul, siguranța, compatibilitatea sau gama în sine.

Extractibilitatea mecanică este capacitatea motoarelor de căutare, asistenților, feedurilor și instrumentelor de conținut de a izola fiecare produs și de a păstra atașate câmpurile acestuia. O persoană poate glisa pentru a dezvălui cardul șase; un crawler poate să nu execute niciodată acea interacțiune. Când slide-urile ulterioare sosesc doar după JavaScript, folosesc display:none sau există doar ca imagini de fundal, sistemul vede o colecție incompletă. Redarea fiecărui card în ordinea semantică a sursei permite unei mașini să recupereze aceleași nume, URL-uri, poziții, prețuri, monede și disponibilități pe care un cumpărător le poate accesa.

Urmează regulile de redactare a elementelor pentru precedență: clasifică blocul după scop înainte de a-i alege aspectul. Dacă rolul său este de a expune un traseu secundar de produse, acest element se aplică. Dacă rolul său este de a afișa rezultate complete sau de a permite evaluarea comparativă, gridul sau tabelul tipizat corespunzător are precedență.

Când să îl folosești

Folosește un slider de produse atunci când toate aceste condiții sunt îndeplinite:

• Setul este secundar sarcinii principale a paginii.
• Produsele împărtășesc o relație explicită, cum ar fi accesorii compatibile, alternative din aceeași categorie, articole vizualizate recent sau o listă scurtă editorială.
• Patru până la opt carduri concise oferă o lărgime utilă fără a crea un catalog ascuns.
• Ordinea poate fi explicată prin relevanță, compatibilitate, rang editorial, actualitate sau o altă regulă vizibilă.
• Fiecare produs rămâne comprehensibil ca un card compact și are o destinație canonică pentru detalii complete.

Un slider este mai bun decât un grid atunci când spațiul vertical este limitat și cititorii nu au nevoie să vadă toate opțiunile simultan. Poate păstra contextul pe o pagină de detaliu a produsului, poate menține un set scurt de recomandări împreună pe mobil și poate expune un traseu următor fără a plasa opt descrieri complete în fluxul articolului.

Folosește un grid atunci când setul este destinația. Rezultatele căutării, o categorie de produse, o colecție filtrată sau o colecție care trebuie scanată integral necesită numărări vizibile, sortare, filtre, paginare și URL-uri stabile. Folosește un tabel comparativ atunci când cititorii trebuie să judece aceleași specificații între opțiuni. Folosește o galerie de imagini atunci când articolele sunt vederi ale unui singur subiect, nu produse separate care pot fi cumpărate.

Aproape rateuri comune includ un rând de două articole forțat în comenzi de carusel, o categorie de 30 de produse înghesuită într-un rail, un carusel banner hero care conține promoții în loc de produse și un slider folosit pentru a ascunde recomandări slabe sub nivelul ecranului. „Vizualizat recent” este, de asemenea, un aproape rateu condiționat: este util doar atunci când vizitatorul are într-adevăr istoric, titlul spune de ce apar acele articole, iar o stare goală nu fabrică activitate.

Unde să îl plasezi

Amplasarea ar trebui să răspundă la o întrebare pe care cititorul tocmai a dezvoltat-o. Plasează accesoriile compatibile după informațiile de compatibilitate și articolele incluse, alternativele după limitările produsului principal sau sumarul deciziei, iar produsele conexe după listarea principală a categoriei, nu înaintea acesteia. În conținutul editorial, plasează railul după criterii și dovezi, nu înainte ca cititorii să știe de ce produsele se califică.

Păstrează titlul, enunțul relației, numărul de articole, comenzile și cardurile într-o singură regiune. Pune un link „Vezi toate” lângă titlu sau după rând atunci când există o colecție completă. Linkul trebuie să ducă la o pagină canonică accesibilă crawlerelor, nu să extindă un rail client-side nelimitat.

Nu plasa un slider lângă alt slider, un banner cu rotație automată, un tabel de prețuri sau comenzile principale de achiziție ale paginii. Gesturile orizontale adiacente creează ambiguitate, iar prețurile concurente pot face neclar ce ofertă achiziționează CTA-ul principal. Nu întrerupe pași procedurali, un avertisment, termeni de checkout sau dezvăluiri legale obligatorii cu recomandări. Nu plasa niciodată variante esențiale în interiorul unui slider dacă alegerea uneia modifică prețul, disponibilitatea sau configurația produsului principal; variantele aparțin comenzilor produsului deținător.

Pe ecrane mici, permite un card complet plus o privire deliberată asupra cardului următor, sau un card complet cu o etichetă de poziție explicită. Regiunea poate derula orizontal, dar documentul în sine nu trebuie. Păstrează o cale vizibilă dincolo de slider, astfel încât un utilizator de tastatură sau atingere să nu fie niciodată prins în navigare orizontală repetată.

Anatomie

1. Titlul secțiunii: denumește setul, de exemplu „Accesorii compatibile”, în locul generic „Ți-ar putea plăcea și.”
2. Enunțul relației: explică de ce produsele se califică și dacă ordinea este editorială, comportamentală sau comercială.
3. Numărul de articole: indică dimensiunea finită înainte de interacțiune, de exemplu „6 produse.”
4. Viewportul: decupează doar prezentarea; nu elimină cardurile din afara ecranului din document.
5. Cardul de produs: păstrează numele unui produs, destinația, calificatorul decisiv și informațiile comerciale curente ca o singură unitate.
6. Indiciul de continuare: folosește un card parțial următor, text de poziție sau ambele; doar umbra este prea ușor de ratat.
7. Comenzile înainte și înapoi: folosesc butoane denumite după efectul lor și expun starea dezactivată la capete.
8. Indicatorul de poziție: anunță un interval precum „Produse 1–3 din 6,” nu un rând de puncte neetichetate.
9. Traseul Vezi toate: deschide colecția completă canonică atunci când există una.
10. Tratamentul de focus: rămâne vizibil pe fiecare comandă și link de card, fără a fi tăiat de viewport.

Fiecare card urmează contractul cardului de produs . Sliderul deține semnificația colecției și navigarea, fără a redefini local informațiile produsului.

Exemple de design

Listă scurtă editorială: folosește pentru patru până la opt produse selectate după criterii declarate. Ordinea poate reprezenta rang doar atunci când pagina conține dovezile pentru acel rang; în caz contrar, etichetează-l ca „Opțiuni selectate” și evită afirmații ordinale.

Produse conexe: folosește pentru articole din aceeași categorie sau substitute după ce produsul principal a fost explicat. Enunță proprietatea partajată, cum ar fi factorul de formă sau banda de preț, fără a implica personalizare.

Accesorii compatibile: folosește atunci când fiecare articol are o relație verificată cu produsul deținător. Repetă modelul sau gama compatibilă în textul cardului; proximitatea nu este o garanție de compatibilitate.

Istoric comportamental: folosește pentru articole vizualizate recent sau salvate doar atunci când vizitatorul a creat acea stare. Etichetează baza, păstrează ordinea actualității, oferă eliminare acolo unde este cazul și nu emite istoric personalizat în cache-uri partajate sau date structurate.

Parametri

O imagine este condiționată deoarece un card de produs bazat pe text poate fi complet fără una. Dacă este folosită, fișierul său trebuie să existe, dimensiunile trebuie să rezerve spațiu, iar textul alternativ trebuie să corespundă scopului său. Dacă un card afișează preț sau disponibilitate, fiecare pereche trebuie să afișeze un câmp curent echivalent sau o stare explicită.

Sintaxă și exemple de cod

Directivă Markdown portabilă

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

Mapare shortcode Hugo

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

Aceasta este specificația adaptorului intenționată, nu o invocare de shortcode înregistrată. Folosește doar parametri denumiți. Până când adaptorul există, implementează colecția ca HTML semantic sau un rând neinteractiv, fără a inventa un shortcode nesuportat.

Bloc WordPress

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

Exemple

Bun: compatibilitatea este explicită

Accesorii verificate pentru Arc 14 — 4 produse
Arc laptop stand — USD 69 — În stoc. Se potrivește laptopurilor de 13–16 inci; toate porturile Arc 14 rămân accesibile.
Dock 7 hub — USD 89 — În stoc. Suportă specificația de încărcare USB-C Arc 14 și pas-through de 100 W.
Quiet key set — USD 74 — Stoc limitat. Se conectează prin Bluetooth; niciun receptor nu ocupă un port Arc 14.
Task light Mini — USD 45 — În stoc. Folosește o sursă de alimentare USB-C separată; nu consumă energie de la laptop.

Acest exemplu reușește deoarece relația este denumită și verificată, fiecare card face o afirmație distinctă de compatibilitate, câmpurile comerciale sunt paralele, iar numărul finit este vizibil. Toate cele patru articole pot exista în ordinea sursei chiar și atunci când doar trei încap în viewport.

Rău: recomandări ascunse fără bază

Ți-ar putea plăcea și
CEL MAI VÂNDUT — $69 — Cumpără acum
ÎN TENDINȚE — $89 — Cumpără acum
[Încă trei carduri se încarcă după a doua glisare.]

Acest exemplu eșuează deoarece titlul nu explică relația, „cel mai vândut” și „în tendințe” nu au o sursă sau o perioadă definite, moneda este implicită, iar etichetele repetate „Cumpără acum” pierd identitatea produsului în afara contextului. Mai grav, trei produse nu există până la interacțiune, astfel încât un utilizator de tastatură, un crawler sau un script eșuat primește un set diferit.

Marcare schematică și accesibilitate

Un slider editorial de produse poate alimenta ItemList atunci când apartenența și ordinea sunt semnificative. Folosește un ListItem per entitate de produs vizibilă, cu position, URL canonic și referința produsului. Pozițiile trebuie să se potrivească cu ordinea DOM și vizuală. Nu marca istoricul personalizat de vizualizări recente ca un ItemList public, deoarece setul nu este conținut stabil al paginii.

Fiecare card poate alimenta date Product și Offer doar atunci când pagina vizibilă suportă aceleași informații. Un nume și o destinație nu justifică preț, rating, brand, disponibilitate sau date de recenzie inventate. Generează câmpuri vizibile și date structurate din aceeași sursă de produs aprobată și omite proprietățile volatile care nu pot rămâne sincronizate. Nu există un tip special de schemă pentru carusel.

Folosește un <section> denumit sau role="region" doar atunci când titlul nu oferă deja landmark semantic suficient. Reprezintă colecția ca <ul>, <ol> sau listă echivalentă; fiecare card este un element de listă. Păstrează cardurile din afara ecranului în DOM și în arborele de accesibilitate. Decuparea orizontală este prezentare, în timp ce display:none, aria-hidden="true", inert sau virtualizarea doar client-side face conținutul indisponibil.

Folosește butoane native pentru înainte și înapoi. Denumește-le „Produse anterioare” și „Produse următoare,” dezactivează-le corect la capete și păstrează focusul după mișcare. Anunță „Produse 4–6 din 8” într-o regiune de stare politicoasă fără a muta focusul în cardul nou expus. Tastele săgeată pot fi o îmbunătățire, dar Tab trebuie să ajungă la comenzi și linkuri în mod normal. Glisarea poate fi suportată, dar niciodată ca singurul mod de introducere.

Nu avansa automat. Respectă preferințele de mișcare redusă și folosește derulare imediată sau restrânsă. Un link de card are nevoie de un nume accesibil distinct care să conțină numele produsului. Preveniți țintele de focus duplicate atunci când atât imaginea, cât și titlul duc la același URL. La zoom de 200%, cardurile pot deveni un viewport cu un singur card, dar textul, comenzile și inelele de focus trebuie să rămână complete, iar pagina nu trebuie să depășească orizontal.

Reguli de redactare

Redactarea ar trebui să facă apartenența apărabilă înainte de a face rândul atractiv.

• Un titlu specific explică traseul. Folosește 3–10 cuvinte: „Accesorii compatibile Arc 14” sau „Alternative sub USD 100.” Nu te baza niciodată doar pe „Mai multe,” „În tendințe” sau „Ți-ar putea plăcea și.”
• O propoziție stabilește selecția. Folosește 8–30 de cuvinte pentru a enunța criteriile partajate, publicul, compatibilitatea sau sursa istoricului. Dacă rangul sau popularitatea determină ordinea, numește metrica, piața și perioada.
• Seturile finite rămân inspectabile. Folosește 4–8 produse în mod normal și nu mai mult de 12. Două sau trei carduri ar trebui să formeze un rând static; sortimentele mai mari au nevoie de un grid și un traseu de colecție canonic.
• Numele cardurilor păstrează identitatea. Folosește numele oficial al produsului în 1–8 cuvinte. Nu îl înlocui cu „Cea mai bună valoare,” „Alegerea noastră” sau un slogan de campanie.
• Calificatorii răspund la o singură întrebare decizională. Folosește 4–18 cuvinte pentru potrivire, capacitate distinctivă, compatibilitate sau limitare. Evită laudele generice precum „calitate premium.”
• Informațiile paralele sprijină scanarea. Dacă un card arată preț, monedă, disponibilitate, rating sau livrare, perechile afișează câmpuri echivalente sau stări indisponibile explicite din aceeași sursă și piață.
• Ordinea are nevoie de o bază responsabilă. Ordinea de compatibilitate poate pune cea mai puternică potrivire prima; rangul necesită criterii publicate; actualitatea reflectă istoricul vizitatorului. Plasamentul plătit trebuie dezvăluit și nu poate fi deghizat ca relevanță editorială.
• Acțiunile păstrează contextul. Folosește „Vezi Arc laptop stand,” nu cinci instanțe de „Află mai multe.” Un CTA al cardului deschide pagina canonică de detaliu a acelui produs, cu excepția cazului în care acțiunea adaugă explicit o variantă cunoscută într-un coș.
• Afirmațiile volatile au nevoie de proprietar. Prețurile, stocul, livrarea, discounturile, ratingurile și popularitatea provin din sisteme aprobate și poartă comportamentul de prospețime necesar. Proza editorială nu trebuie să codifice dur o valoare conflictuală.

Nu plasa niciodată recenzii lungi, matrice de comparație, selectoare de variante, comenzi de cantitate, termeni de checkout, testimoniale, cronometre cu numărătoare inversă, pop-upuri, playere video sau avertismente obligatorii în interiorul unui slide. Nu preselecta suplimente, nu adăuga produse în coș doar prin navigare și nu ascunde sponsorizarea comenzii. Un slider previzualizează trasee; destinația sau componenta principală adiacentă conține decizia completă.

Tipuri de postări care îl folosesc

Câmpul postTypes din frontmatter alimentează acest tabel. Includerea înseamnă că elementul este condiționat atunci când un set secundar compact de produse îmbunătățește pagina specificată.

Checklist QA

• Setul este secundar sarcinii principale a paginii și are o relație explicită între produse.
• Un grid sau un tabel comparativ nu ar servi mai bine sarcinii reale a cititorului.
• Sliderul conține 4–8 produse în mod normal și nu depășește niciodată 12.
• Titlul, baza selecției, numărul de articole, comenzile, starea poziției și traseul Vezi toate sunt vizibile acolo unde se aplică.
• Fiecare card are un identificator stabil, nume oficial, destinație canonică și calificator relevant decizional.
• Câmpurile de preț, monedă, disponibilitate, rating, livrare și promoție sunt paralele și provin din sursă atunci când sunt afișate.
• Afirmațiile de compatibilitate, clasare, popularitate, personalizare și sponsorizare dezvăluie baza lor.
• Ordinea DOM, ordinea vizuală, poziția anunțată, ordinea tastaturii și orice poziții ItemList se potrivesc.
• Fiecare produs este redat pe server și utilizabil fără JavaScript; niciun slide ulterior nu depinde de interacțiune sau de o cerere client.
• Cardurile din afara ecranului rămân în arborele de accesibilitate și nu sunt ascunse, inerte sau reprezentate doar prin imagini de fundal.
• Butoanele înainte și înapoi au nume distincte, stări dezactivate corecte, focus vizibil și focus stabil după mișcare.
• Glisarea tactilă și tastele săgeată sunt îmbunătățiri; butoanele standard și navigarea Tab oferă acces complet.
• Nu există mișcare automată, furt de focus, capcană de tastatură sau depășire orizontală la nivel de pagină.
• Schimbările de poziție sunt anunțate ca text, iar culoarea, decuparea, umbrele sau punctele nu transmit niciodată continuarea singure.
• Fiecare cale de imagine se rezolvă înainte de publicare, dimensiunile rezervă spațiu, iar textul alternativ reflectă scopul cardului.
• La zoom de 200% și pe un ecran îngust, un card, textul său, comenzile sale și inelul său de focus rămân complete.
• Datele structurate repetă informații vizibile, curente și omit istoricul personalizat sau proprietățile comerciale inventate.
• Colecția completă are un URL Vezi toate accesibil crawlerelor atunci când cititorii au în mod rezonabil nevoie să răsfoiască dincolo de rail.
• Reprezentările Markdown portabil, Hugo și WordPress păstrează aceleași produse, ordine, câmpuri și soluții de rezervă.

FAQ

Șablonul academia redă cele cinci întrebări revizuite stocate în frontmatter-ul [[faq]].