Passar blocks para o menu da Vtex via custom

VTEX in your native language 🌎 Português
1

Estou criando um componente custom cujo objetivo é ser um menu totalmente modificável via site-editor, ou seja, todas as informações necessárias para ele devem ser passadas via props.
Para fazer isso, estou simplesmente chamando os componentes já existentes da VTEX dentro do meu custom, mas ao fazer isso, me deparei com um problema: como passar blocks?
Para utilizar um submenu, ele é passado via blocks para o menu-item, dessa forma:
image

E por conta disso, o submenu não chega a renderizar
image

A minha dúvida é: existe uma forma de fazer isso funcionar? Eu deveria seguir outro caminho, talvez usando o app mega-menu da VTEX?

2

@GabrielBrandao1618 tudo bem?

Não sei se já conseguiu resolver, mas vou deixar algumas sugestões.

Para fazer funcionar o seu componente customizado que utiliza o menu e submenu com o Site Editor da VTEX, você tem algumas considerações a fazer:

1. Utilização de blocks e props no VTEX IO:

  • Blocos (blocks): Na VTEX, os blocks são fundamentais para estruturar componentes que dependem de outros componentes. Ao passar um bloco dentro de outro, como no seu caso (menu-item com submenu), você deve garantir que as referências e a hierarquia dos blocos estão corretamente configuradas. O JSON que você mostrou é a maneira correta de fazer essa associação.
  • Props: Ao passar propriedades para os blocos, você define como eles devem se comportar. No seu código React, você está passando itemProps para MenuItem, o que é correto, mas precisa garantir que as propriedades passem corretamente para todos os blocos aninhados.

2. Possível solução utilizando Mega-Menu:

Se o seu objetivo é criar um menu altamente customizável e complexo, uma alternativa seria utilizar o VTEX Mega Menu, que já é uma solução pronta e testada para criar menus multi-nível. O Mega Menu permite que você crie e gerencie submenus de forma mais direta usando o Site Editor, evitando complicações com o gerenciamento manual de blocos e propriedades.

3. Melhorando o Componente Custom:

Se você quer continuar com o componente customizado:

  • Verifique se os blocos de submenu estão sendo corretamente passados e renderizados no seu componente MenuItem.
  • Garanta que a estrutura do JSON de blocks está corretamente refletida no seu código React.
  • Teste a passagem de blocos em diferentes cenários no Site Editor para verificar como eles são renderizados na prática.

4. Exemplo de Ajuste no Código:

No código React, você poderia passar os submenus como children do MenuItem e renderizá-los condicionalmente:

return (
  <Menu>
    {items.map((item) => (
      <MenuItem
        itemProps={{ text: item.text, href: item.href }}
        type="custom"
        key={item.href}
      >
        {item.submenu && <Submenu>{item.submenu}</Submenu>}
      </MenuItem>
    ))}
  </Menu>
);

Nesse exemplo, item.submenu poderia ser passado via JSON e gerenciado no Site Editor, garantindo que os submenus são renderizados somente quando realmente existem.

Documentação Relevante:

Espero que estas informações possam ajudar.

Abs,
Estevão.