Che cos'è Sticky Add to Cart?

Sticky Add to Cart è un controllo d'acquisto che resta visibile mentre la pagina prodotto viene fatta scorrere. Invece di sparire verso l'alto, il pulsante rimane ancorato in una barra nella parte superiore o inferiore della finestra, spesso insieme a nome del prodotto, immagine, prezzo e selettore di variante. Il pattern è diffuso soprattutto sulle pagine prodotto mobili, dove descrizioni lunghe, recensioni e moduli di raccomandazione allontanano il pulsante originale dal campo visivo. La barra compare quando il pulsante inline esce dallo schermo e scompare quando rientra.

Definizione

Sticky Add to Cart è un pattern di presentazione e non una funzione di commercio separata: richiama la stessa azione di carrello del pulsante inline e ne condivide lo stato, compresi gli stati disabilitati per varianti non disponibili. Le varianti si distinguono per quantità di informazione trasportata. Una barra minimale mostra solo il pulsante, una barra completa ripete miniatura, titolo, prezzo e selettore di variante, così la scelta avviene senza tornare indietro. I vincoli di design contano: la barra occupa spazio verticale, può entrare in conflitto con l'interfaccia del browser mobile, i banner di consenso e i widget di chat, e non deve coprire campi di modulo. I pulsanti duplicati richiedono identificativi di analytics distinti.

Perché è importante

In una storefront disaccoppiata la barra fissa è una questione di composizione risolta interamente nel livello di presentazione, mentre prezzi, disponibilità e mutazioni del carrello restano dietro l'API di commercio. Renderizzare la barra dallo stesso stato prodotto che alimenta il pulsante inline evita divergenze quando cambia la variante. Trattandosi di un elemento fisso e spesso animato, rientra nel budget di idratazione della pagina e non dovrebbe bloccare il thread principale durante il caricamento iniziale. Governare la visibilità con un intersection observer invece che con un listener di scroll protegge la stabilità del layout e la reattività agli input. Le mutazioni del carrello passano per lo stesso client API.

Casi d'uso

La collocazione tipica è la pagina prodotto su schermi piccoli, dove la barra compare dopo l'uscita della sezione hero dall'area visibile. Su desktop l'equivalente è una colonna fissa che tiene prezzo e controlli d'acquisto accanto ai contenuti lunghi. Le anteprime rapide e i configuratori di bundle adottano lo stesso pattern per mantenere raggiungibile l'azione principale. Nelle pagine di categoria una barra fissa può riassumere un set di filtri o un'azione di confronto. Nel checkout il pattern trasporta l'azione di proseguire. Se lo spazio lo consente, la barra ospita anche informazioni secondarie come stime di consegna o stato della disponibilità.

Vedi anche

Per approfondire: Mobile Commerce · Conversion Rate Optimization (CRO).