FAQ: Este artigo fornece instruções passo a passo sobre configurar o novo menu de categorias (cms contentful).
Novo Menu de Categorias
Menu de Categorias criado a partir do componente CMS Content Container, no qual são permitidas novas personalizações de tipo de exibição, destaques, adição de banners e customização de estilo. A funcionalidade precisou que fosse criado um novo componente chamado "Thumbnail", o qual será responsável pela exibição das categorias com imagens. Também é utilizado o componente "Botão de Navegação" para exibição em forma de lista.
Considerações Iniciais
A configuração do menu de categorias dentro do componente Content Container precisa que não haja outro menu de categorias publicado, pois pode haver sobreposição dos dois.
Para cada nível de subcategorias é necessário criar um novoContent Container. Não há limite de níveis.
É possível mesclar a exibição de componentes com e sem imagem.
O redirecionamento das categorias/subcategorias não estão restritos a apenas categorias propriamente ditas no Cloud Commerce do cliente.
Entendendo os Componentes para o Menu
Configuração - Content Container
Entre no Contentful e faça login com o e-mail que já possui acesso à ferramenta.
Na aba "Content", clique em "Add Entry" e selecione a opção do componente "Content Container".
Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
Título: Título do modelo e se ele será exibido no app.
Ativo: Define se o componente estará ativo ou não no app.
Ítens de conteúdo: Adicionar e configurar o componente "Coleção" (será explicado posteriormente).
ID do local: Selecionar o local onde os conteúdos serão exibidos. Neste caso, categories (categorias).
Deixe o resto dos campos em branco.
Configuração - Coleção
O componente Coleção é um item muito importante dentro do Content Container, a partir dele podemos configurar a estrutura da página que exibe aquele nível de categorias.
Ao abrir um card de coleção para edição, preencha os campos indicados conforme as instruções abaixo:
Ativo: Determina se o componente estará ativo ou não no app.
Título: Nome para identificação do componente.
Componentes de Espaçamento (Padding): Configuração do espaço externo ao componente, ou seja, a distância entre esse card e outros elementos ao redor dele. Deve ser preenchido com o valor em pixels. Contempla as propriedades:
Margem horizontal
Margem vertical
Espaçamento entre os itens
Direção: Irá escolher entre horizontal e vertical.
Horizontal: Automaticamente a listagem vira um Carrossel.
Vertical: A listagem vai se comportar com a seguinte ordem de prioridade, baseada na configuração do seu componente Thumbnail:
Flex: Se torna Flex automaticamente ao definir os campos Quantidade de itens por coluna ou linha e Altura dos itens por coluna ou linha.
Grid: Ao definir a Quantidade de coluna ou linha como 2 ou mais, sem especificar a Quantidade de itens por coluna ou linha e Altura dos itens por coluna ou linha, vira Grid.
List: Definindo a Quantidade de coluna ou linha menor que 2 e a Altura dos itens, sem especificar a Quantidade de itens por coluna ou linha e Altura dos itens por coluna ou linha, vira List.
• Ao configurar uma Coleção com Botão de Navegação como item filho, selecionar a opção vertical. * Quantidade de coluna ou linha: Define quantas linhas ou colunas aquela coleção deve ter em sua exibição ao mesmo tempo na tela. * Quantidade de itens por coluna ou linha: Define quantos itens aparecem em cada linha ou coluna. * Altura dos itens: Define a altura individual dos cards (em pixels). * Altura dos itens por coluna ou linha: Controla a altura total de uma linha/coluna de itens (em pixels). * Quantidade máxima de itens: Define a quantidade máxima de itens que devem ser exibidos naquela coleção. Pode ser deixado em branco.
Configuração - Thumbnail
Os Thumbnails são cards com imagem criados para substituir a antiga forma de construir as categorias e carrosséis, permitindo maior versatilidade de customizações.
Preencha os campos indicados conforme as instruções abaixo:
Título: Define o texto que será exibido no card.
Ativo: Determina se o componente estará ativo ou não no app.
Imagem: Adicionar imagem escolhida (para Contentful recomendamos o uso do espaço para URL da imagem)
Proporção da imagem: Define o formato em que a imagem será exibida no componente. (circle, square, 3/4, 4/3)
Tipo: Define o tipo de componente onde essa imagem será usada. Pode ser em formado de Grid, List, Flex (ocupa todo o espaço disponível) ou carrosséis (não será usado nessa configuração).
Alinhamento: Controla como a imagem será posicionada dentro da tela (centro, á esquerda ou á direita).
Exibir destaque: Controla se a imagem/elemento terá algum tipo de destaque visual (não é válido para o tipo Flex).
Exibir borda: Ativa ou desativa a exibição de uma borda ao redor da imagem/componente.
Exibir fundo: Controla se o fundo do componente será exibido (cor, gradiente ou área de background).
Tipo de destino: Define se o card irá redirecionar para categoria, coleção, produto, busca ou outro.
ID relacionado ao tipo de destino: ID relativo ao destino escolhido.
Exibição programada (início e fim): Define o período de exibição do componente.
Configuração - Botão de Navegação
É uma alternativa para o formato de exibição das categorias em lista sem imagem. Possui os mesmos redirecionamentos do Thumbnail e pode ser customizado.
Preencha os campos indicados conforme as instruções abaixo:
Texto: Define o texto que será exibido no botão.
Ativo: Determina se o componente estará ativo ou não no app.
Cor do texto: Define a cor do texto do botão.
Cor do fundo: Define a cor de fundo do botão.
Arredondamento dos cantos: Valor numérico que define o quão arredondado o botão será, pode ser deixado em branco.
Tipo de destino: Define se o botão irá redirecionar para categoria, coleção, produto, busca ou outro.
ID relacionado ao tipo de destino: ID relativo ao destino escolhido.
Exibição programada (início e fim): Define o período de exibição do componente.
Configuração do Menu de Categorias
Crie um novo modelo Content Container no seu CMS.
Dentro do modelo, preencha a configuração ID do local com o valor categories.
Adicione um novo Item de Conteúdo com o valor Coleção e preencha as configurações conforme explicado anteriormente.
Adicione um novo Item:
Para cards com imagens, selecione Thumbnail e preencha as configurações conforme explicado anteriormente. É possível alternar entre tipos diferentes de Thumbnail apenas adicionando um Item separado.
Para a listagem das categorias sem imagem, selecione Botão de Navegação e preencha as configurações conforme explicado anteriormente.
É possível alternar entre dois itens criando também coleções diferentes.
Para configurar um novo nível de categoria é preciso seguir o passo a passo:
Em seu item de conteúdo (categoria) que terá uma subcategoria, selecione o Tipo de destino com o valor ContentPage e preencha o ID relacionado ao tipo de destino com um valor arbitrário que você tenha certeza ser único (exemplo: subcategorias_de_{nomeDaCategoria}).
Crie um novo Content Container com ID do local com valor custom e ID do local personalizado com o mesmo valor preenchido no passo anterior.
Nesse novo Content Container, repita os passos 3 e 4.
É possível criar quantos níveis de categoria achar necessário a partir do redirecionamento ContentPage, precisando apenas que sejam criados novos Content Containers também.
Com tudo finalizado, lembre de despublicar o menu de categorias anterior (caso possua) e publicar o novo (e tudo que foi criado nesse passo a passo).
Exemplo
Solicitar a funcionalidade
Encaminhe uma solicitação ao suporte, informando o interesse na implementação da funcionalidade "Menu de Categorias pelo Content Container".