Otimizando menus

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

O menu é um dos pontos críticos de performance em uma loja. Por estar presente em (quase) todas as páginas, quando mal otimizado, pode fazer com que qualquer página tenha problemas de performance independente do quão bem implementada ela esteja. Neste passo, vamos aprender como otimizar a sua implementação para, não só viabilizar a edição deste no Site Editor, como reduzir o overhead de blocos necessários em sua definição

Props vs children

Em geral uma implementação de menu em uma loja segue o seguinte padrão:


_26{
_26  "vtex.menu@2.x:menu#category-menu": {
_26    "children": [
_26      "menu-item#category-electronics",
_26      "menu-item#category-major-appliances",
_26      "menu-item#category-small-appliances"
_26    ]
_26  },
_26  "menu-item#category-electronics": {
_26    "props": {
_26      "id": "menu-item-category-electronics",
_26      "type": "custom",
_26      "iconId": null,
_26      "highlight": false,
_26      "itemProps": {
_26        "categoryId": 153,
_26        "type": "internal",
_26        "href": "/electronics/",
_26        "noFollow": true,
_26        "tagTitle": "Electronics",
_26        "text": "Electronics"
_26      }
_26    }
_26  },
_26  ...
_26}

Existem dois problemas em implementar um menu desta forma:

Por se usar o children, o menu passa a ter implementação parecida com a de um layout, o que faz com que todo o conteúdo dentro dele não seja facilmente editável no Site Editor
Para cada novo menu que for criado, é necessária a definição de um novo bloco, o que aumenta o overhead dos blocos que são necessários para compor uma página

Atividade

Para melhorar, então, a performance do menu da nossa Appliance Store, vá até o arquivo /store/blocks/header/category-menu.jsonc e remova sua seção de children:

_10{ _10 "vtex.menu@2.x:menu#category-menu": { _10- "children": [ _10- "menu-item#category-electronics", _10- "menu-item#category-major-appliances", _10- "menu-item#category-small-appliances" _10- ] _10 } _10 ... _10}

NOTA: Não apague as definições destes blocos, eles estão sendo utilizados em outros lugares

Adicione agora uma nova seção de props e um array de items:

_10{ _10 "vtex.menu@2.x:menu#category-menu": { _10+ "props": { _10+ "items": [] _10+ } _10 } _10 ... _10}
Para fechar, para cada um dos menu-items que tínhamos ( "menu-item#category-electronics"; "menu-item#category-major-appliances"; "menu-item#category-small-appliances"), adicione suas props como itens do array que criamos:

_21{ _21 "vtex.menu@2.x:menu#category-menu": { _21 "props": { _21 "items": [ _21+ { _21+ "id": "menu-item-category-electronics", _21+ "type": "custom", _21+ "iconId": null, _21+ "highlight": false, _21+ "itemProps": { _21+ "categoryId": 153, _21+ "type": "internal", _21+ "href": "/electronics/", _21+ "noFollow": true, _21+ "tagTitle": "Electronics", _21+ "text": "Electronics" _21+ } _21+ } _21+ ... _21 ] _21 }

O resultado esperado é um menu exatamente igual ao que tínhamos, mas que agora conseguimos controlar pelo Site Editor e adicionar novos itens.

Answer sheet

See answer sheet for category-menu.jsonc

category-menu.jsonc


_115// store/blocks/header/category-menu.json
_115{
_115  "vtex.menu@2.x:menu#category-menu": {
_115    "props": {
_115      "items": [
_115        {
_115          "id": "menu-item-category-electronics",
_115          "type": "custom",
_115          "iconId": null,
_115          "highlight": false,
_115          "itemProps": {
_115            "categoryId": 153,
_115            "type": "internal",
_115            "href": "/electronics/",
_115            "noFollow": true,
_115            "tagTitle": "Electronics",
_115            "text": "Electronics"
_115          }
_115        },
_115        {
_115          "id": "menu-item-category-major-appliances",
_115          "type": "custom",
_115          "iconId": null,
_115          "highlight": false,
_115          "itemProps": {
_115            "categoryId": "151",
_115            "type": "internal",
_115            "href": "/major-appliances/",
_115            "noFollow": true,
_115            "tagTitle": "Major Appliances",
_115            "text": "Major Appliances"
_115          }
_115        },
_115        {
_115          "id": "menu-item-category-small-appliances",
_115          "type": "custom",
_115          "iconId": null,
_115          "highlight": false,
_115          "itemProps": {
_115            "categoryId": 152,
_115            "type": "internal",
_115            "href": "/small-appliances",
_115            "noFollow": true,
_115            "tagTitle": "Small appliances",
_115            "text": "Small appliances"
_115          }
_115        }
_115      ]
_115    }
_115  },
_115  "menu-item#category-electronics": {
_115    "props": {
_115      "id": "menu-item-category-electronics",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "categoryId": 153,
_115        "type": "internal",
_115        "href": "/electronics/",
_115        "noFollow": true,
_115        "tagTitle": "Electronics",
_115        "text": "Electronics"
_115      }
_115    }
_115  },
_115
_115  "menu-item#category-major-appliances": {
_115    "props": {
_115      "id": "menu-item-category-major-appliances",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "categoryId": "151",
_115        "type": "internal",
_115        "href": "/major-appliances/",
_115        "noFollow": true,
_115        "tagTitle": "Major Appliances",
_115        "text": "Major Appliances"
_115      }
_115    }
_115  },
_115  "menu-item#category-small-appliances": {
_115    "props": {
_115      "id": "menu-item-category-small-appliances",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "categoryId": 152,
_115        "type": "internal",
_115        "href": "/small-appliances",
_115        "noFollow": true,
_115        "tagTitle": "Small appliances",
_115        "text": "Small appliances"
_115      }
_115    }
_115  },
_115  "menu-item#login": {
_115    "props": {
_115      "id": "menu-item-custom-login",
_115      "type": "custom",
_115      "iconId": null,
_115      "highlight": false,
_115      "itemProps": {
_115        "type": "internal",
_115        "href": "/account",
_115        "noFollow": true,
_115        "tagTitle": "My account",
_115        "text": "My account"
_115      }
_115    }
_115  }
_115}