Tudo o que quer saber antes de instalar.
Uma análise detalhada de como o Módulo Slider de Página Inicial PrestaShop 8/9: Banners WebP Rápidos funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.
Uma grelha de hero, não um simples carrossel
Os módulos de slider clássicos mostram uma imagem a seguir à outra e ficam-se por aí. Este reproduz a estrutura de página inicial dos grandes sites de e-commerce: um slider principal que ocupa três quartos da largura, dois banners empilhados à sua direita (catálogo, entrega, serviço) e dois banners promocionais largos por baixo (marcas, ofertas do momento). No telemóvel, a grelha empilha-se de forma limpa numa única coluna. Cada zona é preenchida a partir do mesmo separador do back-office, com uma pré-visualização das imagens no lugar e as respetivas dimensões.
Construído para os Core Web Vitals
Um slider é quase sempre o elemento LCP de uma página inicial, e é aí que a maioria dos módulos falha. Aqui, cada imagem é redimensionada para a largura máxima da sua zona e convertida em WebP logo no carregamento. O primeiro slide é anunciado ao navegador por uma etiqueta link rel preload com fetchpriority high, colocada no head: carrega-se antes mesmo de o CSS ser interpretado. Todas as outras imagens ficam em lazy loading com decoding async, e os atributos width e height guardados em base de dados eliminam qualquer deslocação do layout. O JavaScript do slider pesa cerca de 3 KB, em vanilla, carregado em defer, sem qualquer biblioteca.
Planeie as suas campanhas e o módulo trata do resto
Cada banner aceita uma data de início e uma data de fim, ao dia ou à hora. A sua ação de Natal prepara-se em novembro, publica-se a 1 de dezembro à meia-noite e desaparece na manhã do dia 26, sem que ninguém tenha de entrar no back-office. A cache do módulo regenera-se automaticamente para acompanhar o calendário, e qualquer gravar no back-office limpa-a de imediato.
O telemóvel tratado como um canal a sério, não como um ecrã reduzido
Uma imagem panorâmica de 1400 pixels fica ilegível quando reduzida num ecrã de telemóvel. Por isso, cada slide aceita uma imagem móvel dedicada, enquadrada para o formato vertical e servida abaixo dos 768 px através da etiqueta picture. O pré-carregamento acompanha: duas etiquetas preload com atributos media, e cada aparelho descarrega apenas a sua variante. E se uma zona não fizer sentido no telemóvel, um interruptor na configuração desliga-a por completo: as imagens passam a lazy e nunca são pedidas pelo navegador. São kilobytes realmente poupados, não apenas ocultados.
Limpo também do lado do servidor
A renderização do hero fica em cache Smarty por idioma e por loja: em regime normal, mostrar as cinco zonas não custa uma única consulta SQL. Quando a cache se regenera, uma única consulta agrupada obtém todos os banners. O CSS e o JS só são registados no controlador da página inicial e o resto da loja não carrega um byte. O módulo respeita as normas do PrestaShop: ObjectModel, controlador de administração dedicado, multiloja e multilingue nativos e desinstalação limpa.
Ainda não existem avaliações.