DataFirefly Voltar ao Topo: documentação
Instalar e configurar o botão «Voltar ao topo» no PrestaShop 8 e 9.
O módulo DataFirefly Voltar ao Topo acrescenta um botão flutuante que leva os visitantes ao topo da página com um só clique. Este guia cobre a instalação e todas as definições disponíveis.
Instalação
- No back-office, vá a Módulos > Gestor de módulos.
- Clique em Instalar um módulo (canto superior direito) e carregue o ficheiro
dfbacktotop.zip. - Terminada a instalação, clique em Configurar.
O módulo regista-se automaticamente nos hooks actionFrontControllerSetMedia e displayFooter. Não é necessária qualquer intervenção manual nos hooks.
Configuração
A página de configuração tem dois separadores: Comportamento e Aspeto.
Separador Comportamento
- Limiar de ativação (px) — número de pixels de deslocamento a partir do qual o botão aparece. Valor por omissão:
300. - Deslocamento suave — ativa a subida animada e progressiva. Desativado, o regresso ao topo é instantâneo.
- Mostrar no telemóvel — mostra ou oculta o botão nos ecrãs com menos de 768 px de largura.
Separador Aspeto
- Posição — em baixo à direita ou em baixo à esquerda.
- Ícone — divisa, seta ou triângulo (ícones SVG integrados).
- Tamanho do botão — diâmetro do botão, de 24 a 120 px.
- Raio dos cantos — de 0 % (quadrado) a 50 % (círculo).
- Margem horizontal / vertical — distância em relação aos limites do ecrã.
- Cor de fundo, Cor de fundo (ao passar o rato), Cor do ícone — códigos hexadecimais.
- Sombra — acrescenta uma sombra suave por baixo do botão.
- z-index — aumente este valor se o botão ficar por baixo de outros elementos fixos (barra de cookies, chat, etc.).
Cada definição é validada ao gravar: as cores têm de ser códigos hexadecimais válidos, e tanto o tamanho como o raio estão limitados para evitar qualquer apresentação partida.
Formas do botão
A forma é inteiramente controlada pelo raio dos cantos:
50 %— círculo perfeito.20 %— quadrado de cantos arredondados.0 %— quadrado sem arredondamento.
Compatibilidade com o seu tema
O botão é injetado através do hook displayFooter, presente no tema Classic e na grande maioria dos temas PrestaShop. Se o seu tema personalizado não chamar este hook, o botão não aparece: basta acrescentar a chamada ao hook no template de rodapé do tema.
Desempenho e acessibilidade
- JavaScript nativo de cerca de 1,5 kB, sem jQuery nem dependências externas.
- Deteção do deslocamento através de
requestAnimationFramee de um listener passivo, sem impacto percetível nos Core Web Vitals. - Botão nativo com atributo
aria-labele foco de teclado visível. - Respeito pela preferência do sistema
prefers-reduced-motion: o deslocamento passa a instantâneo se o utilizador tiver reduzido as animações. - Não recolhe qualquer dado pessoal, pelo que é compatível com o RGPD por conceção.
FAQ
O botão não aparece, o que devo verificar?
Verifique se o seu tema implementa o hook displayFooter e se deslocou a página o suficiente para ultrapassar o limiar de ativação (300 px por omissão). Limpe também o cache do PrestaShop depois da instalação.
Posso usá-lo em multiloja?
Sim. As definições são guardadas através de Configuration e aplicam-se conforme o contexto de loja ativo.
O módulo é mesmo gratuito?
Sim, com licença gratuita e sem qualquer limitação de funcionalidades.
As etiquetas do botão estão em português?
O botão não apresenta texto visível: só o atributo aria-label, lido pelos leitores de ecrã, depende das traduções do módulo. Se o pacote não incluir o português, indique a tradução em Internacional > Traduções para que o botão seja anunciado em português.