Slider di Prodotti: Navigazione, Accessibilità ed Estrazione

Uno slider di prodotti è una riga scorrevole orizzontalmente di schede prodotto utilizzata per esporre un insieme piccolo e correlato senza trasformarlo nel catalogo principale della pagina. Dovrebbe aiutare un acquirente a proseguire un percorso d’acquisto definito, come trovare accessori compatibili o alternative comparabili, preservando al contempo l’identità, l’ordine e le informazioni di ogni articolo per persone e macchine.

Perché questo elemento è importante

Uno slider gestisce l’attenzione mostrando poche scelte nel momento in cui diventano rilevanti. Su una pagina prodotto, un acquirente che ha compreso l’articolo principale potrebbe apprezzare accessori compatibili. Una griglia completa in quel punto entrerebbe in competizione con l’acquisto primario; una riga compatta preserva la decisione originale consentendo al contempo l’esplorazione.

Questo vantaggio comporta un costo psicologico: tutto ciò che va oltre il bordo visibile è più facile da trascurare. La prima scheda riceve più esposizione della settima, e una scheda finale troncata può sembrare un errore a meno che il design non segnali la continuazione. Uno slider deve quindi contenere un insieme secondario, ordinato intenzionalmente. Non deve nascondere una scelta di cui il lettore ha bisogno per comprendere prezzo, sicurezza, compatibilità o l’intera gamma.

L’estraibilità meccanica è la capacità dei motori di ricerca, assistenti, feed e strumenti di contenuto di isolare ogni prodotto e mantenere i suoi campi associati. Una persona può scorrere per rivelare la scheda sei; un crawler potrebbe non eseguire mai quell’interazione. Quando le slide successive arrivano solo dopo JavaScript, usano display:none o esistono semplicemente come immagini di sfondo, il sistema vede una collezione incompleta. Renderizzare ogni scheda nell’ordine semantico di origine consente a una macchina di recuperare gli stessi nomi, URL, posizioni, prezzi, valute e disponibilità che un acquirente può raggiungere.

Segui le regole di scrittura degli elementi per la precedenza: classifica il blocco in base allo scopo prima di sceglierne l’aspetto. Se il suo compito è esporre un percorso secondario di prodotti, si applica questo elemento. Se il suo compito è mostrare risultati completi o consentire una valutazione affiancata, hanno precedenza la griglia o la tabella tipizzata appropriate.

Quando usarlo

Usa uno slider di prodotti quando tutte queste condizioni sono soddisfatte:

• L’insieme è secondario rispetto al compito principale della pagina.
• I prodotti condividono una relazione esplicita, come accessori compatibili, alternative della stessa categoria, articoli visualizzati di recente o una shortlist editoriale.
• Da quattro a otto schede concise offrono una buona ampiezza senza creare un catalogo nascosto.
• L’ordine può essere spiegato attraverso pertinenza, compatibilità, classifica editoriale, recency o un’altra regola visibile.
• Ogni prodotto rimane comprensibile come scheda compatta e ha una destinazione canonica per i dettagli completi.

Uno slider è meglio di una griglia quando lo spazio verticale è limitato e i lettori non hanno bisogno di vedere ogni scelta contemporaneamente. Può preservare il contesto su una pagina di dettaglio prodotto, mantenere insieme una breve serie di raccomandazioni su mobile ed esporre un percorso successivo senza inserire otto descrizioni complete nel flusso dell’articolo.

Usa una griglia quando l’insieme è la destinazione. Risultati di ricerca, una categoria di prodotti, una collezione filtrata o una raccolta che deve essere esaminata per intero necessitano di conteggi visibili, ordinamento, filtri, paginazione e URL stabili. Usa una tabella comparativa quando i lettori devono giudicare le stesse specifiche tra più opzioni. Usa una galleria immagini quando gli elementi sono viste di un unico soggetto anziché prodotti acquistabili separati.

Gli errori comuni includono una riga di due articoli forzata in controlli da carosello, una categoria di 30 prodotti compressa in un rail, un carosello banner hero contenente promozioni invece di prodotti e uno slider usato per nascondere raccomandazioni deboli sotto la piega. “Visualizzati di recente” è anche un errore condizionale: è utile solo quando il visitatore ha effettivamente una cronologia, l’intestazione dice perché quegli articoli appaiono e uno stato vuoto non inventa attività.

Dove posizionarlo

Il posizionamento dovrebbe rispondere a una domanda che il lettore ha appena sviluppato. Metti gli accessori compatibili dopo le informazioni sulla compatibilità e sugli articoli inclusi, le alternative dopo i limiti del prodotto principale o il riepilogo della decisione, e i prodotti correlati dopo l’elenco principale della categoria anziché prima. Nei contenuti editoriali, posiziona il rail dopo i criteri e le prove, non prima che i lettori sappiano perché i prodotti sono qualificati.

Mantieni l’intestazione, la dichiarazione di relazione, il conteggio degli articoli, i controlli e le schede in un’unica regione. Inserisci un link “Vedi tutti” accanto all’intestazione o dopo la riga quando esiste una collezione completa. Il link deve condurre a una pagina canonica indicizzabile, non espandere un rail lato client illimitato.

Non posizionare uno slider accanto a un altro slider, un banner a rotazione automatica, una tabella dei prezzi o i controlli principali di acquisto della pagina. Gesti orizzontali adiacenti creano ambiguità, mentre prezzi concorrenti possono rendere poco chiaro quale offerta acquisti il CTA principale. Non interrompere passaggi procedurali, un avviso, i termini di pagamento o le informative legali obbligatorie con raccomandazioni. Non inserire mai varianti essenziali all’interno di uno slider se la scelta di una modifica il prezzo, la disponibilità o la configurazione del prodotto principale; le varianti appartengono ai controlli del prodotto proprietario.

Su schermi piccoli, lascia spazio a una scheda completa più un’anticipazione deliberata della scheda successiva, oppure una scheda completa con un’etichetta di posizione esplicita. La regione può scorrere orizzontalmente, ma il documento stesso no. Preserva un percorso visibile oltre lo slider in modo che un utente con tastiera o touch non rimanga mai intrappolato in una navigazione orizzontale ripetuta.

Anatomia

1. Intestazione di sezione: nomina l’insieme, ad esempio “Accessori compatibili”, invece del generico “Potrebbe anche interessarti”.
2. Dichiarazione di relazione: spiega perché i prodotti sono qualificati e se l’ordine è editoriale, comportamentale o commerciale.
3. Conteggio articoli: indica la dimensione finita prima dell’interazione, ad esempio “6 prodotti”.
4. Viewport: ritaglia solo la presentazione; non rimuove le schede fuori schermo dal documento.
5. Scheda prodotto: preserva nome, destinazione, qualificatore decisivo e informazioni commerciali aggiornate di un prodotto come unità singola.
6. Segnale di continuazione: usa una scheda successiva parziale, un testo di posizione o entrambi; l’ombra da sola è troppo facile da trascurare.
7. Controlli precedente e successivo: usa pulsanti denominati per il loro effetto e mostra lo stato disabilitato alle estremità.
8. Indicatore di posizione: annuncia un intervallo come “Prodotti 1–3 di 6”, non una riga di punti non etichettati.
9. Percorso vedi tutti: apre la collezione completa canonica quando esiste.
10. Trattamento del focus: rimane visibile su ogni controllo e link della scheda senza essere ritagliato dal viewport.

Ogni scheda segue il contratto della scheda prodotto . Lo slider possiede il significato della collezione e la navigazione anziché ridefinire localmente i dati del prodotto.

Esempi di design

Shortlist editoriale: da usare per quattro a otto prodotti selezionati secondo criteri dichiarati. L’ordine può rappresentare una classifica solo quando la pagina contiene le prove per quella classifica; altrimenti etichettalo come “Opzioni selezionate” ed evita affermazioni ordinali.

Prodotti correlati: da usare per articoli della stessa categoria o sostitutivi dopo che il prodotto principale è stato spiegato. Indica la proprietà condivisa, come fattore di forma o fascia di prezzo, senza implicare personalizzazione.

Accessori compatibili: da usare quando ogni articolo ha una relazione verificata con il prodotto principale. Ripeti il modello o la gamma compatibile nel testo della scheda; la prossimità non è una garanzia di compatibilità.

Cronologia comportamentale: da usare per articoli visualizzati di recente o salvati solo quando il visitatore ha creato quello stato. Etichetta la base, preserva l’ordine cronologico, fornisci la rimozione dove appropriato e non inviare cronologia personalizzata in cache condivise o dati strutturati.

Parametri

Un’immagine è condizionale perché una scheda prodotto incentrata sul testo può essere completa senza una. Se utilizzata, il suo file deve esistere, le dimensioni devono riservare spazio e il testo alternativo deve corrispondere al suo scopo. Se una scheda mostra prezzo o disponibilità, ogni scheda pari deve mostrare un campo corrente equivalente o uno stato esplicito.

Sintassi ed esempi di codice

Direttiva Markdown portabile

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

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

Questa è la specifica dell’adattatore prevista, non un’invocazione di shortcode registrata. Utilizza solo parametri nominativi. Finché l’adattatore non esiste, implementa la collezione come HTML semantico o una riga non interattiva senza inventare uno shortcode non supportato.

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

Esempi

Buono: la compatibilità è esplicita

Accessori verificati per Arc 14 — 4 prodotti
Supporto per laptop Arc — USD 69 — Disponibile. Adatto a laptop da 13–16 pollici; tutte le porte Arc 14 rimangono raggiungibili.
Hub Dock 7 — USD 89 — Disponibile. Supporta la specifica di ricarica USB-C Arc 14 e la ricarica pass-through da 100 W.
Set tastiera silenziosa — USD 74 — Scorte limitate. Si connette via Bluetooth; nessun ricevitore occupa una porta Arc 14.
Lampada da scrivania Mini — USD 45 — Disponibile. Utilizza un alimentatore USB-C separato; non assorbe energia dal laptop.

Questo funziona perché la relazione è nominata e verificata, ogni scheda fa una dichiarazione di compatibilità distinta, i campi commerciali sono paralleli e il conteggio finito è visibile. Tutti e quattro gli articoli possono esistere nell’ordine di origine anche quando solo tre entrano nel viewport.

Cattivo: raccomandazioni nascoste senza una base

Potrebbe anche interessarti
BESTSELLER — $69 — Acquista ora
TRENDING — $89 — Acquista ora
[Tre schede aggiuntive vengono caricate dopo il secondo scorrimento.]

Questo fallisce perché l’intestazione non spiega la relazione, “bestseller” e “trending” non hanno una fonte o un periodo definiti, la valuta è implicita e le etichette “Acquista ora” ripetute perdono l’identità del prodotto fuori contesto. Più gravemente, tre prodotti non esistono fino all’interazione, quindi un utente con tastiera, un crawler o uno script fallito riceve un insieme diverso.

Markup schema e accessibilità

Uno slider di prodotti editoriale può alimentare ItemList quando la sua appartenenza e il suo ordine sono significativi. Usa un ListItem per ogni entità prodotto visibile, con position, URL canonico e riferimento al prodotto. Le posizioni devono corrispondere all’ordine DOM e visivo. Non marcare la cronologia di visualizzazioni personalizzate come un ItemList pubblico, perché l’insieme non è un contenuto stabile della pagina.

Ogni scheda può alimentare dati Product e Offer solo quando la pagina visibile supporta gli stessi fatti. Un nome e una destinazione non giustificano dati inventati di prezzo, valutazione, marca, disponibilità o recensione. Genera campi visibili e dati strutturati dalla stessa fonte prodotto approvata e ometti le proprietà volatili che non possono rimanere sincronizzate. Non esiste un tipo di schema speciale per carosello.

Usa un <section> nominato o role="region" solo quando l’intestazione non fornisce già sufficienti elementi semantici di riferimento. Rappresenta la collezione come un <ul>, <ol> o elenco equivalente; ogni scheda è un elemento dell’elenco. Mantieni le schede fuori schermo nel DOM e nell’albero di accessibilità. Il ritaglio orizzontale è presentazione, mentre display:none, aria-hidden="true", inert o la virtualizzazione solo client rendono il contenuto non disponibile.

Usa pulsanti nativi per precedente e successivo. Chiamali “Prodotti precedenti” e “Prodotti successivi”, disabilitali accuratamente alle estremità e mantieni il focus dopo lo spostamento. Annuncia “Prodotti 4–6 di 8” in una regione di stato educata senza spostare il focus sulla scheda appena esposta. I tasti freccia possono essere un miglioramento, ma Tab deve raggiungere normalmente controlli e link. Lo scorrimento può essere supportato, ma mai come unico input.

Non avanzare automaticamente. Rispetta le preferenze di movimento ridotto e usa scorrimento immediato o controllato. Un link di scheda necessita di un nome accessibile distinto contenente il nome del prodotto. Previeni bersagli di focus duplicati quando sia immagine che titolo portano allo stesso URL. Con zoom al 200%, le schede possono diventare un viewport a scheda singola, ma testo, controlli e anelli di focus devono rimanere completi e la pagina non deve traboccare orizzontalmente.

Regole di scrittura

La scrittura dovrebbe rendere l’appartenenza difendibile prima di rendere la riga attraente.

• Un’intestazione specifica spiega il percorso. Usa 3–10 parole: “Accessori compatibili Arc 14” o “Alternative sotto USD 100.” Non affidarti mai solo a “Altro,” “Tendenze” o “Potrebbe anche interessarti.”
• Una frase stabilisce la selezione. Usa 8–30 parole per indicare criteri condivisi, pubblico, compatibilità o fonte della cronologia. Se classifica o popolarità determinano l’ordine, nomina la metrica, il mercato e il periodo.
• Gli insiemi finiti rimangono ispezionabili. Usa normalmente 4–8 prodotti e non più di 12. Due o tre schede dovrebbero formare una riga statica; assortimenti più grandi necessitano di una griglia e un percorso di collezione canonico.
• I nomi delle schede preservano l’identità. Usa il nome ufficiale del prodotto in 1–8 parole. Non sostituirlo con “Miglior valore,” “La nostra scelta” o uno slogan pubblicitario.
• I qualificatori rispondono a una domanda decisionale. Usa 4–18 parole per vestibilità, capacità distintiva, compatibilità o limitazione. Evita elogi generici come “qualità premium.”
• Fatti paralleli supportano la scansione. Se una scheda mostra prezzo, valuta, disponibilità, valutazione o consegna, le schede pari mostrano campi equivalenti o stati di indisponibilità espliciti dalla stessa fonte e mercato.
• L’ordine necessita di una base responsabile. L’ordine di compatibilità può mettere al primo posto la corrispondenza più forte; la classifica richiede criteri pubblicati; la recency riflette la cronologia del visitatore. Il posizionamento a pagamento deve essere divulgato e non può mascherarsi da pertinenza editoriale.
• Le azioni mantengono il contesto. Usa “Visualizza supporto per laptop Arc,” non cinque istanze di “Scopri di più.” Un CTA della scheda apre la pagina di dettaglio canonica di quel prodotto a meno che l’azione non aggiunga esplicitamente una variante nota a un carrello.
• Le affermazioni volatili necessitano di proprietà. Prezzi, stock, consegna, sconti, valutazioni e popolarità provengono da sistemi approvati e portano il comportamento di aggiornamento richiesto. La prosa editoriale non deve codificare un valore in conflitto.

Non inserire mai recensioni lunghe, matrici di confronto, selettori di varianti, controlli quantità, termini di pagamento, testimonianze, timer countdown, pop-up, lettori video o avvisi obbligatori all’interno di una slide. Non preselezionare componenti aggiuntivi, non aggiungere prodotti al carrello semplicemente navigando e non nascondere l’ordinamento sponsorizzato. Uno slider anticipa i percorsi; la destinazione o il componente primario adiacente contiene la decisione completa.

Tipi di post che lo utilizzano

Il campo postTypes nel frontmatter alimenta questa tabella. L’inclusione significa che l’elemento è condizionale quando un insieme secondario compatto di prodotti migliora la pagina specificata.

Checklist QA

• L’insieme è secondario rispetto al compito principale della pagina e ha una relazione esplicita tra i prodotti.
• Una griglia o tabella comparativa non servirebbe meglio il compito effettivo del lettore.
• Lo slider contiene normalmente 4–8 prodotti e non supera mai 12.
• L’intestazione, la base di selezione, il conteggio articoli, i controlli, lo stato di posizione e il percorso Vedi tutti sono visibili dove applicabile.
• Ogni scheda ha un identificativo stabile, nome ufficiale, destinazione canonica e qualificatore rilevante per la decisione.
• I campi prezzo, valuta, disponibilità, valutazione, consegna e promozione sono paralleli e fontati quando mostrati.
• Le dichiarazioni di compatibilità, classifica, popolarità, personalizzazione e sponsorizzazione divulgano la loro base.
• Ordine DOM, ordine visivo, posizione annunciata, ordine da tastiera e posizioni ItemList corrispondono.
• Ogni prodotto è renderizzato lato server e utilizzabile senza JavaScript; nessuna slide successiva dipende da interazione o richiesta client.
• Le schede fuori schermo rimangono nell’albero di accessibilità e non sono nascoste, inerti o rappresentate solo da immagini di sfondo.
• I pulsanti precedente e successivo hanno nomi distinti, stati disabilitati corretti, focus visibile e focus stabile dopo lo spostamento.
• Lo scorrimento touch e i tasti freccia sono migliorie; pulsanti standard e navigazione Tab forniscono accesso completo.
• Non c’è movimento automatico, furto di focus, trappola da tastiera o overflow orizzontale a livello di pagina.
• I cambiamenti di posizione sono annunciati come testo, e colore, ritaglio, ombre o punti non veicolano mai la continuazione da soli.
• Ogni percorso immagine è risolto prima della pubblicazione, le dimensioni riservano spazio e il testo alternativo riflette lo scopo della scheda.
• Con zoom al 200% e su schermo stretto, una scheda, il suo testo, i suoi controlli e il suo anello di focus rimangono completi.
• I dati strutturati ripetono fatti visibili e aggiornati e omettono cronologia personalizzata o proprietà commerciali inventate.
• La collezione completa ha un URL Vedi tutti indicizzabile quando i lettori hanno ragionevolmente bisogno di navigare oltre il rail.
• Le rappresentazioni Markdown portabile, Hugo e WordPress preservano gli stessi prodotti, ordine, campi e fallback.

FAQ

Il modello academy renderizza le cinque domande esaminate memorizzate in [[faq]] nel frontmatter.