Imagem ao Passar o Rato e Etiquetas Automáticas: guia de configuração
Instalar e configurar a imagem ao passar o rato e as etiquetas automáticas Novo, Promoção e Stock baixo.
Este guia explica como instalar e configurar o módulo Imagem ao Passar o Rato e Etiquetas Automáticas para PrestaShop 8 e 9. O módulo mostra a segunda imagem do produto ao passar o rato nas listagens e aplica automaticamente etiquetas Novo, Promoção e Stock baixo segundo regras que define, sem sobrepor o seu tema.
Instalação
A instalação faz-se como para qualquer módulo PrestaShop:
- A partir do back-office, vá a Módulos > Gestor de módulos.
- Clique em Instalar um módulo e carregue o arquivo ZIP do módulo.
- Terminada a instalação, clique em Configurar para abrir a página de definições.
O módulo regista o hook actionFrontControllerSetMedia e carrega os seus assets (CSS e JavaScript) apenas nas páginas de listagem e na página de produto. Nenhum ficheiro de template é sobreposto.
Configuração da imagem ao passar o rato
O primeiro bloco de configuração controla a substituição de imagem ao passar o rato:
- Mostrar a segunda imagem ao passar o rato: ativa ou desativa o efeito. Os produtos que só têm uma imagem são ignorados automaticamente.
- Efeito de transição: Fundido, Fundido + zoom ou Instantâneo.
- Posição das etiquetas: canto onde as etiquetas aparecem (cima esquerda, cima direita, baixo esquerda, baixo direita). Esta definição é comum a todas as etiquetas.
A imagem ao passar o rato corresponde à segunda imagem do produto segundo a ordem de posição definida no separador Imagens da ficha de produto. Para mudar a imagem apresentada ao passar o rato, reordene simplesmente as imagens do produto.
As três etiquetas automáticas
Cada etiqueta pode ser ativada de forma independente, com a sua própria designação multilingue, a sua cor de fundo e a sua cor de texto.
Etiqueta « Novo »
Aparece durante um número de dias configurável depois da data de criação do produto. O valor por defeito retoma a definição PrestaShop PS_NB_DAYS_NEW_PRODUCT. Defina a duração pretendida no campo Produto considerado novo durante (dias).
Etiqueta « Promoção »
Aparece quando um produto está marcado « Em promoção » ou quando um preço específico com desconto está ativo para o contexto do visitante (loja, moeda, país, grupo de clientes e datas de validade). A opção Mostrar a percentagem de desconto substitui a designação pelo valor, por exemplo -20 %, quando o desconto é expresso em percentagem.
Etiqueta « Stock baixo »
Aparece quando a quantidade disponível do produto é estritamente superior a 0 e inferior ou igual ao limiar de stock baixo que define. A quantidade é lida na tabela stock_available com resolução multiloja (a loja atual tem prioridade sobre o grupo de lojas).
Designações multilingues
As designações Novo, Promoção e Stock baixo são fornecidas por defeito em francês, inglês, espanhol, alemão e italiano. Cada designação é editável idioma a idioma a partir da página de configuração: selecione o idioma no seletor do campo e introduza o texto pretendido. Para o português, preencha por exemplo « Novo », « Promoção » e « Últimas unidades ».
Desempenho e compatibilidade
- Uma única chamada AJAX agrupada por página recupera os dados de todos os produtos visíveis (até 120 produtos por lote).
- A imagem ao passar o rato é carregada em lazy load, apenas ao primeiro passar do rato.
- O script é em JavaScript vanilla, sem dependência de jQuery.
- O módulo deteta as miniaturas de produto em JavaScript: é compatível com o tema classic e os temas filhos, e readapta-se automaticamente depois da navegação por facetas e da paginação AJAX.
- Em telemóvel tátil, a substituição de imagem ao passar o rato é desativada automaticamente.
Resolução de problemas
Ao passar o rato não aparece a segunda imagem. Verifique que o produto tem pelo menos duas imagens no separador Imagens da sua ficha, e que a opção de imagem ao passar o rato está ativada.
Uma etiqueta não aparece. Certifique-se de que a etiqueta está ativada, que a sua designação não está vazia para o idioma atual, e que a condição está preenchida (produto recente, preço específico ativo, ou quantidade abaixo do limiar).
Nada aparece depois de um filtro. O módulo readapta-se depois da navegação por facetas; se o seu tema usar um mecanismo de renderização personalizado, limpe a cache do PrestaShop (Parâmetros avançados > Desempenho) depois da instalação.