# Super Menu 📢 Use this project, [contribute](https://github.com/agencia-e-plus/storage-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion). ## Super Menu Aplicação para renderização da árvore de categorias e/ou construção de menus personalizados ![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png) ### Configuração Adicione o Super Menu às dependências da loja ```json // manifest.json "dependencies": { "{vendor}.super-menu": "1.x" } ``` Utilize o bloco `super-menu` com as propriedades a seguir | Nome do bloco | Descrição | | ------------- | ---------------------------------------------------- | | `super-menu` | Bloco responsável por renderir o menu e seu contexto | #### Propriedades do bloco `super-menu` | Nome | Tipo | Descrição | Valor padrão | | ---------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | `withCategoryTree` | `boolean` | Define se a árvore de categorias deve ser carregada ou não. Se `false`, a requisição à API da Vtex **não** é realizada. | `true` | | `maxDepth` | `number` | Define a profundidade máxima (quantidade de níveis) do menu. | `2` | | `maxDepartments` | `number` | Define a quantidade máxima de departamentos (nível 1) a ser exibida. Para não limitar, use `0`. | `0` | | `maxCategories` | `number` | Define a quantidade máxima de categorias (nível 2 ou +) a ser exibida. Para não limitar, use `0`. | `0` | | `departmentSortMethod` | `SortMethodEnum` | Método de ordenação dos departamentos (Veja a documentação de `SortMethodEnum` abaixo) | `DEFAULT` | | `categorySortMethod` | `SortMethodEnum` | Método de ordenação das categorias (Veja a documentação de `SortMethodEnum` abaixo) | `ALPHABETICAL` | | `customItems` | `CustomItem[]` | Cria novos itens no menu e/ou edita os itens já existentes na árvore de categorias da loja. Basta informar o ID da categoria ou criar o próprio ID. Veja a documentação `CustomItem` para entender o que pode ser configurado. | `[]` | **Valores para `SortMethodEnum`** | Nome | Valor | Descrição | | ---------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Padrão | `DEFAULT` | Ordena de acordo com a ordem em que os itens estão dispostos no `customItems` ou segue a ordem natural da árvore de categorias. | | Alfabético | `ALPHABETICAL` | Ordena em ordem alfabética | **Objeto `CustomItem`** | Nome | Tipo | Descrição | Valor padrão | | ----------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | `id`\* | `string` | (**Obrigatório**) ID da categoria, caso a intenção seja alterar um item da árvore de categorias da loja. Porém se a intenção for criar um novo item, basta inventar um ID qualquer (usar somente **letras minúsculas**, **traços** e **números**, pois este ID será usado como classe do item). | `undefined` | | `name` | `string` | Nome que será exibido no item (também chamado de**label**). | `''` | | `href` | `string` | URL de redirecionamento do item | `./` | | `children` | `CustomItem[]` | Possíveis fílhos do item (definição recursiva). | `[]` | | `highlight` | `boolean` | Se `true`, insere um modificador na classe do item para que este possa ser estilizado com destaque. | `false` | | `hidden` | `boolean` | Se `treu`, o item não será renderizado. É útil para o lojista, pois este poderá esconder o item por conta própria. | `false` | | `text` | `string` | Texto explicativo do item. Geralmente usado para descrever a categoria em questão, porém pode ser usado sem problemas com itens customizados que não existem na árvore de categoria. | `undefined` | | `images` | `string[]` | URL da imagem | `undefined` | | `icon` | `object` | URL do ícone | `undefined` | **Exemplo de uso** ```json "super-menu#": { "title": "Menu", "props": { "withCategoryTree": true, "maxDepth": 2, "maxDepartments": 0, "maxCategories": 0, "departmentSortMethod": "DEFAULT", "categorySortMethod": "ALPHABETICAL", "customItems": [ { "id": "8", "images": ["assets/images/header/menu/imagens/imagem-menu.png"], "icon": { "src": "assets/images/header/menu/icons/informatica.png" }, }, { "id": "16", "name": "Xuxa só para baixinhos", "images": ["assets/images/header/menu/imagens/imagem-menu.png"], "icon": { "src": "assets/images/header/menu/icons/informatica.png" }, "children": [ { "id": "27", "name": "Xuxa só para baixinhos 1.1" }, { "id": "28", "name": "Xuxa só para baixinhos 1.2" } ], "text": "Olá, Marilene", "highlight": true } ], "blockClass": ["category-menu", "category-menu-select-departments"] } }, ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/super-menu.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.