Sezonowy nastrój bez sezonowego spadku wydajności
Opady śniegu w sklepie to drobiazg, dzięki któremu grudzień naprawdę wygląda na grudzień. Czego na pewno nie chcesz, to zwykłej ceny takiego efektu: biblioteki JavaScript, czcionki pobieranej z cudzego CDN, kodu działającego na każdej stronie przez cały rok i notatki w kalendarzu, żeby wyłączyć to wszystko w styczniu. Ten moduł nie robi nic z tych rzeczy. To czysty CSS, sam pilnuje terminów i waży mniej więcej kilobajt.
Dwa motywy
Klasyczny to zwykłe białe opady śniegu. Mieszanka świąteczna rozsypuje między płatkami dzwonki, nuty, choinki, bałwany i prezenty. Ozdoby zachowują własne kolory, a znaki śniegu przyjmują kolor, który wybierzesz — z miękkim cieniem, dzięki czemu białe płatki pozostają widoczne również na jasnym motywie.
Ustaw sezon raz i zapomnij o nim
Podaj pierwszy i ostatni dzień — na przykład od 1 grudnia do 6 stycznia — a moduł porówna daty przy każdej wizycie. Śnieg pojawi się sam i sam zniknie. Zostaw daty puste, a efekt będzie po prostu działał, dopóki go nie wyłączysz. To właśnie to ustawienie sprawia, że w marcu w sklepie nie pada już śnieg.
Regulowany, ale rozsądny domyślnie
- Intensywność — spokojna, normalna albo zamieć.
- Rozmiar — od 0,5 do 5, względem rozmiaru tekstu Twojego motywu, przy czym każdy płatek nieco się wokół tej wartości waha.
- Liczba płatków — od 4 do 48 jednocześnie na ekranie.
- Kolor — dowolny prawidłowy kolor CSS.
- Pokaż na telefonach — wyłącz, aby ograniczyć śnieg do ekranów szerszych niż 768 px.
Każde pole jest sprawdzane przy zapisie: zakresy są pilnowane, daty muszą być prawidłowe i we właściwej kolejności, kolory muszą być realnymi kolorami, a rozmiar wpisany jako 1,5 z przecinkiem dziesiętnym zostanie przyjęty, a nie po cichu odrzucony. Błędne dane wracają z czytelnym komunikatem i nic z tego, co zostało wpisane, nie przepada.
Ruch, który wygląda naturalnie
Każdy płatek dostaje losową pozycję, rozmiar i czas przy każdym wczytaniu strony, a animacja startuje w połowie opadania — dzięki temu ekran nie jest pusty przez pierwsze sekundy, a układ nigdy nie powtarza się w widoczny sposób.
Zaprojektowany z szacunkiem dla odwiedzających
Śnieg nigdy nie przechwytuje kliknięć ani zaznaczania tekstu; każda warstwa używa pointer-events: none, więc nic nie połknie dotknięcia przycisku na telefonie. Odwiedzający, których system prosi o ograniczony ruch, nie zobaczą śniegu w ogóle — dla osób wrażliwych na ruch to realna potrzeba, a nie miły dodatek.
Gdzie się renderuje
Kod trafia do strony przez standardowy hook displayBeforeBodyClosingTag, obecny w każdym motywie zbudowanym na domyślnych szablonach PrestaShop, a arkusz stylów jest rejestrowany przez actionFrontControllerSetMedia, więc dołącza do zwykłego potoku zasobów i ładuje się tylko wtedy, gdy trwa sezon. W mocno przerobionym motywie możesz podpiąć moduł pod inny hook wyświetlania w Wygląd → Pozycje albo wstawić go bezpośrednio przez {widget name='snowflakesmeg'}. Renderuje się najwyżej raz na stronę, niezależnie od tego, do ilu hooków czy wywołań widgetu został podpięty.
Co naprawiła wersja 2.0
Wersja 1.x miała sześć realnych problemów — wszystkie zniknęły. Na PrestaShop 1.7 śnieg padał podwójnie, ponieważ 1.x rejestrowała jednocześnie displayHeader i jego starszy alias header — dwie nakładające się warstwy śniegu na każdej stronie. W trybie świątecznym pojawiały się puste kwadraty, gdy CDN był nieosiągalny, bo świąteczne ikony pochodziły z arkusza Font Awesome na wycofanym, zewnętrznym CDN, ładowanym na każdej stronie sklepu oraz zaplecza; wersja 2.0 korzysta z natywnych emoji i znaków tekstowych i nie pobiera niczego z zewnątrz. Spadające płatki blokowały kliknięcia, zwłaszcza na telefonach. Rozmiar wpisany z przecinkiem dziesiętnym był odrzucany bez żadnego wyjaśnienia. Kod śniegu był wypisywany wewnątrz <head>, więc przeglądarki musiały naprawiać dokument; teraz trafia tuż przed </body>. I nie było żadnego sposobu, by zakończyć sezon — stąd daty.
Zgodność
PrestaShop 1.7, 8 i 9, w ośmiu językach: angielskim, francuskim, hiszpańskim, holenderskim, niemieckim, polskim, tureckim i włoskim. Animacja opiera się wyłącznie na transform, więc pozostaje na wątku kompozytora przeglądarki — bez przeliczania układu i bez zacięć, nawet przy 48 płatkach. Nie ma tabel w bazie danych, nadpisań ani zmian w rdzeniu, a odinstalowanie usuwa wszystkie ustawienia, łącznie z pozostałościami po 1.x, przywracając sklep dokładnie do stanu sprzed instalacji.
Najczęściej zadawane pytania
Czy spowolni mój sklep?
Nie. To jeden mały arkusz stylów i mniej więcej kilobajt kodu, animowany wyłącznie przez transform, bez niczego pobieranego z zewnętrznego serwera.
Czy muszę pamiętać o wyłączeniu śniegu w styczniu?
Nie — od tego są daty sezonu. Ustaw raz pierwszy i ostatni dzień, a śnieg sam się włączy i sam wyłączy.
Czy moduł wymaga JavaScript?
Zupełnie nie. Bez JavaScript, bez jQuery, bez plików i czcionek zewnętrznych, co czyni go też przyjaznym dla GDPR, bo nic nie jest pobierane z serwera osób trzecich.
Czy śnieg może zablokować moje przyciski?
Nie. Każda warstwa śniegu używa pointer-events: none, więc kliknięcia i zaznaczanie tekstu przechodzą przez nią bez przeszkód.
Czy mogę ukryć śnieg na telefonach?
Tak, jeden przełącznik ogranicza efekt do ekranów szerszych niż 768 px.
A co z odwiedzającymi wrażliwymi na ruch?
Nie zobaczą śniegu. Moduł automatycznie respektuje systemowe ustawienie prefers-reduced-motion.
Mam własny motyw i nic się nie pojawia — co teraz?
Podepnij moduł pod inny hook wyświetlania w Wygląd → Pozycje albo wstaw {widget name='snowflakesmeg'} do swojego szablonu. Nadal renderuje się tylko raz na stronę.
Komentarze (2)
Chwilowo nie możesz polubić tej opinii
Zgłoś komentarz
Zgłoszenie wysłane
Twoje zgłoszenie nie może zostać wysłane