Como você faria: Menu com 2 níveis

Um de nossos clients tem um time de desenvolvimento, que irá assumir o projeto assim que finalizarmos nossa parte. Eles têm ótimos desenvolvedores, porém sem experiência em Sitecore, e algumas de suas perguntas são bem valiosas para quem está começando no mundo do Sitecore. Minha resposta, que segue abaixo, tem um enfoque de consultoria, oferecendo explicações e conselhos num nível mais elevado.

A pergunta é a seguinte:

No Sitecore, como você organizaria a arquitetura e os arquivos estáticos – em sua maioria arquivos CSS e javascripts – durante o desenvolvimento de um menu com 2 níveis, como o exibido abaixo?

O primeiro nível mostra uma Imagem e um Título, e por padrão vem fechado:
Menu2l - closed

Quando o usuário passa o mouse em cima de um bloco de Nível 1, uma segunda parte é exibida mostrando os items do nível 2: Menu2l - hover

Resposta

Seus arquivos estáticos de CSS e Javascript, como em qualquer aplicação web, precisam ser carregados de alguma maneira. Em nosso projeto temos um processo de bundle e minificação, responsável pelo carregamento, minificação e cacheamento de arquivos para que tudo carregue mais rapidamente.

Mas você pode carregar arquivos à moda antiga:

<script src="myscript.js" type="text/javascript"></script>

A implementação em si pode ser dividida em dois desafios diferentes:

  1. Desenvolvimento de Front-end
    Temos aqui um bom trabalho de front-end, alguns comportamentos dinâmicos quando o usuário passa o mouse no nível 1, o look and feel e tudo mais. Então basicamente todo markup de HTML, javascript e CSS podem ser preparados sem ter o Sitecore especificamente em mente;
  2. Desenvolvimento de Back end
    Todo o necessário para possibilitar a edição de conteúdo dos items do menu e fazê-lo funcionar dinamicamente na página, incluindo:

    • Passo 1 - Subir seus arquivos javascript e CSS em algum local de seu filesystem (Ex: “/assets/js” e “/assets/css“), e então carregá-los de alguma forma (tradicional, bundle, etc);
    • Passo 2 - Defina sua estrutura de dados (templates e campos) para suportar a gestão do conteúdo. Tudo depende de seus requisitos – vamos analisar os seguintes dois cenários:
      • Cenário 1 - Você pode querer carregar o menu a partir das páginas e subpáginas que já existem em sua árvore de conteúdos. Neste caso você simplesmente irá usar seus dados já existentes:
        Menu Tree
      • Cenário 2 - Ou talvez queira criar uma estrutura de dados dedicada ao menu, não páginas em si mas links para as páginas reais. Esta estrutura de dados teria o seguinte formato:
        Item de Menu Nível 1
        Sitecore Template Menu Level 1
        Item de Menu Nível 2
        Sitecore Template Menu Level 2
        E você manteria os items em algum lugar fora da árvore de conteúdo do seu site:
        Menu Tree 2
    • Passo 3 - Criar o componente/sublayout que implementa a funcionalidade do menu. Seguindo os mesmos dois cenários acima teríamos:
      • Cenário 1 - Neste caso você usaria a API do Sitecore para programaticamente pegar o item da página inicial (Home), depois usar os items filhos (Children) para renderizar os itens de nível 1, e seus netos para renderizar os ítens de nível 2:
        var homeItem = Sitecore.Context.Database.GetItem("/sitecore/content/Home");
        var levelOne = homeItem.Children.ToList();
        foreach (var itemLevelOne in levelOne) {
           // Representa um bloco de Itens de menu de nível 1
           var title = itemLevelOne.Fields["Title"].Value;
           var image = itemLevelOne.Fields["Image"].Value;
           var levelTwo = itemLevelOne.Children.ToList();
           // ... faça o que for necessário com o Nível 1
           foreach (var itemLevelTwo in levelTwo) {
              // Aqui trabalha com o nível 2
              var titleLevelTwo = itemLevelTwo.Fields["Title"].Value;
           }
        }
      • Cenário 2 - Esta implementação seria muito parecida com o primeiro cenário, exceto que você precisaria iniciar a partir de sua pasta de repositório (Eg: /sitecore/content/Lists/Menu) ao invés da Home.

Publicado em Architecture, Development, How To Marcado com: , ,
Um comentário sobre “Como você faria: Menu com 2 níveis
  1. Caro visitante de língua portuguesa: traduzirei meus posts na medida do possível. Caso você precise muito deste conteúdo em português, deixe um recado aqui no mural e priorizarei sua tradução.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  Am Not Spammer

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>