Effetto neve PrestaShop - Nevicata natalizia in puro CSS
Effetto neve PrestaShop - Nevicata natalizia in puro CSS
Effetto neve PrestaShop - Nevicata natalizia in puro CSS
Effetto neve PrestaShop - Nevicata natalizia in puro CSS
Effetto neve PrestaShop - Nevicata natalizia in puro CSS
Effetto neve PrestaShop - Nevicata natalizia in puro CSS
Condividi

Snow Effects - Nevicata natalizia in puro CSS con date di stagione e senza JavaScript

29,99 €
Nessuna tassa

Aggiungi una dolce nevicata o un festoso mix natalizio a ogni pagina del tuo negozio, in puro CSS: niente JavaScript, niente jQuery, nessun file esterno e nulla caricato da un server di terze parti. Imposta una volta il primo e l'ultimo giorno di neve e la stagione inizia e finisce da sola. Dimensione, quantità, velocità di caduta e colore sono tutti regolabili, i fiocchi non bloccano mai un clic e i visitatori il cui dispositivo richiede movimento ridotto non vedono alcuna neve. Per PrestaShop 1.7 – 9.

Condividi
(4.5)
Compatibile con:
PS 1.7 PS 8 PS 9
Disponibile in:
Olandese Olandese Inglese Inglese Francese Francese Tedesco Tedesco Italiano Italiano Polacco Polacco Spagnolo Spagnolo Turco Turco

Atmosfera stagionale senza penalizzare le prestazioni

Una nevicata sul negozio è un piccolo dettaglio che fa sembrare dicembre davvero dicembre. Quello che non vuoi è il prezzo che di solito si paga: una libreria JavaScript, un font caricato dal CDN di qualcun altro, uno script che gira su ogni pagina tutto l'anno e un promemoria per disattivarlo a gennaio. Questo modulo non fa niente di tutto questo. È CSS, si programma da solo e pesa circa un kilobyte.

Due temi

Classico è la semplice nevicata bianca. Mix natalizio sparge campanelle, note musicali, alberi, pupazzi di neve e regali tra i fiocchi. Gli ornamenti mantengono i propri colori; i glifi della neve prendono il colore che scegli tu, con un'ombra morbida che tiene visibili i fiocchi bianchi anche su un tema chiaro.

Imposta la stagione una volta e dimenticatene

Indica un primo e un ultimo giorno — dal 1° dicembre al 6 gennaio, per esempio — e il modulo confronta le date a ogni visita. La neve compare da sola e si ferma da sola. Lascia le date vuote e l'effetto va avanti finché non lo disattivi tu. È l'impostazione che evita al negozio di nevicare ancora a marzo.

Regolabile, ma già equilibrato di suo

  • Intensità — calma, normale o bufera.
  • Dimensione — da 0,5 a 5, rispetto alla dimensione del testo del tuo tema, con ogni fiocco che varia leggermente intorno a quel valore.
  • Quantità — da 4 a 48 fiocchi contemporaneamente sullo schermo.
  • Colore — qualsiasi colore CSS valido.
  • Mostra sui telefoni — disattivalo per limitare la neve agli schermi più larghi di 768 px.

Ogni campo viene convalidato al salvataggio: gli intervalli vengono rispettati, le date devono essere valide e nell'ordine giusto, i colori devono essere colori reali e una dimensione scritta come 1,5 con la virgola decimale viene accettata invece di essere scartata in silenzio. Se un valore non va bene, ricevi un messaggio chiaro e non perdi nulla di quello che hai digitato.

Un movimento che sembra naturale

Ogni fiocco riceve posizione, dimensione e tempi casuali a ogni caricamento della pagina, e l'animazione parte a metà caduta: così lo schermo non resta mai vuoto nei primi secondi e lo schema non si ripete mai in modo visibile.

Rispettoso per scelta

La neve non intercetta mai i clic né la selezione del testo: ogni livello usa pointer-events: none, quindi niente si mangia il tocco su un pulsante da mobile. I visitatori il cui sistema richiede il movimento ridotto non vedono alcuna neve, perché per chi è sensibile al movimento questo non è un extra gradito ma una necessità.

Dove viene generata

Il markup entra attraverso l'hook standard displayBeforeBodyClosingTag, presente in ogni tema costruito sui layout predefiniti di PrestaShop, e il foglio di stile è registrato tramite actionFrontControllerSetMedia, così segue la normale pipeline degli asset e viene caricato solo mentre la stagione è attiva. Su un tema molto personalizzato puoi agganciare il modulo a un altro hook di visualizzazione da Design → Posizioni, oppure inserirlo direttamente con {widget name='snowflakesmeg'}. Viene generato al massimo una volta per pagina, a prescindere da quanti hook o quante chiamate widget lo richiamano.

Che cosa ha risolto la versione 2.0

La 1.x aveva sei problemi concreti, tutti superati. Nevicava due volte su PrestaShop 1.7, perché la 1.x registrava sia displayHeader sia il suo vecchio alias header — due livelli di neve sovrapposti su ogni pagina. La modalità natalizia mostrava quadratini vuoti ogni volta che un CDN non era raggiungibile, perché le icone festive arrivavano da un foglio di stile Font Awesome ospitato su un CDN di terze parti ormai deprecato, caricato su ogni pagina del negozio e del back office; la 2.0 usa emoji native e glifi testuali e non carica nulla dall'esterno. I fiocchi in caduta bloccavano i clic, soprattutto su mobile. Una dimensione scritta con la virgola decimale veniva rifiutata senza alcuna spiegazione. Il markup della neve veniva stampato dentro <head>, lasciando ai browser il compito di riparare il documento; ora finisce subito prima di </body>. E non c'era modo di far finire la stagione: da qui le date.

Compatibilità

PrestaShop 1.7, 8 e 9, in otto lingue: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco. L'animazione lavora solo su transform, quindi resta sul thread del compositore del browser: nessun ricalcolo del layout e nessuno scatto, nemmeno con 48 fiocchi. Non ci sono tabelle nel database, né override né modifiche al core, e la disinstallazione elimina ogni impostazione, comprese quelle rimaste dalla 1.x, riportando il negozio esattamente com'era.

Domande frequenti

Rallenterà il mio negozio?

No. È un piccolo foglio di stile e circa un kilobyte di markup, animato solo su transform, senza nulla da scaricare da un server esterno.

Devo ricordarmi di disattivarlo a gennaio?

No, servono esattamente a questo le date di stagione. Imposta una volta il primo e l'ultimo giorno e la neve inizia e si ferma da sola.

Serve JavaScript?

Per niente. Niente JavaScript, niente jQuery, nessun file o font esterno, il che aiuta anche sul fronte GDPR, dato che non viene richiesto nulla a un server di terze parti.

La neve può bloccare i miei pulsanti?

No. Ogni livello di neve usa pointer-events: none, quindi i clic e la selezione del testo lo attraversano senza problemi.

Posso nasconderla su mobile?

Sì, un solo interruttore limita l'effetto agli schermi più larghi di 768 px.

E i visitatori sensibili al movimento?

Non vedono alcuna neve. Il modulo rispetta automaticamente l'impostazione di sistema prefers-reduced-motion.

Il mio tema è personalizzato e non compare nulla, e adesso?

Aggancia il modulo a un altro hook di visualizzazione da Design → Posizioni, oppure inserisci {widget name='snowflakesmeg'} nel tuo template. Continuerà a essere generato una sola volta per pagina.

  • Riferimento
    47645
  • ean13
    8691246247643

  • Compatibilità
    Prestashop 1.4
    Prestashop 1.5
    Prestashop 1.6
    Prestashop 1.7
    Prestashop 8
    Prestashop 9
  • Traduzioni del Modulo Disponibili
    Francese
    Inglese
    Italiano
    Olandese
    Polacco
    Spagnolo
    Tedesco
    Turco

Compatibilità
PS1.7 PS8 PS9
Traduzioni
Olandese Olandese
Inglese Inglese
Francese Francese
Tedesco Tedesco
Italiano Italiano
Polacco Polacco
Spagnolo Spagnolo
Turco Turco
Demo
Demo Front Office Demo Back Office
Accedi: demo@demo.com / Demodemo123!
Sviluppatore
MEG Venture MEG Venture

Commenti (2)

(4.5)

4 altri prodotti nella stessa categoria

Prodotti visti

Condividi

Utilizziamo i cookie per offrirti la migliore esperienza di acquisto possibile. Cliccando su “Accetta”, acconsenti al loro utilizzo come descritto nella nostra informativa sulla privacy.

Scopri di più
Torna all'inizio