Tudo o que quer saber antes de instalar.
Uma análise detalhada de como o Módulo Carrossel de Categorias PrestaShop 8/9: Categorias na Página Inicial funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.
Uma montra de categorias configurável, não um bloco fixo
O bloco de categorias nativo do PrestaShop mostra uma lista de links ou miniaturas no formato imposto pelo tema. Aqui, cada montra configura-se num formulário com separadores: disposição, número de linhas, colunas no computador, tablet e telemóvel, espaçamento, largura do contentor, fundo da secção. Escolhe as categorias à mão e ordena-as arrastando e largando, ou deixa o módulo mostrar as subcategorias de uma secção, com um limite. Na instalação é criada uma montra de demonstração na página inicial para ver logo o resultado.
Imagem, nome e texto personalizados para cada categoria
Uma categoria chama-se muitas vezes «Roupa de senhora» no catálogo quando, na página inicial, se quer mostrar «Nova coleção». Por isso, cada categoria adicionada a uma montra aceita um nome personalizado, uma descrição curta, uma imagem própria e uma imagem para telemóvel com um enquadramento mais apertado, um selo, um texto de botão e um link para uma listagem filtrada ou uma landing page. Sem personalização, o módulo usa a imagem e o nome da categoria. Para a imagem, escolhe automaticamente o formato PrestaShop mais nítido disponível, porque o formato category_default do PrestaShop 8 tem apenas 141 x 180 px.
Carrossel, grelha ou masonry, em 1 a 3 linhas
O carrossel faz deslizar 1, 2 ou 3 linhas em conjunto, com setas, pontos, ciclo contínuo e reprodução automática opcional. No telemóvel deixa ver parte do cartão seguinte para mostrar que a linha se pode deslizar. A grelha coloca as categorias em colunas regulares, com um limite de linhas opcional. O masonry propõe três estilos: alturas naturais das imagens, alturas alternadas ou primeira categoria em destaque em 2 x 2. Quando uma linha tem menos categorias do que colunas, alinha-se com o título em vez de ficar encostada à esquerda.
5 predefinições para começar, 81 opções para afinar
A predefinição «Círculos» dá num clique imagens redondas ao estilo das stories do Instagram, 6 por linha no computador. «Sobreposição» põe o texto sobre a imagem com um degradé, «Banners» mostra 2 mosaicos grandes com os nomes em maiúsculas e «Cartões» coloca cada categoria num cartão branco com descrição e link. A predefinição preenche as opções de design ao guardar e depois tudo continua editável: cores, tamanhos, arredondamentos, bordas, sombras, 6 efeitos ao passar o rato, posição do texto, estilo do botão e do selo. Um campo de CSS personalizado, limitado ao identificador da montra, cobre os últimos pormenores.
Na página inicial, nas páginas de categoria ou em qualquer lugar
Cada montra escolhe o seu hook numa lista ou num campo livre: um nome de hook desconhecido é criado e registado automaticamente, e o módulo retira-se dos hooks que já não são usados. A fonte «categoria a ser vista» mostra em cada página de categoria as suas próprias subcategorias, com uma só montra para todo o catálogo. O hook displayDfCategoryShowcase e a etiqueta widget permitem colocar uma montra específica em qualquer template. As datas de início e fim e a restrição por grupo de clientes servem campanhas sazonais e seleções B2B.
Rápido e acessível
O carrossel usa o deslizamento nativo do navegador (CSS scroll-snap), controlado por cerca de 3 KB de JavaScript comprimido, sem jQuery. As imagens enviadas são geradas em 480 e 960 px e servidas com srcset e sizes calculados a partir das suas colunas. A primeira imagem carrega de imediato e as seguintes em lazy loading, com atributos width e height. O resultado fica na cache Smarty e esvazia-se sozinho quando uma categoria ou um produto muda. Quanto à acessibilidade: a secção é identificada pelo seu título, botões e pontos são anunciados aos leitores de ecrã, a navegação por teclado tem foco visível, a reprodução automática pára no foco e prefers-reduced-motion é respeitado.
Ainda não existem avaliações.