Módulo de menu Pro Burger

Quatrocentas categorias não cabem em uma única barra.

O menu horizontal do tema comporta oito entradas. A partir daí, começam os cortes: categorias que não aparecem, submenus que são cortados e, em dispositivos móveis, um menu suspenso onde ninguém consegue encontrar nada.

O menu lateral do RKR cria seu próprio menu suspenso., Independente do seu tema, com sua árvore de níveis, ícones e blocos ilimitados. E crie dois: um para desktop e outro para dispositivos móveis, com conteúdo diferente, se desejar.

E acima, uma barra horizontal da mesma árvore.

Ao lado do botão de menu, as opções selecionadas são exibidas horizontalmente, com o comportamento esperado de um menu de cabeçalho. Não é um menu separado.Como provém da mesma árvore, o cultivo continua sendo feito em um único local, sem necessidade de manutenção duplicada.

Ele é desenhado onde você quiser — no gancho do seu tema ou manualmente a partir do modelo —, é recolhido no botão usual quando a tela diminui de tamanho e tem sua própria tela de aparência: altura, fonte, espaçamento, arredondamento, sublinhado e cores.

A árvore: níveis ilimitados e filhos automáticos

Os elementos são reorganizados arrastando-os e podem ser aninhados indefinidamente. Cada linha possui três botões: editar, excluir e pendurar uma criança naquela entrada.

E existem três tipos de pessoas que fazem o trabalho sozinhas, que são elas que salvam a tarde:

Não é uma cópia, é uma consulta. Se você criar uma nova categoria amanhã, ela aparecerá automaticamente no menu. E as entradas que apontam para categorias respeitam os grupos de acesso: elas não são exibidas para clientes sem permissão — não é que elas estejam lá, mas com defeito, é que elas simplesmente não estão lá.

Os outros sete são os usuais: título (agrupa e não cria links), link livre com opção de abrir em outra aba, categoria direta sem arrastar suas subcategorias, produto, marca, fornecedor e página CMS.

Como abrir um submenu: três maneiras, e a correta depende da tela.

O modo é escolhido separadamente para desktop e dispositivos móveis, e o ponto de corte Você define (768 pixels por padrão).

Com o painel agrupado, Um ramo com netos é apresentado em colunas: cada filho como um cabeçalho, com seu próprio abaixo, pulando automaticamente para a próxima coluna quando a anterior estiver cheia. E para evitar que a coluna da esquerda diminua de tamanho, o menu dobra sua largura sem ultrapassar o limite definido — se, com esse limite, uma coluna ficar com menos de 150px, as colunas são desativadas automaticamente.

Carregamento diferido: o menu para de carregar em todas as páginas.

Um menu extenso ocupa centenas de kilobytes em HTML. cada página, mesmo que ninguém a abra. O carregamento lento decide quanto é carregado, em níveis; o restante é solicitado quando o visitante abre esse ramo, e apenas uma vez por página.

• Desativado — o menu completo. Para menus resumidos: as opções mais simples, sem pedidos especiais.
• Nível 1 — nada; o menu é solicitado com o primeiro gesto no botão.
• Nível 2 — o primeiro nível e os submenus quando você os abre. O equilíbrio usual: em uma loja grande, o peso está nos ramos mais profundos.
• Nível 3 ou 4 — os dois ou três primeiros níveis, para árvores muito profundas.
• E além disso, Adiar qualquer ramificação que passe por N entradas Mesmo que esteja dentro do nível de serviço: a maneira prática de extrair uma longa lista, como a de todas as marcas, do HTML.

O Os dados estruturados são sempre emitidos na sua totalidade. até a profundidade que você definir, independentemente do que os comandos de carregamento diferido indicarem: o Google vê a árvore inteira, mesmo que o visitante receba apenas o primeiro nível.

Debaixo da árvore, o que os faz comprar

Deve combinar com a sua loja e ser legível.

Tema escuro ou branco; sobreposto, uma paleta pré-montada —Rekire, Meia-noite, Suave, Alto Contraste ou Quente — e, além disso, se necessário, as cores de fundo, texto, destaque e separadores. O módulo calcula o espaço vazio com base no fundo, escolhendo um tom legível.

E ao salvar medir o contrasteSe a proporção da tela não for de 4,5:1, conforme recomendado pelas diretrizes de acessibilidade, você será avisado. Um menu ilegível não é uma questão de gosto.

Os ícones são provenientes do Material Icons — pesquisados por nome no editor — ou são de sua autoria: PNG, JPG, GIF ou SVG em 24×24.

Detalhes que se tornam perceptíveis ao utilizá-lo

• Pesquisar no menuFiltre as entradas enquanto digita. Em uma árvore grande, a diferença entre encontrar algo e desistir é significativa.
• Marque sua localização: destaca a entrada da página aberta e sua ramificação. Se não houver uma correspondência exata, tenta o caminho da página pai, portanto, uma tabulação marca sua categoria.
• E marque o ramo abertoFundo, texto em negrito e uma pequena barra à esquerda em toda a extensão do ramo, não apenas no último nível. Na visualização em colunas, e especialmente ao acessar pela barra — quando o visitante não clicou em nada no menu — essa é a única indicação de onde o conteúdo está localizado.
• O modo de submenu do celular é verdadeiramente respeitado.As colunas solicitam a largura atual em vez de decidirem por conta própria, reagindo também à rotação do telefone. Quem deseja colunas em dispositivos móveis ainda poderá encontrá-las.
• Fechar por deslizamento Ao toque: o menu acompanha o dedo e reaparece se você não o soltar completamente. A rolagem vertical nunca o fecha.
• Pré-carregar ao passar o cursorO navegador exibe a página de entrada em segundo plano, sob o cursor do mouse. Isso só funciona com um mouse, nunca com uma tela sensível ao toque.
• Contador de submenu, botão fechar, e o conteúdo da página rola em vez de ser coberto.
• Importação e exportação Todo o menu: é montado em fase de testes e levado para a produção sem repetição do trabalho.

Instalação: não é necessário tocar no objeto.

Com a inserção automática ativada — como vem de fábrica — o módulo é posicionado automaticamente. Como o menu é uma barra lateral e se desvincula da sua origem, o resultado é idêntico ao de chamá-lo a partir do tema. Se preferir posicioná-lo manualmente, ele possui seu próprio gancho.

O botão que o abre é um link para o menu principal, e nada mais: Menu para desktop e #rkrmenu-móvel para dispositivos móveis.

O menu desloca o conteúdo ao ser aberto e precisa saber qual elemento mover: por padrão principal. Se o seu tema não tiver um, você especifica outro seletor — e se ele não existir, o módulo inicia mesmo assim, sem rolagem, em vez de quebrar a página.

As suas personalizações não serão perdidas ao atualizar.

Seu CSS personalizado, o HTML do rodapé do menu e os ícones que você carregou estavam todos localizados na pasta do módulo, e o gerenciador de módulos substitui essa pasta durante as atualizações, removendo todos eles. O menu voltou à sua aparência padrão. sem um único aviso, E nesse instante, ninguém suspeita do módulo.

Agora, eles residem em uma pasta mantida pelo PrestaShop e, durante a atualização, os arquivos restantes no local antigo são transferidos sem sobrescrever nenhum dos novos. Se a transferência falhar devido a problemas de permissão, Dizem que —no registro e no painel de Diagnóstico, na pasta específica—, porque manter isso em segredo deixaria o comerciante a um passo de perder o emprego.