Tutto quello che vorresti sapere prima di installare.
Uno sguardo dettagliato su come funziona Pulsante Aggiungi al carrello sticky per PrestaShop, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.
Perché un pulsante di acquisto sticky
Su mobile, oltre il 60 per cento dei visitatori scorre oltre il pulsante Aggiungi al carrello senza cliccare. Su desktop, è quasi altrettanto per le schede prodotto lunghe con descrizione dettagliata, recensioni clienti e prodotti associati. Una barra sticky che segue il visitatore riprende questa intenzione di acquisto esattamente nel momento in cui svanisce. I grandi marketplace, Amazon in testa, la usano come funzionalità predefinita da anni.
Una UX adatta a ogni formato di schermo
Su mobile (meno di 992 pixel di larghezza), una barra compatta si posiziona in basso allo schermo, rispettando le safe-area degli iPhone con tacca. Su desktop, due modalità a scelta dal back-office: sidebar flottante a destra che scivola in posizione con un'animazione discreta, o barra in basso centrata in stile mobile. Decidi in base al tuo design e al tipo di scheda prodotto.
Mini-selettore di varianti intelligente
Il selettore compatto mostra tutte le combinazioni disponibili con il loro prezzo e disponibilità. Quando il cliente cambia variante nella barra sticky, il modulo sincronizza automaticamente l'interfaccia varianti della pagina principale (pulsanti radio o menu a tendina), il che attiva il motore di combinazioni nativo di PrestaShop: prezzo ricalcolato, scorta verificata, immagine aggiornata, esattamente come se il cliente cliccasse nella scheda stessa.
Integrazione pulita, zero sorprese
Il modulo utilizza gli hook ufficiali di PrestaShop e resta fuori dall'albero del DOM principale del tuo tema. Il click su Aggiungi al carrello nella barra sticky attiva programmaticamente il pulsante originale, il che preserva la modale di conferma, gli eventi updateCart, le notifiche di successo e qualsiasi personalizzazione già in atto nel tuo tema o negli altri moduli.
Performance curate
Niente framework, nessuna dipendenza esterna. Il CSS pesa circa 7 KB e il JavaScript circa 12 KB, gzip incluso. Gli asset vengono caricati solo sulle pagine prodotto, mai sulla home, sul catalogo o sul checkout. La visibilità della barra è gestita da IntersectionObserver nativo, molto più efficiente di un listener di scroll continuo.
Personalizzazione dal back-office
Tutto si configura dall'interfaccia PrestaShop, senza toccare il codice: attivazione globale, visualizzazione per device (mobile e/o desktop), modalità desktop (sidebar flottante o barra in basso), offset superiore per i temi con header sticky, visualizzazione dell'immagine miniatura, del selettore di varianti e del selettore di quantità, e palette di colori completa (sfondo, pulsante, testo del pulsante, colore del testo, colore del prezzo).
Accessibilità e best practice
La barra sticky rispetta le raccomandazioni ARIA: ruolo region, etichette esplicite per ogni controllo, annunci aria-live per i cambi di prezzo, focus visibile su tutti i pulsanti, supporto completo della tastiera. La media query prefers-reduced-motion disattiva le transizioni per gli utenti sensibili alle animazioni. Tutti i testi sono traducibili.
Ancora non ci sono recensioni.