DF Swipe Gallery: navigazione prodotti tramite swipe

Panoramica

DF Swipe Gallery trasforma le pagine categoria del vostro negozio PrestaShop in un mazzo di card a schermo intero in stile Tinder. Il visitatore scopre i prodotti uno alla volta: swipe a destra per il mi piace (wishlist), a sinistra per saltare, verso l’alto per aggiungere al carrello. Una barra di avanzamento stile stories indica la posizione e una schermata finale riepiloga i preferiti della sessione. Ogni interazione alimenta una dashboard nel back office.

Installazione

1. Nel back office, aprite Moduli > Gestore dei moduli > Carica un modulo.
2. Caricate il file dfswipegallery.zip e fate clic su Installa.
3. Il modulo crea le sue due tabelle (df_swipegallery_like e df_swipegallery_stat), registra i suoi hook e aggiunge la scheda Catalogo > Swipe Gallery.

Non serve alcuna modifica al tema: il pulsante di avvio e l’overlay vengono iniettati tramite l’hook displayFooterAfter, indipendentemente dal vostro template.

Aggiornamento dalla 1.0.0

Caricate lo ZIP 1.1.0 sopra il modulo esistente. Lo script di aggiornamento aggiunge la colonna delle aperture della scheda, registra i nuovi hook, crea le nuove impostazioni con i valori predefiniti e conserva i vostri mi piace e le statistiche. Svuotate poi la cache di PrestaShop.

Configurazione

Aprite Moduli > DF Swipe Gallery > Configura. Opzioni disponibili:

• Attiva la swipe gallery: attiva o disattiva il modulo globalmente.
• Solo dispositivi mobili: limita il pulsante flottante agli schermi sotto i 992 px (attivo per impostazione predefinita). Disattivatelo per offrire il mazzo anche su desktop.
• Numero massimo di prodotti per mazzo: da 5 a 100 (30 per impostazione predefinita).
• Ordine del mazzo: posizione nella categoria, casuale (consigliato per la scoperta) o novità prima.
• Lo swipe verso l’alto aggiunge al carrello: attiva il super-like.
• Lascia scegliere la combinazione al visitatore: per i prodotti con combinazioni, lo swipe verso l’alto apre un pannello per scegliere taglia, colore, ecc. prima dell’aggiunta al carrello. Se disattivato, viene aggiunta direttamente la combinazione predefinita (novità della 1.2.0, attivo per impostazione predefinita).
• Nascondi i prodotti già apprezzati: esclude dai nuovi mazzi i prodotti già apprezzati dal visitatore.
• Nascondi i prodotti esauriti: esclude i prodotti non ordinabili per mancanza di stock (novità della 1.1.0).
• Mostra il prezzo sulle card: mostra il prezzo, con il prezzo originale barrato quando c’è uno sconto. Nascosto automaticamente in modalità catalogo.
• Posizione del pulsante di avvio: in basso a destra, a sinistra o al centro.
• Colore di accento: colore del pulsante di avvio e del pulsante Ricomincia (novità della 1.1.0). Il colore del testo si adatta automaticamente per restare leggibile.

Utilizzo nel negozio

Su ogni pagina categoria appare un pulsante flottante «Modalità swipe». Al tocco, il mazzo si apre a schermo intero:

• Swipe a destra (o pulsante cuore): il prodotto riceve un mi piace e viene salvato nella wishlist.
• Swipe a sinistra (o pulsante croce): passa al prodotto successivo.
• Swipe verso l’alto (o pulsante carrello): aggiunge il prodotto al carrello; per un prodotto con combinazioni si apre prima un pannello per scegliere la combinazione. Il pulsante è disattivato sui prodotti non disponibili.
• «Vedi il prodotto»: apre la scheda prodotto.

Un gesto breve ma rapido basta per confermare uno swipe. Le card mostrano le etichette «Già apprezzato» e «Non disponibile» quando serve. Su desktop, le frecce della tastiera replicano i gesti (destra: mi piace, sinistra: salta, alto: carrello) e il tasto Esc chiude il mazzo. Su smartphone, il tasto indietro del telefono chiude il mazzo invece di lasciare la pagina.

Alla fine del mazzo, una schermata riepilogativa elenca i prodotti apprezzati con il prezzo e un link a ogni scheda. Il pulsante Ricomincia carica un nuovo mazzo senza chiudere l’overlay.

Accessibilità: il focus entra nel mazzo all’apertura e torna al pulsante alla chiusura, la tabulazione resta nel mazzo, il prodotto corrente viene annunciato agli screen reader e le animazioni vengono disattivate se il visitatore ha attivato prefers-reduced-motion.

Wishlist, clienti e ospiti

Ogni mi piace viene salvato nella tabella del modulo, sia che provenga da un cliente connesso sia da un visitatore ospite (collegato al suo identificativo visitatore PrestaShop). Una chiave univoca impedisce i duplicati, anche quando uno stesso cliente usa più dispositivi.

Se il modulo ufficiale blockwishlist è installato e il cliente è connesso, il prodotto viene aggiunto alla sua lista dei desideri predefinita, creata automaticamente se necessario, con la combinazione predefinita. Non serve alcuna configurazione.

Dalla 1.1.0, quando un ospite accede o crea il suo account, i suoi mi piace vengono trasferiti automaticamente all’account cliente e poi aggiunti alla sua lista dei desideri blockwishlist. Se ne occupano gli hook actionAuthentication e actionCustomerAccountAdd; un errore in questa fase non blocca mai l’accesso.

Aggiunta al carrello con swipe

Lo swipe verso l’alto aggiunge il prodotto lato server con le stesse regole del pulsante nativo: combinazione scelta dal visitatore (o combinazione predefinita se il pannello è disattivato), quantità minima rispettata, controllo dello stock e dei diritti di accesso. Il carrello viene creato se necessario e conservato nella sessione del visitatore.

Il badge carrello del tema viene poi aggiornato tramite l’evento standard prestashop.emit('updateCart'), senza aprire la finestra «prodotto aggiunto» del tema. Un messaggio conferma l’aggiunta; se il prodotto non può essere aggiunto, il visitatore ne vede il motivo.

Scelta della combinazione

Per un prodotto con combinazioni, lo swipe verso l’alto, il pulsante carrello o la freccia su aprono un pannello nella parte bassa dello schermo. I colori appaiono come campioni (o con la loro texture se definita in Catalogo > Attributi), gli altri attributi come pulsanti, e un lungo elenco di tipo menu a tendina resta un menu a tendina. La combinazione predefinita è preselezionata.

A ogni scelta, il pannello aggiorna l’immagine, il prezzo (barrato in caso di offerta) e lo stock della combinazione. Un valore esaurito appare attenuato; un valore che non esiste con le altre scelte appare barrato, e selezionarlo passa alla combinazione esistente più vicina, privilegiando quella disponibile. Il pulsante di aggiunta resta disattivato finché la combinazione non è ordinabile.

Esc, la croce o il tasto indietro del telefono chiudono il pannello senza uscire dal mazzo. I dati vengono caricati alla prima apertura e tenuti in memoria per la sessione. Lato server, la combinazione ricevuta viene verificata (deve appartenere al prodotto ed essere venduta nel negozio) e lo stock viene controllato, compreso quanto già presente nel carrello.

Statistiche nel back office

La scheda Catalogo > Swipe Gallery mostra:

• I contatori: card viste, mi piace, saltati, aggiunte al carrello, aperture della scheda prodotto.
• Il tasso di mi piace (mi piace / (mi piace + saltati)), il tasso di aggiunta al carrello e il tasso di apertura della scheda per card vista.
• I 20 prodotti con più mi piace, con link alla scheda nel back office.
• I prodotti più saltati (almeno 5 swipe), ordinati per tasso di salto: buoni candidati per una foto principale migliore o un prezzo rivisto.
• L’export CSV di tutte le statistiche e un pulsante di azzeramento per negozio (i mi piace dei visitatori vengono mantenuti).

Le statistiche di un prodotto eliminato vengono rimosse automaticamente. Nessun dato viene inviato a servizi terzi.

GDPR

Il modulo si registra presso il modulo ufficiale psgdpr: i mi piace collegati a un account cliente compaiono nell’export dei dati personali e vengono cancellati con una richiesta di cancellazione. Vengono inoltre eliminati quando un cliente viene cancellato dal back office. Le statistiche sono aggregate per prodotto e non contengono dati personali.

Multinegozio e traduzioni

I mi piace e le statistiche vengono registrati per negozio. Il modulo viene fornito tradotto in 8 lingue (inglese come lingua sorgente, più FR, ES, DE, IT, NL, PL, PT). Per modificare un testo, usate Internazionale > Traduzioni > Traduzioni dei moduli installati.

Risoluzione dei problemi

• Il pulsante non appare: verificate che il modulo sia attivo, di trovarvi su una pagina categoria e che «Solo dispositivi mobili» sia disattivato se state testando su desktop.
• Il mazzo è vuoto: la categoria non contiene alcun prodotto attivo visibile, non è accessibile al gruppo del visitatore, oppure tutti i prodotti sono esclusi da «Nascondi i prodotti già apprezzati» o «Nascondi i prodotti esauriti».
• Il badge carrello non si aggiorna: il vostro tema potrebbe non ascoltare l’evento updateCart; il prodotto è comunque nel carrello, adattate il listener del tema o contattate il supporto.
• Un elemento del tema si sovrappone al mazzo: l’overlay usa uno z-index di 100000; aumentatelo via CSS se un banner cookie o una chat lo coprono.
• Dopo l’aggiornamento resta il comportamento precedente: svuotate la cache di PrestaShop e quella del browser; lo script di aggiornamento azzera anche l’OPcache quando disponibile.

Changelog

• 1.2.0 (2026-10-13): scelta della combinazione prima dell’aggiunta al carrello (campioni di colore, taglie, prezzo, immagine e stock per combinazione, combinazioni inesistenti barrate e passaggio automatico alla più vicina); opzione «Lascia scegliere la combinazione al visitatore»; messaggio preciso quando una combinazione è esaurita; visualizzazione indipendente dal box-sizing del tema.
• 1.1.0 (2026-10-13): il carrello creato con uno swipe verso l’alto ora viene conservato; combinazione predefinita nel carrello e nella wishlist; niente più finestra «prodotto aggiunto» dietro il mazzo; trasferimento automatico dei mi piace degli ospiti all’account cliente; statistiche affidabili (card realmente viste, aperture della scheda, prodotti più saltati, export CSV, azzeramento); opzioni «Nascondi i prodotti esauriti» e «Colore di accento»; prezzo barrato; tasto indietro dello smartphone, gesto rapido, gestione del focus; GDPR tramite psgdpr; traduzioni in 8 lingue.
• 1.0.0 (2026-07-16): versione iniziale. Mazzo swipe a schermo intero, wishlist con swipe a destra e ponte blockwishlist, aggiunta al carrello con swipe verso l’alto, supporto degli ospiti, dashboard, barra di avanzamento stile stories, compatibilità con PrestaShop 8 e 9, multinegozio.