Smart Scroll Buttons - Torna su e Scorri in basso con anteprima live

Le pagine lunghe hanno bisogno di un'uscita

Una categoria con sessanta prodotti, una barra di filtri, una pagina CMS chilometrica, un elenco nel back office: il visitatore scorre, trova quello che cercava e poi deve risalire tutta la pagina a mano. È un attrito piccolo, che però si ripete su ogni pagina lunga, e si risolve con un pulsante. Questo modulo te ne dà due.

Due pulsanti, configurati separatamente

• Torna su compare quando il visitatore ha scorso verso il basso. Un clic riporta dolcemente in cima alla pagina.
• Scorri in basso resta visibile finché c'è ancora pagina sotto. Un clic salta direttamente in fondo: comodo sugli elenchi lunghi e sulle pagine in cui quello che interessa davvero, un modulo di contatto o un blocco informativo, si trova alla fine.

Non è la stessa impostazione applicata due volte. Ogni pulsante ha forma, larghezza, altezza, colore di sfondo, colore icona, margini, z-index e velocità di scorrimento indipendenti: puoi renderli una coppia coordinata oppure volutamente diversi. L'animazione di comparsa, invece, è un'impostazione del pulsante Torna su.

Un'anteprima live al posto delle supposizioni

La pagina delle impostazioni mostra i pulsanti mentre li configuri. Cambi la forma, scegli il colore, ritocchi le dimensioni e l'anteprima si aggiorna: niente salva, passa al negozio, ricarica e torna indietro. È la differenza tra azzeccare l'aspetto al primo tentativo e azzeccarlo al quinto.

Forma, colore e posizione

Scegli tra cerchio e quadrato arrotondato. Imposti larghezza e altezza, il colore di sfondo e quello dell'icona e la distanza dai bordi dello schermo: margine destro più margine inferiore per Torna su, margine destro più margine superiore per Scorri in basso. L'impostazione z-index decide sopra quali altri elementi si posiziona il pulsante, cosa che conta quando il tema ha un'intestazione fissa, un banner sui cookie o una chat che si contendono lo stesso angolo.

Il movimento lo scegli tu

Il pulsante Torna su ha un'animazione di comparsa che decide come arriva mentre il visitatore scorre: Dissolvenza, Rotazione, Rotazione inversa, Zoom oppure Nessuna, se preferisci che compaia e basta. La velocità di scorrimento, che imposti separatamente su ciascun pulsante, è un numero in millisecondi — più alto è, più lento e fluido diventa il movimento — così il ritorno in cima può essere uno scatto rapido o una risalita morbida.

Front office, back office o entrambi

Due interruttori indipendenti. Mostra i pulsanti ai clienti nel negozio, mostrali al tuo team dentro il pannello di amministrazione, oppure entrambe le cose. Gli elenchi prodotti del back office e le pagine di configurazione più lunghe traggono vantaggio da un pulsante Torna su quanto una pagina categoria.

Tutto viene validato

I colori devono essere colori veri, i campi numerici numeri interi maggiori o uguali a zero e i campi a scelta multipla devono contenere una delle opzioni previste. Qualsiasi valore non valido viene rifiutato al salvataggio con un messaggio che indica il campo e il valore — "#GGG" is not a valid color invece di un errore silenzioso o di un pulsante rotto.

Compatibilità

PrestaShop 1.7, 8 e 9, in otto lingue: italiano, inglese, francese, tedesco, spagnolo, olandese, polacco e turco. I pulsanti vengono generati dal template e dal foglio di stile del modulo, con il font delle icone incluso nel pacchetto invece che caricato da un CDN esterno: nessuna richiesta verso l'esterno e pulsanti che restano visibili anche se un CDN non è raggiungibile.

Domande frequenti

Posso attivare solo il pulsante Torna su?

Sì. I due pulsanti si configurano in modo indipendente, quindi puoi usarne uno soltanto oppure entrambi insieme.

Andrà in conflitto con la mia intestazione fissa o con la chat?

Serve proprio a questo l'impostazione z-index: alzala per far stare il pulsante davanti all'elemento che dà fastidio, abbassala per farlo passare dietro. Con i margini puoi anche spostarlo del tutto.

Devo salvare per vedere come viene?

No. La pagina delle impostazioni mostra entrambi i pulsanti in anteprima live mentre cambi forma, dimensioni e colori.

Posso mostrarlo anche nel back office?

Sì, è un interruttore a parte. Gli elenchi lunghi dell'amministrazione ne traggono lo stesso vantaggio del negozio.

Come rendo lo scorrimento più lento e fluido?

Aumenta il valore della velocità di scorrimento: è espresso in millisecondi, quindi un numero più alto significa una risalita più lunga e più morbida.

Quali forme sono disponibili?

Cerchio e quadrato arrotondato, ognuna con larghezza e altezza proprie.

Carica qualcosa da un server esterno?

No. Il font delle icone viene distribuito insieme al modulo, quindi non si scarica nulla da un CDN e i pulsanti si vedono anche se un CDN è bloccato.