Super Menu

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Super Menu

Aplicação para renderização da árvore de categorias e/ou construção de menus personalizados

Media Placeholder

Configuração

Adicione o Super Menu às dependências da loja

// 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 delabel).	''
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

"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"]
	}
},