Category Showcase: documentação do carrossel de categorias PrestaShop

Instalação

No back office, abra Módulos > Gestor de módulos, clique em «Carregar um módulo» e envie o ficheiro dfcategoryshowcase.zip. O módulo é compatível com PrestaShop 8.0 a 9.x.

Na instalação, o módulo cria as suas tabelas, a pasta /img/dfcategoryshowcase/ para as imagens enviadas, o hook displayDfCategoryShowcase e uma montra de demonstração: as subcategorias da categoria Início, em carrossel, na página inicial. Abra a sua loja para ver o resultado e depois altere ou elimine esta montra.

O módulo gere-se em Design > Category Showcase (o botão «Configurar» do módulo também leva lá).

Criar uma montra

Clique em «Adicionar uma montra». O separador Geral contém:

• Nome interno: visível apenas no back office.
• Hook: o local de apresentação (ver abaixo).
• Disposição: carrossel, grelha ou masonry.
• Predefinição de design: aplica um estilo completo ao guardar (ver abaixo).
• Categorias apresentadas: a fonte das categorias.
• Título, subtítulo, texto e link «Ver tudo»: por idioma.

As três fontes

• Escolhidas à mão: depois de guardar, o módulo leva-o ao ecrã de categorias da montra. Adicione-as uma a uma e reordene-as arrastando e largando.
• Subcategorias de uma categoria principal: escolha a categoria principal e, se necessário, um número máximo. A lista segue o seu catálogo.
• Subcategorias da categoria a ser vista: use com displayHeaderCategory ou displayFooterCategory. Cada página de categoria mostra as suas próprias subcategorias. Uma categoria sem subcategorias não mostra nada.

Nos dois modos de subcategorias, adicionar uma categoria no ecrã de categorias serve apenas para a personalizar. Desativá-la oculta-a da montra.

Personalizar uma categoria

Na lista de montras, clique em «Categorias» e adicione ou edite uma categoria. Cada campo vazio assume o valor da categoria do PrestaShop:

• Imagem personalizada: JPG, PNG, WebP ou GIF. O módulo gera cópias de 480 e 960 px, servidas automaticamente aos ecrãs pequenos.
• Imagem para telemóvel: opcional, apresentada abaixo de 768 px. Útil para um recorte mais apertado.
• Nome e descrição curta: as quebras de linha da descrição são mantidas.
• Selo: por exemplo Novo, Promoção ou -30%.
• Texto do botão e link: o link pode apontar para uma listagem filtrada ou uma landing page. Só são aceites links http(s), relativos, âncoras, mailto: e tel:.
• Classe CSS: adicionada ao cartão.

A mesma categoria só pode ser adicionada uma vez por montra.

Design

Predefinições

O campo «Predefinição de design» do separador Geral propõe Minimalista, Cartões, Sobreposição, Círculos e Banners. Ao guardar, a predefinição substitui as opções que abrange (imagem, cartão, textos, botão, colunas). Depois o campo volta a «Manter as minhas definições» e todas as opções continuam editáveis.

Separadores de definições

• Disposição: linhas (1 a 3), colunas no computador (1 a 8), tablet (1 a 6) e telemóvel (1 a 4), espaçamento, limite de linhas para grelha e masonry, estilo masonry, contentor (coluna do tema, delimitado com largura máxima, largura total), margens e fundo da secção.
• Cabeçalho: mostrar o título, etiqueta (H2 recomendado na página inicial), alinhamento, cores e tamanhos, posição e estilo do link «Ver tudo».
• Imagem: formato de imagem do PrestaShop («Automático» escolhe o formato mais nítido com pelo menos 400 px, caso contrário a imagem original), proporção, recorte ou imagem inteira, forma redonda, fundo, lazy loading.
• Cartão: arredondamento, borda, sombra, fundo, espaçamento interior, efeito ao passar o rato, duração da animação.
• Textos: posição (por baixo da imagem, sobre a imagem em cima, ao centro ou em baixo, ou sem texto), véu, tipografia do nome, descrição, contador de produtos.
• Botão e selo, Carrossel, Visibilidade, Avançado: ver as secções seguintes.

Com a forma redonda, o texto fica sempre por baixo da imagem.

Carrossel

As opções do separador Carrossel aplicam-se quando a disposição é «Carrossel»: reprodução automática e intervalo, pausa ao passar o rato, ciclo contínuo, colunas deslizadas por clique, setas (sobre o carrossel, fora em ecrãs grandes ou ao lado do título), cores, pontos de navegação, pré-visualização da categoria seguinte no telemóvel, arrastar com o rato.

Com 2 ou 3 linhas, as categorias preenchem cada coluna de cima para baixo e depois as linhas deslizam em conjunto. A reprodução automática faz pausa ao passar o rato, com o foco do teclado, ao toque, quando o separador do navegador está oculto ou quando o carrossel sai do ecrã. Fica desativada se o visitante pediu ao sistema menos animações.

Onde apresentar uma montra

• displayHome: página inicial.
• displayHeaderCategory e displayFooterCategory: páginas de categoria, acima ou abaixo dos produtos.
• displayDfCategoryShowcase: hook criado pelo módulo, a chamar em qualquer ponto do tema com {hook h='displayDfCategoryShowcase'}.
• Hook personalizado: escolha «Hook personalizado…» e escreva um nome (letras, algarismos, – e _). Um hook inexistente é criado e registado automaticamente. Chame-o com {hook h='oSeuHook'}. Um nome de hook antigo (alias) é guardado com o seu nome real.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} apresenta uma montra específica, seja qual for o seu hook.

Várias montras podem partilhar um hook: são apresentadas pela ordem da lista, que se altera arrastando e largando. O módulo retira-se automaticamente dos hooks que já não são usados.

Visibilidade

• Mostrar a partir de / até: datas no formato AAAA-MM-DD HH:MM:SS. Vazio = sem limite.
• Grupos de clientes: a montra só é apresentada aos grupos assinalados (Visitante, Convidado, Cliente ou os seus grupos B2B). Todos assinalados = sem restrição.
• Ocultar no telemóvel / no computador (separador Avançado): abaixo de 768 px ou a partir de 1024 px.
• Lojas: em multiloja, associe cada montra às lojas pretendidas.

Duplicar uma montra

A ação «Duplicar» da lista copia a montra com as suas categorias, textos, lojas e imagens. A cópia é criada desativada: altere-a e depois ative-a.

CSS personalizado

Cada montra é apresentada em <section id="dfcs-ID">, em que ID é o número apresentado na lista. O campo «CSS personalizado» do separador Avançado só é impresso com essa montra. Exemplo:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Se a mesma montra aparecer duas vezes numa página (hook e widget), a segunda cópia recebe o identificador dfcs-ID-2.

Cache e desempenho

O resultado fica na cache Smarty por montra, idioma, loja e grupo de clientes. A cache é esvaziada a cada gravação no módulo, a cada alteração de categoria e a cada alteração de produto se uma montra mostrar o contador de produtos. O CSS e o JavaScript do módulo só são carregados se houver pelo menos uma montra ativa.

Perguntas frequentes

A montra não aparece

Verifique se a montra está ativa, associada à loja, dentro do seu período de apresentação e aberta ao grupo do visitante. Depois verifique se o tema chama realmente o hook escolhido. Para um hook personalizado, a etiqueta {hook h='...'} tem de estar presente num template.

As imagens estão desfocadas

Deixe o formato de imagem em «Automático» ou envie uma imagem personalizada. O formato category_default do PrestaShop 8 tem apenas 141 x 180 px.

No masonry, a ordem não segue a leitura da esquerda para a direita

Os estilos «alturas naturais» e «alturas alternadas» preenchem as colunas de cima para baixo. Se a ordem da esquerda para a direita importar, use a grelha ou o estilo «primeira categoria em destaque».

Desinstalação

A desinstalação elimina as tabelas do módulo, os seus separadores de administração e a pasta /img/dfcategoryshowcase/ com as imagens enviadas.