Módulo Barra de Navegação Móvel PrestaShop (dfmobilenav)

Apresentação

O DF Mobile Nav acrescenta à sua loja PrestaShop uma barra de separadores fixa no fundo do ecrã, ao estilo das aplicações móveis nativas: início, pesquisa, carrinho, favoritos e conta, com badges de contador atualizados em tempo real.

A barra só aparece abaixo de um ponto de rutura que define (768 px por defeito). Em computador, fica inteiramente oculta e não acrescenta nenhum espaço à página.

Instalação

1. A partir do back-office, abra Módulos → Gestor de módulos e clique em Instalar um módulo.
2. Carregue o ficheiro dfmobilenav-1.0.0.zip.
3. Clique em Configurar depois de terminada a instalação.

O módulo regista automaticamente os hooks necessários (actionFrontControllerSetMedia e displayBeforeBodyClosingTag). Não é necessária nenhuma alteração ao seu tema.

Configuração

Escolha dos separadores

Estão disponíveis cinco separadores e cada um ativa-se ou desativa-se de forma independente:

• Início: ligação para a página inicial da loja.
• Pesquisa: abre um campo de pesquisa em ecrã inteiro ou redireciona para a página de pesquisa (ver abaixo).
• Carrinho: ligação para o carrinho, com badge do número de artigos.
• Favoritos: ligação para a lista de desejos, com badge do número de produtos guardados.
• Conta: ligação para a área de cliente.

Se nenhum separador estiver ativado, a barra não é renderizada de todo.

Comportamento da pesquisa

São propostos dois modos:

• Pesquisa em ecrã inteiro (por defeito): abre-se um campo de introdução por cima da página atual, sem a abandonar. Fecho pelo botão ou pela tecla Esc.
• Redirecionamento para a página de pesquisa: o separador comporta-se como uma ligação clássica para a página de pesquisa nativa.

Ocultação ao deslocar

Quando esta opção está ativada, a barra desaparece quando o visitante desloca para baixo e reaparece assim que sobe. O comportamento respeita a preferência de sistema de movimento reduzido.

Ponto de rutura para telemóvel

Largura máxima, em píxeis, abaixo da qual a barra é apresentada. O valor por defeito é 768 px. Os valores aceites vão de 320 a 1600 px; qualquer valor fora deste intervalo é reposto em 768.

Cores

Quatro cores são configuráveis em formato hexadecimal:

• Cor de fundo da barra (branco por defeito).
• Cor dos ícones e das designações em repouso (cinzento por defeito).
• Cor do separador ativo (preto tinta por defeito).
• Cor dos badges de contador (vermelho por defeito).

Badges de contador

Carrinho

O badge mostra o número de artigos presentes no carrinho do visitante. É atualizado em direto a cada adição, sem recarregar a página, em reação ao evento updateCart do PrestaShop. Acima de 99 artigos, o badge mostra « 99+ ».

Favoritos

O badge dos favoritos assenta no módulo nativo de lista de desejos (blockwishlist) e mostra o número de produtos guardados pelo cliente autenticado. É atualizado depois de uma interação com os botões da lista de desejos.

Se o módulo de lista de desejos estiver desativado na sua loja, o separador Favoritos é ocultado automaticamente, qualquer que seja a configuração: nada a fazer do seu lado.

O contador dos favoritos só aparece para os clientes autenticados, já que a lista de desejos nativa está ligada à conta de cliente.

Separador ativo

O separador correspondente à página atual é destacado automaticamente e recebe o atributo de acessibilidade de página atual. A deteção cobre a página inicial, a pesquisa, o carrinho e o funil de encomenda, a área de cliente e as suas subpáginas (identidade, moradas, histórico, notas de crédito, vales de desconto), bem como a lista de desejos.

Compatibilidade com telemóveis

• Zona segura do iOS: a barra respeita a zona segura inferior dos iPhone recentes e nunca se sobrepõe à barra de início.
• Zoom do Safari: o campo de pesquisa é dimensionado para impedir o zoom automático do Safari ao receber o foco.
• Espaço no fundo da página: é acrescentado automaticamente ao fundo do documento um espaço equivalente à altura da barra, para que nenhum conteúdo fique oculto.

Acessibilidade

Os separadores são ligações nativas, acessíveis por teclado, com um anel de foco visível. O separador da página atual é anunciado às tecnologias de apoio. Os ícones são marcados como decorativos e a designação textual transporta a informação. A animação de ocultação ao deslocar é desativada se o visitante tiver pedido uma redução das animações no seu sistema.

Desempenho

O módulo não carrega nenhum tipo de letra de ícones, nenhuma imagem e nenhuma biblioteca JavaScript. Os ícones são SVG a traço renderizados diretamente na página, o script é escrito em JavaScript nativo e pesa alguns kilobytes. A atualização dos contadores é feita por uma chamada leve que devolve unicamente dois números.

Perguntas frequentes

O módulo modifica os ficheiros do meu tema?

Não. Insere-se pelos hooks padrão do PrestaShop, sem sobreposição nem override de template. A barra tem o seu próprio estilo, autónomo e independente da sua folha de estilos.

A barra entra em conflito com um botão de chat ou de voltar ao topo?

A barra está posicionada no fundo do ecrã com um nível de empilhamento moderado. Se outro elemento flutuante se sobrepuser, desloque-o para cima cerca de 60 píxeis através do CSS do seu tema.

Posso mostrar a barra em tablet?

Sim: aumente o ponto de rutura, por exemplo para 1024 px, para cobrir também os tablets em modo retrato.

O módulo é compatível com multiloja?

Sim. As definições são guardadas ao nível da configuração do PrestaShop e respeitam o contexto de loja.

É compatível com o PrestaShop 9?

Sim. O módulo foi concebido e validado do PrestaShop 8.0 ao 9.x.

Registo de versões

1.0.0 (12 de julho de 2026)

• Barra de separadores fixa no fundo do ecrã com cinco separadores ativáveis.
• Badges de contador em direto no carrinho e nos favoritos.
• Pesquisa em ecrã inteiro ou redirecionamento, à escolha.
• Ocultação da barra ao deslocar para baixo.
• Destaque automático do separador da página atual.
• Personalização completa das cores e do ponto de rutura.
• Consideração da zona segura do iOS.
• Traduções FR, EN, ES, DE, IT (as designações dos separadores traduzem-se para português em Internacional > Traduções).