Passar para o conteúdo principal

Como adicionar ou alterar um departamento no menu do site?

Abordaremos como pode ser adicionado um novo departamento no menu do site ou como pode ser feita a alteração do departamento exibido

Atualizado há mais de 2 meses

Como adicionar ou alterar um departamento no menu do site

Neste guia, vamos aprender a configurar a barra de departamentos do seu site. Você poderá adicionar novos departamentos, mudar os que já existem e até colocar botões que não são de departamentos, como "Promoções" ou "Fale Conosco".

Importante: Para fazer essas mudanças, você precisará de acesso de "Administrador" no sistema. Se você não tiver, peça ajuda ao seu gerente. Também é bom ter um pouco de atenção, pois vamos mexer em algumas configurações mais técnicas.

Passo 1: Encontre as Configurações Principais

Primeiro, você precisa ir para a área de configurações no sistema. Siga este caminho:

  • Clique em "Menu"

  • Depois em "Configurações"

  • E por fim, em "Parâmetros"

Passo 2: Ache a Configuração do Menu do Site

Agora, vamos encontrar a parte exata onde o menu do site é configurado:

  1. Na tela de "Parâmetros", procure pelo campo chamado "chave" e digite "header-component" nele.

  2. No campo chamado "parâmetros", digite "topmenu".

  3. Depois de filtrar, clique no botão "editar" que aparecerá na linha correspondente.

Você verá um texto que parece um código (chamado JSON). Não se preocupe muito com o nome, mas saiba que é aqui que vamos adicionar as informações para os novos botões. Procure pela parte que diz "widgets". É dentro dessa parte que você vai colocar os dados dos seus novos botões (seja para um departamento, uma marca, um fornecedor ou um link para outro site).

Entendendo o que Cada Campo Significa:

Dentro desse "código" para cada botão, você encontrará algumas informações:

  • name (Nome de Referência): Quase sempre será "topmenu-item". Se for para consultar marcas ou fornecedores, use "topmenu-item-v3".

  • link (Endereço): É o endereço para onde o botão vai levar quando alguém clicar. Pode ser o link de um departamento, uma coleção de produtos, uma marca, um fornecedor, uma lista de compras ou até um site externo. Se não quiser que o botão leve a lugar nenhum, pode deixar em branco.

  • target (Como o Link Abre): Decide se o link vai abrir em uma nova janela ou na mesma página.

    • "_blank": Abre em uma nova página.

    • "_self" ou em branco: Abre na mesma página.

  • title (Nome do Botão): É o texto que vai aparecer no menu do site. Por exemplo: "Celulares", "Promoções", "Trabalhe Conosco".

  • icon (Ícone): Se quiser um ícone ao lado do nome no menu, você pode usar um do site Font Awesome (versão 5.xx.xx). Basta colocar o código do ícone, como "far fa-mug".

  • active (Ativo/Inativo): Diz se o botão vai aparecer no site (true) ou não (false).

  • data (Informações Avançadas): Este campo é usado para buscar informações de departamentos e subdepartamentos, permitindo aquele efeito de menu que se abre quando você passa o mouse por cima. O código aqui é um pouco mais complexo, mas um exemplo seria:

"departamentos?q=(departamentos.id = '01010009')&disponivel=1&order=posicao,nome&perpage=100&nivel=1&embed=sub_departamentos::disponivel=1,url"

Isso mostra o departamento com o ID '01010009' e seus subdepartamentos.

  • columns (Colunas): Se você tiver subdepartamentos, este campo indica em quantas colunas eles serão divididos no menu.

  • token (Token de Consulta): Usado quando o campo "data" é preenchido. O valor padrão é "empresa".

  • ttl (Tempo de Vida da Consulta): Usado quando o campo "data" é preenchido. O valor padrão é "3000".

Exemplo de Como Adicionar um Novo Botão:

Se você quiser adicionar um novo botão, basta copiar a estrutura que você já viu e mudar as informações, como o ID do departamento ou o link. Veja um exemplo do objeto a ser adicionado dentro da chave “widgets”:

Exemplo: Adicionar um botão para "Marcas"

Se você quiser um botão que mostre as marcas, o campo "data" seria diferente. Para marcas, use "marcas/consultar". Para fornecedores, use "fornecedores/consultar".

Outro Exemplo: Adicionar um link externo (como um formulário de "Trabalhe Conosco")

Nesse caso, você preencheria o campo "link" com o endereço do formulário.

Passo 3: Salve e Valide as Mudanças

Depois de fazer suas edições no código, clique no botão "formatar código" para ter certeza de que não há erros. É muito importante corrigir qualquer erro antes de salvar, pois isso pode afetar o funcionamento do seu site.

Passo 4: Veja as Mudanças no Site

Em cerca de 10 minutos após salvar, você já poderá ver o novo departamento ou botão que você adicionou no seu site.

Respondeu à sua pergunta?