DataFirefly Torna su — Documentazione
Installare e configurare il pulsante « Torna su » su PrestaShop 8 e 9.
Il modulo DataFirefly Torna su aggiunge un pulsante flottante che riporta i tuoi visitatori in cima alla pagina con un solo clic. Questa guida copre l’installazione e tutte le impostazioni disponibili.
Installazione
- Nel tuo back office, vai su Moduli > Gestore moduli.
- Clicca su Carica un modulo (in alto a destra) e invia l’archivio
dfbacktotop.zip. - Al termine dell’installazione, clicca su Configura.
Il modulo si registra automaticamente sugli hook actionFrontControllerSetMedia e displayFooter. Non è necessaria alcuna configurazione manuale degli hook.
Configurazione
La pagina di configurazione ha due schede: Comportamento e Aspetto.
Scheda Comportamento
- Soglia di attivazione (px) — numero di pixel di scorrimento dopo il quale appare il pulsante. Valore predefinito:
300. - Scorrimento fluido — attiva il ritorno animato e graduale. Disattivato, il ritorno in cima è istantaneo.
- Mostra su mobile — mostra o nasconde il pulsante sugli schermi di larghezza inferiore a 768 px.
Scheda Aspetto
- Posizione — in basso a destra o in basso a sinistra.
- Icona — chevron, freccia o triangolo (icone SVG integrate).
- Dimensione del pulsante — diametro del pulsante, da 24 a 120 px.
- Raggio degli angoli — da 0% (quadrato) a 50% (cerchio).
- Margine orizzontale / verticale — distanza dai bordi dello schermo.
- Colore di sfondo, Colore di sfondo (hover), Colore dell’icona — codici esadecimali.
- Ombra — aggiunge un’ombra morbida sotto il pulsante.
- z-index — aumenta questo valore se il pulsante appare sotto altri elementi fissi (banner cookie, chat, ecc.).
Ogni impostazione viene validata al salvataggio: i colori devono essere codici esadecimali validi, e sia la dimensione sia il raggio sono limitati per evitare qualsiasi visualizzazione errata.
Forme del pulsante
La forma è interamente pilotata dal raggio degli angoli:
50%— cerchio perfetto.20%— quadrato con angoli arrotondati.0%— quadrato netto.
Compatibilità con il tuo tema
Il pulsante viene iniettato tramite l’hook displayFooter, presente nel tema Classic e nella grande maggioranza dei temi PrestaShop. Se il tuo tema personalizzato non richiama questo hook, il pulsante non apparirà: è sufficiente aggiungere la chiamata all’hook nel template del piè di pagina del tema.
Prestazioni e accessibilità
- JavaScript nativo di circa 1,5 KB, senza jQuery né dipendenze esterne.
- Rilevamento dello scorrimento tramite
requestAnimationFramee un listener passivo, senza impatto percepibile sui Core Web Vitals. - Pulsante nativo con attributo
aria-labele focus da tastiera visibile. - Rispetta la preferenza di sistema
prefers-reduced-motion: lo scorrimento diventa istantaneo se l’utente ha ridotto le animazioni. - Nessuna raccolta di dati personali — conforme al GDPR by design.
FAQ
Il pulsante non appare, cosa controllare?
Assicurati che il tuo tema implementi l’hook displayFooter e di aver scorrato abbastanza da superare la soglia di attivazione (300 px per impostazione predefinita). Svuota anche la cache di PrestaShop dopo l’installazione.
Posso usarlo in multinegozio?
Sì. Le impostazioni vengono salvate tramite Configuration e si applicano in base al contesto del negozio attivo.
Il modulo è davvero gratuito?
Sì, con licenza gratuita, senza limitazioni di funzionalità.