Sticky Add to Cart per PrestaShop — Guida completa

Panoramica

DataFirefly Sticky Add to Cart mostra una barra «Aggiungi al carrello» persistente sulle pagine prodotto del vostro negozio PrestaShop 8 o 9. Su mobile, una barra compatta si aggancia in fondo allo schermo. Su desktop, una sidebar flottante scorre da destra (oppure, a scelta, una barra inferiore identica a quella mobile). La barra include un selettore compatto di variante, un selettore di quantità e il prezzo aggiornato in tempo reale.

L’aggiunta al carrello avviene tramite una richiesta AJAX diretta al controller del carrello di PrestaShop: il modulo non manipola mai il form né il pulsante nativo del vostro tema, garantendo una convivenza senza conflitti.

Installazione

1. Nel back office di PrestaShop, aprite Moduli > Gestore moduli.
2. Cliccate su Carica un modulo e selezionate il file dfstickyaddtocart.zip.
3. Una volta installato il modulo, cliccate su Configura.
4. Svuotate la cache di PrestaShop: Parametri avanzati > Prestazioni > Svuota cache.

Configurazione

Tutte le impostazioni si trovano in Moduli > Gestore moduli > DataFirefly Sticky Add to Cart > Configura.

Visualizzazione

• Attiva il modulo — interruttore globale.
• Mostra su mobile — attiva la barra inferiore su schermi sotto i 992 px.
• Mostra su desktop — attiva la visualizzazione su schermi da 992 px in su.
• Layout desktop — due modalità: Sidebar flottante (destra), una card di 320 px che scorre dal bordo destro, oppure Barra inferiore, identica alla resa mobile ma centrata a 1280 px.
• Offset superiore desktop (px) — distanza tra la parte superiore della finestra e la sidebar flottante. Aumentate il valore se il vostro tema ha un header sticky (90 px di default).

Contenuto della barra

• Mostra immagine prodotto — miniatura dell’immagine di copertina.
• Mostra selettore di variante — menu a tendina compatto delle combinazioni (nascosto automaticamente se il prodotto non ne ha).
• Mostra selettore di quantità — pulsanti meno / più (visibile su desktop; su mobile la quantità resta a 1 per preservare la compattezza).
• Nascondi quando il pulsante principale è visibile — la barra appare solo quando il pulsante «Aggiungi al carrello» originale esce dal viewport (consigliato). Disattivatelo per una barra sempre visibile.

Colori

• Colore di sfondo — sfondo della barra (bianco di default).
• Colore del pulsante — pulsante di aggiunta al carrello (teal #2fb5d2 di default).
• Colore del testo del pulsante — etichetta del pulsante.
• Colore del testo — nome del prodotto ed etichette.
• Colore del prezzo — opzionale; se vuoto, viene usato il colore del pulsante.

Funzionamento

Rilevamento della visibilità

Il modulo osserva il blocco «Aggiungi al carrello» originale con l’API IntersectionObserver del browser. Non appena questo blocco esce dal viewport (l’utente ha scrollato), la barra sticky appare con un’animazione di scorrimento. Non appena torna visibile, la barra scompare. Questo meccanismo è nativo del browser e non aggiunge alcun costo di prestazioni allo scroll.

Selettore di variante

Per i prodotti con combinazioni, il selettore compatto elenca ogni variante con prezzo e disponibilità (le varianti esaurite sono disattivate). La selezione è locale alla barra sticky: non modifica l’interfaccia delle varianti della pagina principale. Quando il cliente cambia variante dalla pagina principale, la barra sticky si sincronizza automaticamente tramite l’evento updatedProduct di PrestaShop.

Aggiunta al carrello

Il clic sul pulsante sticky invia una richiesta AJAX POST direttamente al controller del carrello di PrestaShop (lo stesso endpoint usato dal tema), con la variante e la quantità scelte nella barra. In caso di successo, il modulo emette l’evento updateCart: il contatore del carrello nell’header e l’anteprima del carrello del vostro tema si aggiornano normalmente, e il pulsante sticky mostra una spunta di conferma.

Visualizzazione mobile

Su mobile, la barra si adatta automaticamente:

• Prodotto senza varianti — una sola riga: miniatura, nome, prezzo e pulsante. Sotto i 600 px l’etichetta del pulsante lascia il posto all’icona del carrello; sotto i 380 px la miniatura è nascosta.
• Prodotto con varianti — due righe: miniatura, nome, prezzo e pulsante sulla prima; selettore di variante a piena larghezza sulla seconda.

La barra rispetta la zona safe-area-inset-bottom degli iPhone con notch e la preferenza prefers-reduced-motion degli utenti sensibili alle animazioni.

Compatibilità con i temi

Il modulo utilizza i selettori CSS standard del tema Classic e dei suoi derivati: .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. La grande maggioranza dei temi sul mercato segue queste convenzioni.

Se il vostro tema usa classi diverse, le due funzioni da adattare si trovano all’inizio del file views/js/dfstickyaddtocart.js: getMainBtn() (selettore del pulsante nativo) e getMainForm() (selettore del form prodotto). Sono gli unici due punti di contatto con il vostro tema.

Risoluzione dei problemi

La barra non appare

1. Verificate che il modulo sia attivato nella sua configurazione e che la visualizzazione sia attiva per il dispositivo testato (mobile / desktop).
2. Svuotate la cache di PrestaShop (Parametri avanzati > Prestazioni) e ricaricate la pagina con Ctrl+Maiusc+R.
3. Se l’opzione «Nascondi quando il pulsante principale è visibile» è attiva, la barra appare solo dopo aver scrollato oltre il pulsante originale — è il comportamento previsto.
4. Verificate nella console del browser che nessun errore JavaScript di un altro modulo blocchi l’esecuzione della pagina.

L’aggiunta al carrello non funziona

1. Aprite la console del browser: il modulo registra i suoi errori con il prefisso [dfsticky].
2. Verificate nella scheda Rete la richiesta POST al controller del carrello: il codice HTTP e il corpo della risposta indicano la causa esatta (esaurito, quantità minima, ecc.).
3. Il modulo tollera gli avvisi PHP negli ambienti di sviluppo (estrae il JSON anche se preceduto da warning), ma resta consigliato un ambiente di produzione pulito.

La sidebar si sovrappone all’header del tema

Aumentate il valore Offset superiore desktop (px) nella configurazione finché la sidebar non si posiziona sotto il vostro header sticky.

FAQ tecnica

Il modulo rallenta le pagine?

No. Gli asset (circa 7 KB di CSS e 12 KB di JavaScript) vengono caricati solo sul controller product. Nessuna libreria esterna, nessun listener di scroll: la visibilità è gestita da IntersectionObserver.

È compatibile con il multinegozio?

Sì. Tutti i valori sono memorizzati tramite la classe Configuration di PrestaShop con il contesto multinegozio nativo: ogni negozio può avere colori e impostazioni propri.

Quali hook vengono utilizzati?

actionFrontControllerSetMedia (registrazione degli asset), displayFooterProduct (rendering del markup) e displayHeader (micro-CSS critico anti-flash).

I testi sono traducibili?

Sì. Tutte le stringhe passano per il sistema di traduzione di PrestaShop. Il modulo è fornito in francese, inglese, spagnolo e tedesco; aggiungete altre lingue in Internazionale > Traduzioni.

Cronologia delle versioni

1.0.3

• Analisi tollerante delle risposte del controller del carrello: il JSON viene estratto correttamente anche quando è preceduto da avvisi PHP (ambienti di sviluppo).
• Corpo della richiesta in formato URL-encoded, identico alla serializzazione nativa del tema, per la massima compatibilità.
• Rimozione definitiva di qualsiasi attivazione programmatica del pulsante nativo: i due pulsanti sono ora totalmente indipendenti.

1.0.2

• Rimosso il rendering del modale di conferma restituito dal controller del carrello, che poteva lasciare un livello invisibile che bloccava i clic su alcune pagine. La conferma passa per l’evento updateCart e la spunta del pulsante sticky.
• Pulizia difensiva dei modali orfani al caricamento della pagina.

1.0.1

• Passaggio all’aggiunta al carrello tramite richiesta AJAX diretta: il modulo non modifica più il form prodotto e non dipende più dallo stato del DOM del tema.
• Riferimenti DOM risolti al volo per sopravvivere alla sostituzione del form da parte del motore delle combinazioni.
• Reset di sicurezza dell’indicatore di caricamento.

1.0.0

• Versione iniziale: barra sticky mobile e desktop, selettore compatto di variante, selettore di quantità, personalizzazione dei colori, accessibilità ARIA, multinegozio, FR/EN/ES/DE.