Colocar as paginas extras no menu superior

Layout
1

Olá, fiz algumas paginas extras e ela fica dentro de páginas, queria colocar essas paginas no menu superios, todas separadas, como faço?

1 curtida
2

Estou querendo saber a mesma coisa, vi varias pessoas fazendo e na minha não faz parte do menu, ele fica dentro de um link paginas. Alguém pode nos ajudar?

3

Clica na engrenagem, vai em “visual da loja” e depois no campo “exibir menu superior” de um “check” no campo “Páginas Extras”

4

Sim, isso foi efetuado, porem esse é o problema ele fica no sub-menu “Páginas Extras”, e gostaria que apenas fosse exibido no menu diretamente “Personalizados”. Entendeu?

5

acho que o que você procura está neste tópico

6

Oi você conseguiu fazer? Estou com o mesmo problema e não entendo nada de programação…

7

Também gostaria de saber como fazer essa alteração. Alguém já conseguiu? Obrigada!

1 curtida
8

2015pimenta / Danilo_Oliveira_Cost / Renan / Alziria / lupjr

Olá para todos, encontrei uma possível solução para esse problema.

De acordo com o site https://www.brasillaser.com.br/, nos disponibilizou um código para aplicar no site, para que os submenus que se encontrem nas páginas extras fiquem no menu superior.

Para fazer é um processo um pouco longo, mas fácil de fazer:

  1. Entre na página de configuração do Loja integrada.

  2. Clique na engrenagem de configuração que se encontra no canto superior direito.

  3. No tópico “APARÊNCIA” clique em “INCLUIR CÓDIGO HTML”.

  4. Clique em “ADICIONAR CÓDIGO”, que se encontra no canto superior direito.

  5. Se aparecer uma mensagem avisando sobre o HTML clique na caixa escrita “LI E CONCORDO”, caso não tenha essa mensagem, é porque você já o aceitou outra vez.

  6. Agora preencha os dados: Na “DESCRIÇÃO”, escreva “SUBMENUS NO MENU”, apenas para depois você saber para que o código serve.

  7. Em “LOCAL PUBLICAÇÃO”, coloque “CABEÇALHO”.

  8. Em “PÁGINA PUBLICAÇÃO”, coloque “TODAS AS PÁGINAS”.

  9. Em “TIPO” é importante colocar “HTML”

  10. Em baixo você terá um local para colocar textos, cujo numero no canto esquerdo é 1, apenas cole esse código abaixo:

    <script>
$('#nivel-um').ready(function()
{
var newItem = document.createElement("li");
newItem.className += ' borda-principal';

var newLink = document.createElement("a");
newLink.className += ' titulo cor-secundaria';
newLink.href = 'AAAAAA';
//troque o nome de umas das paginas extras que criou , para ser colocada aqui ao clicar

var textnode = document.createTextNode("TÍTULO QUE APARECERÁ NO MENU");
//troque o nome que deseja colocar no item do menu novo

newItem.appendChild(newLink);
newLink.appendChild(textnode);

var list = document.getElementsByClassName('nivel-um')[0];
list.insertBefore(newItem, list.childNodes[0]); //use esse para adicionar no inicio do menu
//list.appendChild(newItem); //use esse para adicionar no fim do menu
});
</script>

CALMA! Ainda não acabou, após colar esse código, você deverá fazer algumas alterações, essa parte é muito importante e deve ser feita com calma, reconheço que algumas pessoas não compreendam sobre programação e até eu tenho minhas dificuldades, mas vamos nos ajudando :slight_smile: Agora é necessário algumas coisas nesse código, vamos começar:

  1. Localize no código essas letras: ‘AAAAAA’. Perceba que aos lados dessas letras, existe este sinal: ’ ’ Será necessário colocar as próximas informações que te passarei dentro deste símbolo.
    A. Abra outra aba do seu navegador, e entre nas configurações de sua loja.
    B. Após entrar selecione para ver sua loja em manutenção (a minha está assim, caso a sua não esteja, entre normalmente pelo seu site de sua loja).
    C. Vá em páginas que estão no menu, e clique na que você deseja colocar para fora. (Se caso não houver páginas, significa que você ainda não as criou, para isso, entre naquela engrenagem nas configurações, e clique em páginas extras, deixe ativa e escreva algumas coisas para apenas mostra-lá no site, depois você altera).
    D. Após clicar na sua página que deseja colocar para fora, no menu, olhe o link que geralmente se encontra em seu navegador, no canto superior, vai haver um longo link: http://informaçõestudomaisblabla.com.br/paginas/algumacoisa.html.
    E. Selecione apenas essa barra: /paginas/algumacoisa.html. (siga olhando para o link e veja quando acabar o “.com” ou “.br” nesse momento, haverá a continuidade do site, que é o link de sua página que você quer colocar pra fora, no meu aparece /paginas/O NOME DA PÁGINA.html.) Pegue isso e jogue no lugar do ‘AAAAAA’.

  2. Agora, olhe para o código e encontre “TÍTULO QUE APARECERÁ NO MENU”, e como já está escrito, troque pelo seu título (tipo uma página extra para contatos, quem somos, perguntas frequentes etc), lembre-se de deixar entre as aspas " " .

SALVE O CÓDIGO HTML clicando no botão: “+SALVAR CÓDIGO HTML”.

Mas, você perceberá que agora, ele ficou no menu, mas no próprio menu, em “páginas”, você encontra o mesmo nome, ou seja, ficou dois locais para clicar, para isso é simples resolver:
(No meu funcionou rsrs, talvez também funcione no seu).

  1. Entre na página de configuração do Loja integrada.
  2. Clique na engrenagem de configuração que se encontra no canto superior direito.
  3. No tópico “MINHA LOJA” clique em “PÁGINAS EXTRAS”.
  4. Selecione a sua página que você colocou no Menu.
  5. E desative-a, clicando em “PÁGINA ATIVA: NÃO”.

E pelo que eu vi no meu, a página desaparece do seu local de origem, mas quando é clicado no novo local que está no menu, ela aparece normalmente.

Se caso não apareceu, espere algum tempo, um código que fiz a um tempo atrás, lembro que demorou 1 dia, então calma que uma hora aparece, se caso não aparece de jeito nenhum, tente ver se sua página tem alguma informação, por isso aconselhei a criar uma página e escrever em seu local de descrição qualquer coisa apenas para ficar visível.

DICA BÔNUS

Temos dificuldades com HTML; JAVASCRIPT ou CSS, e algumas pessoas não nos informam muito bem os códigos, se caso algum código seu já colocado não funciona, tente mudar de CABEÇALHO para RODAPÉ, ou no caso (O que eu quero ensinar rsrs) tente mudar o tipo de código: HTML ou JAVASCRIPT ou CSS, e perceba as cores das letras que se encontra no código, as vezes o código é CSS, e você coloca como JAVASCRIPT, e quando vê nada aconteceu, porém olhe as letras dos códigos, elas pode estar todas pretas, ou algumas com algumas cores como azul, verde ou vermelho. Ao meu entender, e pelo que pude perceber, se elas estão pretas, significa que o sistema do loja integrada não reconhece o que está escrito, se está em vermelho, significa que o loja integrada percebeu que há um erro ali, mas se está verde ou azul significa que o loja integrada reconhece esses códigos, e podem ser aplicados.

Bem é isso pessoal, um abraço, espero ter ajudado. :slight_smile:

11 curtidas
9

Me ajudou bastante, voce sabe como eu posso alterar a ordem dos itens do menu? Gostaria que o ‘CONTATO’ viesse por ultimo.

10

Olá, @regislinhares!

Atualmente, do jeito que está o seu menu, aplicando esse código em formato JS, no rodapé de todas as páginas vai resolver o seu problema:

$(“.menu.superior .nivel-um>li:NTH-CHILD(2)”).insertAfter(“.menu.superior .nivel-um>li:last-child”);

Caso você possua outras alterações para serem feitas, nos colocamos à disposição.
Nosso contato no Whatsapp é (51) 98261-6621.
Podemos fazer preços especiais para você.

Abraço.

11

Olá, estava com o mesmo problema e usei e deu certo… mas gostaria de saber como faço para alterar a cor e tamanho dessas letras, pois ficou diferente das letras que estavam como categorias…

12

ajudou muito, obrigado!

1 curtida
13

Obrigada por compartilhar seu conhecimento cara!

1 curtida
14

conseguiu mudar a cor e alterar fonte?

15

Cara, obrigada por disponibilizar seu conhecimento. Me ajudou demais!

16

Para não deixar o novo item do menu como primeiro, eu mudei o número 0 para 2 nessa linha do código que o Administrador_Boni colocou:

list.insertBefore(newItem, list.childNodes[0]); //use esse para adicionar no inicio do menu

Para mudar a cor ao passar o mouse sobre, inseri esse código como um CSS (rodapé e todas as páginas):

.a, a:hover, a:focus, .cor-principal, .menu a:hover, .atributo-comum a:hover span, .atributo-comum .active a span {
color:#0366db;
}

Esse código #0366db é a cor que eu uso. Para escolher outra cor, basta colocar o código da outra cor no lugar dele.

2 curtidas
18

Alexandre, tudo bem? Muito bom!! Eu consegui adicionar a página extra no menu, porém ficou antes de paginas, tem como colocar depois?

19

Eu tinha achado um outro código que adiciona as páginas no menu e até funcionou, mas não aparece no mobile. Esse aparece no mobile, mas o botão adicionado fica maior que os outros lá e pelo pc a altura dele no menu fica maior que os outros. Já pesquisei pra deixar tudo alinhado e no mesmo tamanho, mas tá difícil de achar.