# 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… - Página: - Idioma: pt - Atualizado em: 2026-09-03 - Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfmobilenav/index.md), [en](https://www.datafirefly.com/en/documentation/dfmobilenav/index.md), [es](https://www.datafirefly.com/es/documentation/dfmobilenav/index.md), [de](https://www.datafirefly.com/de/documentation/dfmobilenav/index.md), [it](https://www.datafirefly.com/it/documentation/dfmobilenav/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfmobilenav/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfmobilenav/index.md) - Índice: ## 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).