Mega Menu e Hambúrguer: guia completo

Apresentação

O módulo Mega Menu e Hambúrguer (datafireflymegamenu) substitui a navegação da sua loja por um sistema completo e configurável: mega-menu multicoluna, menu pendente walker recursivo clássico e menu hambúrguer fluido em telemóvel. Tudo se constrói visualmente no back-office, por arrastar e largar, sem tocar numa linha de código.

Cada menu pode mostrar categorias, produtos (com fotografia e preço), marcas, páginas CMS, ligações personalizadas, blocos HTML livres ou imagens promocionais, organizados em colunas dentro de painéis mega. O módulo é inteiramente multilingue e multiloja, e o elemento correspondente à página visitada é destacado automaticamente.

Compatibilidade

• PrestaShop 8.0 a 9.x
• PHP 7.4 a 8.x
• Monoloja e multiloja
• 5 idiomas fornecidos: FR, EN, ES, DE, IT (e traduzível sem limite, incluindo para português)
• Tema Classic e temas personalizados
• Arquitetura PSR-4 sem dependência Composer

Instalação

1. No back-office, abra Módulos > Gestor de módulos.
2. Clique em Instalar um módulo e selecione o ficheiro datafireflymegamenu.zip.
3. Depois de instalado, clique em Configurar.

Primeiros passos

1. Abra a configuração do módulo. À esquerda, a lista Os meus menus e as Definições do menu; à direita, a Estrutura do menu.
2. Clique em Novo menu, dê-lhe um nome (por idioma), escolha o seu hook de apresentação e o seu layout, e guarde.
3. Na zona Estrutura do menu, clique em Adicionar um elemento raiz e escolha o seu tipo.
4. Arraste e largue os elementos para os reordenar ou aninhar. As posições são guardadas automaticamente.

Definições do menu

O painel Definições do menu controla o comportamento global de um menu:

• Nome do menu: designação interna, traduzível por idioma.
• Hook de apresentação: local onde o menu é renderizado (ver a secção Apresentação e hooks).
• Layout: Mega-menu (painéis com colunas) ou Menu pendente clássico (walker recursivo).
• Ativação: abertura dos submenus ao passar o rato ou ao clicar. Ao passar o rato, um curto prazo de tolerância no fecho evita qualquer cintilação nos movimentos em diagonal.
• Ponto de rutura para telemóvel (px): largura abaixo da qual o menu passa a modo móvel/hambúrguer (991 px por defeito).
• Largura máxima (px): centra a barra na largura escolhida para a alinhar com o contentor do tema (ex. 1140 px). 0 = largura total.
• Barra fixa (sticky): o menu fica fixo no topo durante o deslocamento.
• Painéis mega em largura total: os painéis mega estendem-se por toda a largura da barra.
• Menu hambúrguer em telemóvel: ativa o menu hambúrguer abaixo do ponto de rutura.
• Títulos de colunas retráteis: transforma os títulos de colunas dos painéis mega em acordeões fechados por defeito, em telemóvel, em PC ou em ambos (ver a secção dedicada).
• Ativado: mostra ou oculta o menu no front-office.
• Lojas (multiloja): seleciona as lojas em que o menu é difundido.

Construir a árvore (arrastar e largar)

A estrutura de um menu constrói-se na zona Estrutura do menu. Cada linha representa um elemento, com uma pega de deslocamento, uma pastilha que indica o seu tipo e botões de ação.

• Reordenar: agarre a pega e desloque o elemento verticalmente.
• Aninhar: largue um elemento dentro de outro para o tornar um subelemento (aninhamento ilimitado).
• Adicionar um subelemento: botão dedicado em cada linha.
• Modificar / Eliminar: ícones em cada linha. A eliminação de um elemento elimina também os seus subelementos.

Tipos de elementos

Cada elemento tem um tipo que determina o seu conteúdo e a sua ligação. A janela de edição adapta automaticamente os campos disponíveis ao tipo escolhido:

• Ligação personalizada: um URL livre, traduzível por idioma.
• Categoria: ligação para uma categoria da loja, com imagem e contador de produtos em opção.
• Árvore de categorias (auto): gera automaticamente as subcategorias (ver secção dedicada).
• Produto: ligação para uma ficha de produto, com fotografia de capa e preço em opção.
• Marca: ligação para uma marca; Todas as marcas: ligação para a página das marcas.
• Fornecedor: ligação para um fornecedor.
• Página CMS e Categoria CMS: ligações para os seus conteúdos editoriais.
• Bloco HTML / CMS: conteúdo HTML livre, ideal para uma promoção ou um texto enriquecido.
• Imagem / promoção: uma imagem clicável (com URL).
• Etiqueta: um simples título não clicável, útil como cabeçalho de coluna.
• Separador: um traço de separação, horizontal nos painéis pendentes e mega, vertical entre os elementos da barra.

Para cada elemento, pode ainda definir: uma designação, um badge colorido (texto + cor), um ícone Material, uma classe CSS personalizada, a abertura num novo separador, e a visibilidade por dispositivo (telemóvel, tablet, desktop).

Opções de apresentação: imagens, preços e contadores

Consoante o tipo escolhido, a janela de edição propõe um bloco Opções de apresentação:

• Mostrar a imagem (categoria, árvore, produto): mostra a imagem da categoria ou a fotografia de capa do produto em miniatura no menu. Desmarque para um menu 100 % texto. Uma imagem carregada manualmente no elemento tem sempre prioridade.
• Mostrar o preço (produto): mostra o preço do produto, formatado segundo a moeda e o idioma do visitante, à direita da designação.
• Mostrar o contador de produtos (categoria, árvore): mostra numa pastilha o número de produtos ativos da categoria, subcategorias incluídas.
• Acrescentar uma ligação « Ver tudo » (árvore): acrescenta no fim da lista uma ligação para a categoria raiz da árvore.

Mega-menu: colunas, imagens e blocos HTML

Para transformar um submenu em painel mega, abra o elemento pai e defina Apresentação do submenu como Mega panel (colunas). Defina depois o número de colunas.

Cada filho direto do pai torna-se então uma coluna do painel. Pode ajustar a largura de cada coluna através do seu campo Largura de coluna (span), e colocar lá subligações, um bloco HTML ou uma imagem promocional.

Títulos de colunas retráteis

Num catálogo profundo, um painel mega pode ficar muito longo, em particular em telemóvel, onde todas as colunas se empilham umas sob as outras. A opção Títulos de colunas retráteis, nas Definições do menu, transforma cada título de coluna num acordeão fechado por defeito.

O visitante vê então apenas a lista dos títulos de colunas, em geral as suas subcategorias principais, e desdobra unicamente a rubrica que lhe interessa. Um chevron indica o estado aberto ou fechado, e um clique no título desdobra ou recolhe a sua lista em vez de seguir a ligação.

Estão disponíveis quatro valores:

• Desativado: comportamento histórico, as colunas estão sempre desdobradas.
• Apenas telemóvel: acordeões abaixo do ponto de rutura, colunas desdobradas em PC.
• Apenas PC: acordeões acima do ponto de rutura, colunas desdobradas em telemóvel.
• Telemóvel e PC: acordeões nos dois modos.

Árvore de categorias automática

O tipo Árvore de categorias (auto) evita qualquer introdução manual: gera sozinho as suas subcategorias a partir de uma categoria raiz, até ao nível definido pelo campo Subníveis.

As suas Opções de apresentação permitem ativar ou não as imagens de categorias (miniaturas), o contador de produtos por categoria e uma ligação « Ver tudo » que aponta para a categoria raiz, acrescentada no fim da lista.

Associe este tipo a uma apresentação Mega panel para obter, em poucos segundos, um mega-menu « Loja » completo e sempre atualizado com o seu catálogo.

Multilingue e multiloja

A designação, o URL personalizado, o badge e o conteúdo HTML de cada elemento são traduzíveis através dos separadores de idioma da janela de edição. O nome do menu é também multilingue.

Em multiloja, cada menu é associado a uma ou várias lojas a partir das suas definições. Um mesmo menu pode portanto ser difundido apenas em certas lojas.

Apresentação, hooks e posição

Um menu aparece através do hook escolhido nas suas definições. Os hooks suportados são:

• displayNav2: barra de navegação principal (por defeito)
• displayTop: topo da página, ao lado do logótipo e da barra de pesquisa
• displayNavFullWidth: faixa de largura total
• displayFooter: rodapé
• displayLeftColumn e displayRightColumn: colunas laterais

Em displayTop, a barra adapta-se automaticamente à largura do seu conteúdo para conviver com o logótipo e a barra de pesquisa do tema na mesma linha; os painéis mega de largura total são aí centrados no ecrã.

Página ativa e navegação

O elemento de menu correspondente à página visitada, e o seu elemento raiz, recebem automaticamente a classe is-active e são destacados segundo o estilo de passagem do rato do menu. A deteção é feita do lado do navegador (correspondência exata do URL e depois melhor correspondência de secção), o que se mantém perfeitamente compatível com a colocação em cache da renderização.

Modo móvel e menu hambúrguer

Abaixo do ponto de rutura definido, o menu passa automaticamente a modo móvel. Se a opção Menu hambúrguer em telemóvel estiver ativa, a navegação assume a forma de um menu hambúrguer: painel deslizante (slide-in), submenus em acordeão, fundo escurecido (backdrop) e bloqueio do deslocamento da página.

O módulo respeita a preferência de sistema movimento reduzido (prefers-reduced-motion) desativando as animações para os utilizadores em causa.

Desempenho e cache

A renderização de cada menu é guardada em cache pelo Smarty, com uma chave que tem em conta o menu, o idioma, a loja, a moeda e o grupo de clientes. Os menus aparecem assim sem recálculo a cada página.

A cache é invalidada automaticamente quando uma categoria, uma página CMS ou uma marca é acrescentada, modificada ou eliminada, bem como a cada gravação de um menu ou de um elemento no back-office. As árvores automáticas, os contadores de produtos e os preços mantêm-se portanto sincronizados com o seu catálogo.

FAQ e resolução de problemas

O menu não aparece no front-office

Verifique que o menu está ativado, que está associado à loja certa, e que o seu hook corresponde a um local realmente apresentado pelo seu tema. Limpe depois a cache do PrestaShop e recarregue em navegação privada.

O hook escolhido não aparece no meu tema

Nem todos os temas implementam todos os hooks. Escolha um hook realmente presente no seu tema (muitas vezes displayNav2 ou displayTop), ou ligue o módulo a um hook personalizado através da página Posições.

O meu mega-menu não mostra colunas

Abra o elemento pai e defina Apresentação do submenu como Mega panel (colunas), defina o número de colunas, e verifique depois que existem elementos filhos: cada filho direto torna-se uma coluna.

As imagens de categorias ou de produtos não aparecem

Verifique que a caixa Mostrar a imagem está marcada nas Opções de apresentação do elemento, que a categoria tem uma imagem (ou o produto uma fotografia de capa), e limpe depois a cache. Para um menu sem imagens, desmarque simplesmente esta opção.

O menu passa para a linha seguinte ou desloca a barra de pesquisa (displayTop)

Desde a versão 1.2.1, a barra adapta-se ao seu conteúdo em displayTop. Se o problema persistir depois da atualização, limpe a cache do PrestaShop: o HTML em cache tem de ser regenerado com as novas classes.

O meu mega-menu é demasiado longo em telemóvel

Ative a opção Títulos de colunas retráteis nas Definições do menu, em modo Apenas telemóvel ou Telemóvel e PC. Os títulos de colunas tornam-se acordeões fechados por defeito: o painel reduz-se a uma lista curta de rubricas que o visitante desdobra a pedido. Limpe depois a cache do PrestaShop para regenerar o HTML em cache.

As modificações não aparecem imediatamente

Como a renderização é guardada em cache, limpe a cache do PrestaShop depois de uma modificação manual. As alterações de categorias, páginas CMS, marcas, menus e elementos invalidam a cache automaticamente.

É compatível com o PrestaShop 9?

Sim. O módulo é compatível com PrestaShop 8 e 9, em multiloja e multilingue, e gere nativamente as diferenças técnicas entre as duas versões. Os preços apresentados no menu usam o formatador de locale do PrestaShop 9 com recurso automático ao PrestaShop 8.