Ambiente de época sem a fatura de desempenho da época
Neve a cair na loja é um pormenor pequeno que faz dezembro parecer mesmo dezembro. O que ninguém quer é o custo habitual disso: uma biblioteca JavaScript, um tipo de letra vindo da CDN de outra empresa, um script a correr em todas as páginas o ano inteiro e um lembrete para o desligar em janeiro. Este módulo não faz nada disso. É CSS, agenda-se a si próprio e pesa cerca de um kilobyte.
Dois temas
O Clássico é neve branca simples. A Mistura de Natal espalha sinos, notas musicais, árvores, bonecos de neve e presentes por entre os flocos. Os enfeites mantêm as suas próprias cores; os símbolos de neve assumem a cor que escolher, com uma sombra suave para que os flocos brancos continuem visíveis num tema claro.
Defina a época uma vez e esqueça o assunto
Indique um primeiro e um último dia — 1 de dezembro a 6 de janeiro, por exemplo — e o módulo compara as datas em cada visita. A neve aparece sozinha e pára sozinha. Deixe as datas vazias e ela funciona simplesmente até a desligar. É esta a definição que evita uma loja ainda a nevar em março.
Ajustável, mas equilibrado à partida
- Intensidade — calma, normal ou tempestade.
- Tamanho — de 0,5 a 5, relativo ao tamanho do texto do seu tema, com cada floco a variar ligeiramente em torno desse valor.
- Quantidade — de 4 a 48 flocos no ecrã ao mesmo tempo.
- Cor — qualquer cor CSS válida.
- Mostrar em telemóveis — desligue para limitar a neve a ecrãs com mais de 768 px de largura.
Todos os campos são validados ao guardar: os intervalos são respeitados, as datas têm de ser válidas e estar pela ordem certa, as cores têm de ser cores a sério e um tamanho escrito como 1,5, com vírgula decimal, é aceite em vez de ser rejeitado em silêncio. Se algo estiver errado, recebe uma mensagem clara e não perde nada do que escreveu.
Um movimento que parece natural
Cada floco recebe uma posição, um tamanho e um ritmo aleatórios sempre que a página é carregada, e a animação começa a meio da queda — por isso o ecrã nunca fica vazio nos primeiros segundos e o padrão nunca se repete de forma visível.
Respeitador por princípio
A neve nunca intercepta cliques nem a seleção de texto; todas as camadas usam pointer-events: none, portanto nada engole um toque num botão no telemóvel. Quem tiver o sistema configurado para movimento reduzido não vê neve nenhuma, que é o que as pessoas sensíveis ao movimento precisam e não um extra simpático.
Onde é apresentado
O markup entra pelo hook padrão displayBeforeBodyClosingTag, presente em todos os temas construídos sobre os layouts predefinidos do PrestaShop, e a folha de estilos é registada através de actionFrontControllerSetMedia, para que entre na cadeia normal de recursos e só seja carregada enquanto a época estiver ativa. Num tema muito personalizado, pode associar o módulo a outro hook de apresentação em Design → Posições, ou colocá-lo diretamente com {widget name='snowflakesmeg'}. É apresentado no máximo uma vez por página, independentemente do número de hooks ou de chamadas de widget a que esteja associado.
O que a versão 2.0 corrigiu
A versão 1.x tinha seis problemas reais, todos resolvidos. Nevava a dobrar no PrestaShop 1.7, porque a 1.x registava tanto displayHeader como o seu antigo alias header — duas camadas de neve sobrepostas em cada página. O modo de Natal mostrava quadrados vazios sempre que uma CDN estivesse inacessível, porque os ícones festivos vinham de uma folha de estilos Font Awesome alojada numa CDN de terceiros já descontinuada, carregada em todas as páginas da loja e do back office; a 2.0 usa emojis e símbolos de texto nativos e não carrega nada de fora. Os flocos a cair bloqueavam cliques, sobretudo no telemóvel. Um tamanho escrito com vírgula decimal era rejeitado sem qualquer explicação. O markup da neve era impresso dentro do <head>, deixando aos navegadores a tarefa de reparar o documento; agora fica mesmo antes de </body>. E não havia forma de terminar a época — daí as datas.
Compatibilidade
PrestaShop 1.7, 8 e 9, em oito idiomas: neerlandês, inglês, francês, alemão, italiano, polaco, espanhol e turco. A animação assenta apenas em transform, pelo que fica no fio de composição do navegador — sem cálculos de layout e sem solavancos, mesmo com 48 flocos. Não há tabelas na base de dados, não há overrides nem alterações ao núcleo, e desinstalar apaga todas as definições, incluindo restos da 1.x, deixando a sua loja exatamente como estava.
Perguntas frequentes
Vai tornar a minha loja mais lenta?
Não. É uma folha de estilos pequena e cerca de um kilobyte de markup, animados apenas com transform, sem nada a ser pedido a um servidor externo.
Tenho de me lembrar de a desligar em janeiro?
Não — é precisamente para isso que servem as datas da época. Defina uma vez o primeiro e o último dia e a neve começa e pára sozinha.
Precisa de JavaScript?
Nada disso. Sem JavaScript, sem jQuery, sem ficheiros ou tipos de letra externos, o que também o torna amigo do GDPR, uma vez que nada é pedido a servidores de terceiros.
A neve pode bloquear os meus botões?
Não. Todas as camadas de neve usam pointer-events: none, por isso os cliques e a seleção de texto passam diretamente através dela.
Posso escondê-la no telemóvel?
Sim, um único interruptor limita o efeito a ecrãs com mais de 768 px de largura.
E os visitantes sensíveis ao movimento?
Não veem neve nenhuma. O módulo respeita automaticamente a definição de sistema prefers-reduced-motion.
O meu tema é personalizado e não aparece nada — e agora?
Associe o módulo a outro hook de apresentação em Design → Posições, ou coloque {widget name='snowflakesmeg'} no seu template. Continua a ser apresentado apenas uma vez por página.
Comentários (2)
Não é possível enviar a apreciação da sua avaliação.
Denunciar comentário
Denúncia enviada
O seu relatório não pode ser enviado