Banner de Categoria: guia completo

Apresentação e requisitos

O Banner de Categoria insere visuais na grelha de produtos das suas páginas de categoria, na posição que escolher. Indica a categoria, o número do produto a seguir ao qual o banner deve aparecer e a imagem a usar em cada idioma. Do resto trata o módulo, mesmo depois de um filtro por facetas ou de uma mudança de página.

• Compatível com PrestaShop 8.0 a 9.x, tema Classic e temas derivados.
• PHP 7.4 a 8.3.
• Multiloja e multilingue (fr, en, es, de, it, nl, pl, pt).
• Sem overrides, sem alterações de templates, sem tarefas CRON.
• O HTML do banner é gerado no servidor por um template Smarty; o JavaScript limita-se a inseri-lo no sítio certo, sem jQuery nem bibliotecas de terceiros.

Instalação

1. Transfira o ficheiro datafireflycategorybanner.zip a partir da sua conta de cliente.
2. No back office, abra Módulos > Gestor de módulos.
3. Clique em Carregar um módulo e largue o ficheiro.
4. Clique em Configurar para aceder à lista de banners.

Na instalação, o módulo cria as suas três tabelas (banners, traduções, associação a lojas), cria a pasta /img/datafireflycategorybanner/ e regista os seus hooks.

Criar um banner

Na página de configuração, clique em Adicionar um novo banner. O formulário reúne as definições seguintes.

Segmentação

• Categoria: a categoria onde o banner aparece. A lista reproduz a árvore da loja, com as categorias desativadas assinaladas.
• Aplicar às subcategorias: estende o banner a todas as subcategorias da categoria escolhida, seja qual for a profundidade.
• Depois do produto número: o banner é inserido a seguir a este produto da listagem. O valor 4 coloca o banner depois do quarto produto apresentado.

Aspeto e ligação

• Ligação do banner: URL de destino, absoluto (https://…) ou a começar por uma barra (/novidades). Deixe vazio para um banner sem ligação.
• Classe CSS: classes de grelha aplicadas à célula do banner, por exemplo col-12 ou col-12 col-md-6. Deixe vazio para reutilizar automaticamente as classes das células de produto do seu tema.
• CSS personalizado: declarações aplicadas apenas a este banner, por exemplo border-radius: 12px; padding: 10px;.

Agendamento e estado

• Data de início e Data de fim: janela de exibição, no formato AAAA-MM-DD HH:MM:SS. Um campo vazio significa sem limite desse lado.
• Ativo: mostra ou suspende o banner sem o eliminar.
• Associação a lojas: em multiloja, marque as lojas em causa.

Imagens por idioma

Os campos Imagem do banner e Texto alternativo existem para cada idioma ativo. Os separadores de idioma no topo do formulário mostram os campos do idioma selecionado. Quando já existe uma imagem, aparece uma pré-visualização acompanhada de um interruptor Eliminar a imagem que afeta apenas esse idioma.

Como a posição é calculada

A posição exprime-se em número de produtos e aplica-se a cada página da listagem. Um banner definido em 4 aparece a seguir ao quarto produto da página atual, esteja o visitante na página 1 ou na página 3.

Vários banners podem visar a mesma categoria, cada um na sua posição. Quando dois banners partilham a mesma posição, são inseridos um a seguir ao outro, pela ordem de gravação. Se a posição ultrapassar o número de produtos apresentados na página, o banner é simplesmente ignorado nessa página, sem deslocar os restantes.

Por predefinição, o banner assume a largura de uma célula de produto: o módulo lê as classes de grelha do primeiro produto da lista e aplica-as ao banner. Preencha o campo Classe CSS para forçar outra largura, por exemplo um banner a toda a largura com col-12.

Agendar uma campanha

Indique uma data de início e uma data de fim para que um banner apareça e desapareça sozinho. É a ferramenta certa para preparar saldos, Black Friday ou uma campanha de fim de ano com semanas de antecedência.

• Apenas data de início: o banner aparece nessa data e fica visível a seguir.
• Apenas data de fim: o banner é exibido de imediato e termina nessa data.
• Ambas as datas: o banner só é visível dentro dessa janela.
• Sem datas: o banner é permanente.

Cobrir uma árvore completa

A opção Aplicar às subcategorias evita recriar o mesmo banner em cada secção. Definido numa categoria pai, o banner aparece nessa categoria e em todas as suas descendentes.

A resolução assenta na árvore aninhada nativa do PrestaShop (colunas nleft e nright), pelo que não custa uma consulta adicional por página. Se mover categorias na árvore, o PrestaShop recalcula esses valores e o âmbito acompanha automaticamente.

Imagens e idiomas

Cada banner aceita um visual e um texto alternativo por idioma, o que permite adaptar uma mensagem ou um preço ao mercado. Se um idioma não recebeu o seu próprio visual, o módulo mostra o do idioma predefinido da loja em vez de esconder o banner.

As dimensões da imagem são lidas no carregamento e escritas nos atributos width e height do HTML, o que evita o deslocamento do layout durante o carregamento. Os ficheiros são renomeados com um sufixo aleatório e guardados em /img/datafireflycategorybanner/.

Multiloja

Quando a funcionalidade multiloja está ativa, o formulário mostra um bloco Associação a lojas. Um banner só aparece nas lojas marcadas, e a lista do back office mostra apenas os banners visíveis no contexto de loja atual.

Se não marcar nenhuma loja, o módulo associa o banner ao contexto atual, para nunca criar um banner órfão.

Filtros por facetas, ordenação e paginação

No PrestaShop 8 e 9, os filtros por facetas, a ordenação e a paginação recarregam a lista de produtos por AJAX sem recarregar a página. O módulo escuta o evento updateProductList do PrestaShop, retira os banners anteriores e volta a inseri-los nas posições certas após cada atualização do DOM.

O CSS e o JavaScript são carregados apenas nas páginas de categoria, e só quando a categoria atual tem pelo menos um banner ativo e apresentável.

Atualizar a partir da versão 1.0.0

Basta instalar o novo ficheiro por cima do antigo a partir do gestor de módulos. O script de atualização trata de:

• adicionar as colunas de âmbito, agendamento e dimensões da imagem;
• criar a tabela de associação a lojas e transpor para ela a loja original de cada banner;
• mover as imagens existentes de views/img/banners/ para /img/datafireflycategorybanner/ e ler as suas dimensões;
• remover um hook que deixou de ser necessário.

Os seus banners, as suas posições e os seus visuais são preservados.

FAQ e resolução de problemas

O banner não aparece na página de categoria

Verifique por esta ordem: o banner está ativo; a data de hoje está dentro da janela de agendamento; a categoria visada é a que está a ser consultada, ou o âmbito às subcategorias está ligado; o idioma apresentado tem imagem, ou o idioma predefinido tem uma; em multiloja, a loja atual está marcada. Por fim, limpe a cache do PrestaShop.

O banner aparece no sítio errado

A posição conta os produtos da página atual. Se a sua listagem mostra 12 produtos por página, um banner na posição 20 não aparecerá em nenhuma. Reduza o valor ou aumente o número de produtos por página.

O banner estraga o layout da grelha

Esvazie o campo Classe CSS para que o banner reutilize as classes das células de produto do seu tema. Para um banner a toda a largura, escreva col-12. Evite misturar classes de sistemas de grelha diferentes.

O banner desaparece depois de filtrar

O módulo volta a ligar-se ao evento updateProductList. Se o seu tema ou um módulo de filtros de terceiros substituir por completo o contentor da lista de produtos sem disparar esse evento, a reinserção não pode acontecer. Contacte o suporte indicando o tema e o módulo de filtros utilizados.

A imagem não é carregada

O módulo aceita ficheiros JPG, PNG, GIF, WebP e SVG até 4 MB. Verifique também se /img/datafireflycategorybanner/ tem permissões de escrita e se as diretivas PHP upload_max_filesize e post_max_size são superiores ao tamanho do ficheiro.

A ligação do banner é recusada

Só são aceites URL que comecem por http://, https:// ou por uma barra. É uma proteção contra a injeção de endereços javascript: ou data:.

O que acontece ao desinstalar?

O módulo elimina as suas tabelas e a pasta /img/datafireflycategorybanner/ com os visuais que contém. Guarde uma cópia das suas imagens se pretender reinstalar mais tarde.