Modulo Barra di Navigazione Mobile PrestaShop (dfmobilenav)

Panoramica

DF Mobile Nav aggiunge al tuo negozio PrestaShop una barra a schede fissa in fondo allo schermo, sul modello delle applicazioni mobili native: home, ricerca, carrello, preferiti e account, con badge contatore aggiornati in tempo reale.

La barra compare solo al di sotto di un punto di rottura che imposti tu (768 px per impostazione predefinita). Su desktop è completamente nascosta e non aggiunge alcuno spazio alla pagina.

Installazione

1. Dal back office, apri Moduli → Gestione moduli e clicca su Carica un modulo.
2. Carica il file dfmobilenav-1.0.0.zip.
3. Clicca su Configura al termine dell’installazione.

Il modulo registra automaticamente gli hook necessari (actionFrontControllerSetMedia e displayBeforeBodyClosingTag). Non è richiesta alcuna modifica al tuo tema.

Configurazione

Scelta delle schede

Sono disponibili cinque schede, ciascuna attivabile o disattivabile in modo indipendente:

• Home — collegamento alla pagina iniziale del negozio.
• Ricerca — apre un campo di ricerca a schermo intero oppure reindirizza alla pagina di ricerca (vedi sotto).
• Carrello — collegamento al carrello, con badge del numero di articoli.
• Preferiti — collegamento alla lista dei desideri, con badge del numero di prodotti salvati.
• Account — collegamento all’area cliente.

Se non è attivata alcuna scheda, la barra non viene renderizzata affatto.

Comportamento della ricerca

Sono proposte due modalità:

• Ricerca a schermo intero (predefinita) — un campo di input si apre sopra la pagina corrente, senza abbandonarla. Si chiude con il pulsante o con il tasto Esc.
• Reindirizzamento alla pagina di ricerca — la scheda si comporta come un normale collegamento alla pagina di ricerca nativa.

Scomparsa allo scorrimento

Quando questa opzione è attiva, la barra si ritira mentre il visitatore scorre verso il basso e riappare non appena risale. Il comportamento rispetta la preferenza di sistema per il movimento ridotto.

Punto di rottura mobile

Larghezza massima, in pixel, al di sotto della quale la barra viene mostrata. Il valore predefinito è 768 px. I valori accettati vanno da 320 a 1600 px; qualsiasi valore fuori da questo intervallo viene riportato a 768.

Colori

Quattro colori sono configurabili in formato esadecimale:

• Colore di sfondo della barra (bianco per impostazione predefinita).
• Colore di icone ed etichette a riposo (grigio per impostazione predefinita).
• Colore della scheda attiva (nero inchiostro per impostazione predefinita).
• Colore dei badge contatore (rosso per impostazione predefinita).

Badge contatore

Carrello

Il badge mostra il numero di articoli presenti nel carrello del visitatore. Si aggiorna in tempo reale a ogni aggiunta, senza ricaricare la pagina, in risposta all’evento updateCart di PrestaShop. Oltre i 99 articoli, il badge mostra «99+».

Preferiti

Il badge dei preferiti si basa sul modulo nativo lista dei desideri (blockwishlist) e mostra il numero di prodotti salvati dal cliente connesso. Si aggiorna dopo ogni interazione con i pulsanti della lista dei desideri.

Se il modulo lista dei desideri è disattivato sul tuo negozio, la scheda Preferiti viene nascosta automaticamente, qualunque sia la configurazione: non devi fare nulla.

Il contatore dei preferiti compare solo per i clienti connessi, poiché la lista dei desideri nativa è legata all’account cliente.

Scheda attiva

La scheda corrispondente alla pagina corrente viene evidenziata automaticamente e porta l’attributo di accessibilità di pagina corrente. Il rilevamento copre home, ricerca, carrello e processo d’ordine, area cliente e relative sottopagine (identità, indirizzi, cronologia, note di credito, buoni sconto), oltre alla lista dei desideri.

Compatibilità mobile

• Safe-area iOS — la barra rispetta la safe-area inferiore degli iPhone recenti e non si sovrappone mai alla barra home.
• Zoom di Safari — il campo di ricerca è dimensionato per impedire lo zoom automatico di Safari al focus.
• Spazio in fondo alla pagina — uno spazio pari all’altezza della barra viene aggiunto automaticamente in fondo al documento, così nessun contenuto resta coperto.

Accessibilità

Le schede sono collegamenti nativi, accessibili da tastiera, con anello di focus visibile. La scheda della pagina corrente viene annunciata alle tecnologie assistive. Le icone sono contrassegnate come decorative e l’informazione è portata dall’etichetta testuale. L’animazione di scomparsa allo scorrimento viene disattivata se il visitatore ha richiesto una riduzione delle animazioni nel proprio sistema.

Prestazioni

Il modulo non carica alcun font di icone, alcuna immagine e alcuna libreria JavaScript. Le icone sono SVG a tratto renderizzati direttamente nella pagina, lo script è scritto in JavaScript nativo e pesa pochi kilobyte. L’aggiornamento dei contatori avviene tramite una chiamata leggera che restituisce soltanto due numeri.

Domande frequenti

Il modulo modifica i file del mio tema?

No. Si integra tramite gli hook standard di PrestaShop, senza override dei template. La barra ha uno stile proprio, autonomo e indipendente dal tuo foglio di stile.

La barra va in conflitto con un pulsante di chat o torna su?

La barra si trova in fondo allo schermo con un livello di sovrapposizione moderato. Se un altro elemento fluttuante si sovrappone, spostalo verso l’alto di circa 60 pixel tramite il CSS del tuo tema.

Posso mostrare la barra su tablet?

Sì: aumenta il punto di rottura, per esempio a 1024 px, per coprire anche i tablet in verticale.

Il modulo è compatibile con il multinegozio?

Sì. Le impostazioni sono salvate nella configurazione di PrestaShop e rispettano il contesto del negozio.

È compatibile con PrestaShop 9?

Sì. Il modulo è progettato e validato da PrestaShop 8.0 fino a 9.x.

Registro delle versioni

1.0.0 — 12 luglio 2026

• Barra a schede fissa in fondo allo schermo con cinque schede attivabili.
• Badge contatore in tempo reale su carrello e preferiti.
• Ricerca a schermo intero o reindirizzamento, a scelta.
• Scomparsa della barra allo scorrimento verso il basso.
• Evidenziazione automatica della scheda della pagina corrente.
• Personalizzazione completa di colori e punto di rottura.
• Rispetto della safe-area iOS.
• Traduzioni IT, FR, EN, ES, DE.