Por padrão, o aplicativo exibe no menu de categorias a estrutura de árvore de categorias cadastrada na VTEX. Através do CMS, é possível realizar algumas edições nessa estrutura, como ocultar, agrupar e editar a ordenação das categorias. Além disso, também há a opção de criar um menu de categorias completamente customizado, com base nas categorias e coleções da VTEX, deixando de exibir a estrutura original cadastrada na VTEX.
Editando o menu de categorias nativo da VTEX
- Realize o login no painel administrativo da VTEX e entre no espaço destinado app
Exemplo: - Vá no módulo "Storefront" e clique na função "Headless CMS"
- E acesse função “Headless CMS”, clique em “Criar Documento” e procure pelo modelo "Configurações Categorias"
- Entre na aba "Settings"
- No campo "IDs das Categorias Ocultas", preencha com ID's das categorias (mesmo id da VTEX) que você não quer que sejam exibidas no menu, clicando em "+Novo ID"
- Em "IDs das Categorias Exibidas" preencha com os ID's das categorias que você quer que sejam exibidas no menu, clicando em "+Novo ID"
- No campo "Categorias em ordem alfabética" defina se a lista de categorias deverá ser exibida em ordem alfabética ou seguindo a ordenação cadastrada na VTEX
- (Opcional) Só preencha os campos de listagem de subcategorias caso você esteja usando a opção de manter a árvore de categorias cadastradas na VTEX
- No campo "Espaçamento hotizontal" define a quantidade de pixel entre componente de categoria e a tela do dispositivo. No "Arredondamento dos cantos" define o tamanho do raio em pixel para arredondamento dos cantos do componente.
- Ao finalizar as alterações, lembre-se de clicar em "Salvar" e depois em "Publicar" para garantir que as alterações sejam armazenadas e o conteúdo seja disponibilizado no app
Caso fique com alguma dúvida, você pode enviar um e-mail para suporte@kobe.io.
Criando uma lista de Categorias do zero
Se for desejado montar uma árvore de categorias customizada, preencheremos a aba "Seções" com itens do tipo Categoria. Para povoarmos as categorias, clicaremos no "+" e selecionaremos Categoria.
- Nome obrigatório - Nome que será exibido no card de categoria
- Abrir ao clicar opcional - Determina se a categorias deve ser ponto final da árvore de categorias. Se deve, ou não, abrir uma listagem de produtos baseada no seu ID: selecionável entre 'Sim' e 'Não'.
- Categorias filhas opcional - Subcategorias a serem exibidas ao clicar no card. Se esse campo estiver vazio, interpretaremos que a categoria é ponto final da árvore de categorias, ou seja, a listagem de produtos será feita utilizando o ID atual.
- Buscar produtos de... opcional - Temos a possibilidade de listar os produtos de uma categoria utilizando tanto Categorias como Coleções registradas na VTEX, proporcionando mais flexibilidade.
- ID da busca opcional - ID da categoria/coleção a ser pesquisada para a listagem de produtos da categoria. Se a categoria não deve exibir produtos esse campo será relevado.
-
Filtros de especificação - Para adicionar os filtros de especificação os seguintes campos devem ser preenchidos
- Deseja aplicar algum filtro de especificação? - Boleano que identifica se a categoria irá filtrar alguma especificação
- Id da especificação - Campo da especificação, caso o valor do campo Buscar produtos de... seja coleção deve-se adicionar o valor que representa a especificação na vtex, caso seja categoria basta passar o nome da especificação.
- PLP Banner opcional - Banner a ser exibido na PLP a abrir, necessariamente de tamanho P ou G.
Ao finalizar as alterações, lembre-se de clicar em "Salvar" e depois em "Publicar" para garantir que as alterações sejam armazenadas e o conteúdo seja disponibilizado no app
Caso fique com alguma dúvida, você pode enviar um e-mail para suporte@kobe.io.