Otimização de submenus

No passo anterior aprendemos como otimizar itens de menu, tornando-os propriedades do menu ao invés de blocos filhos. Alguns menus, no entanto, possuem outros submenus, como o da Store Theme:

Estes se comportam como um layout, então não há otimizações que possam ser feitas além de usar o comportamento de children. Para esses casos, o ideal é ir para uma solução híbrida, em que os menus pais são usados com children e os menus folha (últimos na árvore de menus) podem ser usados como props.

Todavia, como o usuário não vai ver o conteúdo dos submenus quando a página é carregada, podemos postergar o carregamento do seu conteúdo.

Atividade

1. Para entender como podemos otimizar submenus, vamos modificar um pouco nosso exemplo para ficar mais parecido com o que temos na Store Theme, comece editando o nome do bloco que trabalhamos no passo anterior ("[email protected]:menu#category-menu") para "[email protected]:menu#categories":

   Diff

   // store/blocks/header/category-menu.jsonc
   {
     ...
   - "[email protected]:menu#category-menu": {
   + "[email protected]:menu#categories": {
     ...
   }

2. Defina um menu e um sub-menu agora no lugar do antigo #category-menu, nele colocaremos todo o menu que já tínhamos construído:

   Diff

   {
   + "[email protected]:menu#category-menu": {
   +   "children": [
   +     "menu-item#categories"
   +   ]
   + },
   + "menu-item#categories": {
   +   "props": {
   +     "id": "menu-item-custom-categories",
   +     "type": "custom",
   +     "iconId": null,
   +     "highlight": false,
   +     "itemProps": {
   +       "type": "internal",
   +       "href": "#",
   +       "noFollow": true,
   +       "tagTitle": "Categories",
   +       "text": "Categories"
   +     }
   +   },
   +   "blocks": [ "[email protected]:submenu#categories" ]
   + },
   + "[email protected]:submenu#categories": {
   +   "children": ["[email protected]:menu#categories"]
   + },
     "[email protected]:menu#categories": {
     ...
   }

   O que estamos fazendo aqui é criar um nível acima do menu que já tínhamos definido para então modificar a navegação para um formato de submenu, o resultado deve ser:

   

3. No navegador, antes da URL do seu workspace adicione um view-source: e procure por title="Major Appliances", você verá duas referências no código, uma para o header e outra para o footer. Isto significa que quando carregamos o HTML estamos trazendo juntos esses menus, ainda que não estejam sendo consumidos no primeiro momento:

   

4. Com o menu em níveis agora definido, podemos adicionar uma nova prop ao menu pai, a fim de prevenir que os submenus sejam carregados até que o usuário interaja com as categorias:

   Diff

   {
     "[email protected]:menu#category-menu": {
   +   "props": {
   +     "experimentalOptimizeRendering": true
   +   },
       "children": [
         "menu-item#categories"
       ]
     },
     ...
   }

Volte para o código fonte, atualize a página e procure novamente por title="Major Appliances"

Veja que nenhuma referência é encontrada, mas que se você navegar, o comportamento continua o mesmo. Isso porque os submenus são carregados somente depois do load inicial.

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso office hours no canal VTEX Developers