Otimização de submenus

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:

imageimage

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":

    // 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:

    {
    + "[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:

    imageimage

  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:

    imageimage

  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:

    {
      "[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"

imageimage

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 participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue


Next step