Esigenza del progetto
Nel catalogo di un e-commerce con molti articoli, l’utente visita spesso una lista prodotti, apre una scheda e poi desidera confrontare velocemente altri articoli simili.
Nel comportamento standard di PrestaShop, questo passaggio non è sempre immediato: spesso bisogna tornare indietro alla lista, attendere il ricaricamento e aprire un nuovo prodotto.
Per migliorare questo flusso ho sviluppato un modulo che:
- mantiene il contesto di navigazione dell’utente;
- riconosce da quale elenco prodotti proviene il click;
- mostra in pagina prodotto i pulsanti Indietro e Avanti;
- supporta contesti diversi come categoria, ricerca, brand e blocchi prodotti presenti nella scheda prodotto;
- offre una visualizzazione discreta, moderna e mobile friendly.
Funzionalità principali
Navigazione contestuale tra prodotti
Il modulo memorizza il contesto dell’ultima lista visitata e consente di navigare tra i prodotti in modo coerente con il percorso dell’utente.
Supporto a più contesti
La navigazione può essere aggiornata a partire da:
- pagine categoria;
- risultati di ricerca;
- pagine brand / manufacturer;
- blocchi prodotti presenti nella pagina prodotto, come gli articoli della stessa categoria.
Pulsanti fissi a schermo
I pulsanti di navigazione sono posizionati con layout fixed, così restano sempre accessibili durante la consultazione della scheda prodotto.
Miniature visibili e pannello al passaggio del mouse
L’interfaccia mostra solo le immagini dei prodotti in modo discreto. Al passaggio del mouse viene aperto un pannello descrittivo che può mostrare:
- etichetta avanti / indietro;
- nome prodotto;
- prezzo, se abilitato.
Su mobile il pannello è gestito tramite tap, con comportamento ottimizzato per dispositivi touch.
Navigazione circolare
Se l’utente raggiunge il primo o l’ultimo prodotto dell’elenco, la navigazione può continuare in modo circolare:
- dal primo si torna all’ultimo;
- dall’ultimo si torna al primo.
Aspetti tecnici del modulo
Il modulo è stato sviluppato in modo compatibile con PrestaShop 8.2, seguendo una logica modulare lato frontend e backend.
Architettura
- modulo custom per PrestaShop;
- integrazione tramite hook del tema;
- asset frontend caricati nel front office;
- template dedicato per il markup del navigatore;
- gestione responsive con CSS custom;
- logica di contesto gestita in JavaScript.
Esperienza utente
L’interfaccia è stata progettata per essere presente ma non invasiva:
- miniature compatte ai lati della pagina;
- dettaglio espandibile solo in hover o tap;
- adattamento a desktop e smartphone;
- riduzione del numero di click necessari per confrontare più prodotti.
Personalizzazioni implementate
Nel corso dello sviluppo sono state introdotte diverse migliorie funzionali, tra cui:
- priorità ai prodotti cliccati nei blocchi della pagina prodotto;
- aggiornamento del contesto anche da pagine brand;
- comportamento ciclico dei pulsanti avanti e indietro;
- controllo della visualizzazione del prezzo;
- ottimizzazione del markup per una resa migliore nel tema custom del sito.
Risultati
Questo modulo migliora la consultazione del catalogo e rende più immediato il passaggio tra prodotti simili o appartenenti allo stesso elenco.
Dal punto di vista UX, il vantaggio principale è la riduzione dell’attrito nella navigazione: l’utente resta immerso nella scheda prodotto e può continuare a esplorare il catalogo senza interrompere il flusso.
Per un e-commerce tecnico o con molte varianti, questa logica di navigazione può favorire:
- confronto più rapido tra prodotti;
- maggiore permanenza sulle pagine prodotto;
- navigazione più intuitiva;
- migliore valorizzazione dei listing di categoria, ricerca e brand.
Repository GitHub
Il modulo è disponibile anche su GitHub per download, consultazione del codice e personalizzazioni future.
Link repository: REPOSITORY GITHUB
Tecnologie utilizzate
- PrestaShop 8.2
- PHP
- Smarty
- JavaScript
- CSS responsive
- Git / GitHub
Vuoi un modulo simile per il tuo e-commerce?
Sviluppo moduli custom per PrestaShop, integrazioni su misura e componenti frontend pensati per migliorare usabilità, performance e gestione del catalogo.
Se vuoi realizzare una funzione personalizzata per il tuo shop online, puoi contattarmi tramite AndRed.it.