Como adicionar um menu personalizado autoadministrável?

Be original

Inauguramos uma nova iniciativa focada em ajudar os webdesigners que escolhem a Nuvem Shop para trabalhar com seus clientes (e atender aos nossos). É uma medida para realizar trocas em layouts sob medida. Nesta nova série de posts vamos dar dicas e conselhos para que um webdesigner possa aplicar seus desenhos em nossos templates.

Nunca fez um layout com a Nuvem Shop? Fique tranquilo, é bem fácil. Se você é um webdesigner com conhecimentos em HTML e CSS já está pronto para usar o Twig, uma ferramenta para criar templates que usamos na Nuvem Shop. O que vamos te ensinar hoje é a criar, através do Twig, menus personalizados que possam ser editados de dentro do Administrador Nuvem.

Suponhamos que você queira adicionar um novo menu ao rodapé da loja que possa ser editado por qualquer pessoa sem conhecimentos técnicos. Em primeiro lugar, é preciso criar um novo menu em nossa loja. Para isso, direto do administrador você vai acessar “Layouts” e clicar em “Barras de Navegação”.

  • Importante: grave o “nome_menu” que você selecionou para usar como referência no código.

Na sequência, na parte do código desejada (pode ser em layout.tpl ou no template correspondente a alguma das páginas), insira o seguinte:

<ul>
{% for item in menus.nombre_menu%}
<li>
<a href=”{{item.url}}”{%i item.url | is_external %}target-“_blank”{% endif %}>{{item.name}}</a>
</li>
{% endfor %}
</ul>

Este é o código completo que você precisa adicionar, sem precisar de mais nada. Lembre-se que caso você queira aplicar estilos sobre este menu, poderá fazê-lo diretamente através do .css.

Entendendo o código parte a parte

Por um lado, {% for item in menus.nombre_menu %} … {% endfor %} indica que todos os itens que pertencem a esse menu (nome_menu) devem ser carregados e que será possível carregar no Admin.

E adicionando um <li> com apenas <a> criará um loop que fará se repetir. Como se vê no exemplo, os <ul></ul> ficam por fora para evitar que se repitam também no loop.

<li>
<a href=”{{ item.url }}” {% if item.url | is_external %}target=”_blank”{% endif %}>{{ item.name }}</a>
</li>

Dentro dessa estrutura nós vamos encontrar:

  • {{item.url}} – faz referência a URL deste item.
  • {{% if item.url | is_external%}target=”_blank”{%endif%} – quando usado um link de fora da loja, isso vai garantir que se abra em uma nova aba.
  • {{item.name}} – é o nome do link.

 


O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    como-adicionar-um-menu-personalizado-autoadministrvel