Pular para o conteúdo principal

Menus

Busque menus de navegação do site com vários níveis, montados a partir de páginas configuradas no OneEntry.

Mais informações sobre a interface do módulo https://doc.oneentry.cloud/docs/category/menu (abre em uma nova aba)

O módulo Menus retorna estruturas de navegação, como menus de cabeçalho, rodapé, barra lateral e mobile.

Você cria menus no painel de administração do OneEntry (Menus → Create Menu → Add Pages → Save) ou pela Admin API, e este módulo busca a árvore completa do menu, para que você possa renderizar a navegação sem fixar links no código. O SDK apenas lê menus.

Início rápido​

Inicialize o módulo a partir de defineOneEntry:


const {  } = defineOneEntry(
  , {
    
  }
);

Busque um menu pelo seu marcador e percorra suas páginas:

// Fetch the "main_menu" structure in English.
const menu = await Menus.getMenusByMarker("main_menu", "en_US");
if ('statusCode' in menu) throw new Error(menu.message);

console.log(menu.identifier, menu.localizeInfos.title);

// Top-level items; nested items live in each item's children[].
menu.pages.forEach((item) => {
  console.log(item.pageUrl, item.localizeInfos.title, item.children);
});

Um menu (IMenusEntity) é uma estrutura de navegação que conecta páginas:

  • identifier: o marcador do menu (por exemplo, "main_menu")
  • localizeInfos: o título localizado do menu
  • pages: os itens do menu: páginas e itens personalizados

Um menu contém páginas configuradas no OneEntry e itens personalizados; itemType os diferencia (veja abaixo). Para adicionar um link externo, crie uma página do tipo external_page no módulo Pages e adicione-a ao menu. Para ter menus diferentes em seções diferentes, crie vários menus com marcadores diferentes (por exemplo, header_menu, footer_menu, sidebar_menu) e busque cada um com getMenusByMarker().

Itens do menu​

Cada item em pages é um objeto IMenusPages:

{
  id: 123,                       // Page ID
  pageUrl: "home",               // Page URL (marker)
  localizeInfos: { title: "Home" },
  attributeValues: {},           // Custom attribute values
  parentId: null,                // null for top-level items
  parentType: null,              // "page" | "custom" | null - kind of the parent
  itemType: "page",              // "page" | "custom" - kind of this item
  position: 1,                   // Display order
  children: []                   // Nested menu items
}

Os itens têm um campo position. Ordene por ele para manter a ordem de exibição configurada no painel de administração.

Aninhamento​

Os menus podem ser aninhados. O aninhamento é expresso pelo array children[] de cada item junto com seu parentId (itens de nível superior têm parentId: null). Não há campo de profundidade; você obtém a profundidade percorrendo children[]. Para montar um menu de vários níveis (dropdown), aninhe as páginas no painel de administração e renderize children[] recursivamente.

Header Menu
├─ Home (parentId: null)
├─ About (parentId: null)
│  ├─ Team (parentId: 2)
│  └─ History (parentId: 2)
├─ Products (parentId: null)
│  └─ Electronics (parentId: 4)
│     ├─ Phones (parentId: 5)
│     └─ Laptops (parentId: 5)
└─ Contact (parentId: null)

Para marcar o item ativo, compare a URL da página atual com o pageUrl de cada item. Para montar breadcrumbs, siga parentId para cima a partir da página atual (Início > Categoria > Subcategoria > Página atual).

Dois tipos de item de menu: itemType e parentType​

Um menu contém dois tipos de item, páginas do menu e itens personalizados, e seus ids vêm de sequências diferentes, portanto se sobrepõem: parentId: 5 sozinho não diz se o pai é a página com id 5 ou o item personalizado com id 5.

Dois campos resolvem isso:

  • itemType ('page' | 'custom'): o que o próprio item é.
  • parentType ('page' | 'custom' | null): o que é o seu pai. null junto com parentId: null significa que o item é de nível superior.

Um item personalizado tem o mesmo formato de um item de página: seu pageUrl contém o valor que você definiu para ele (por exemplo, um link externo), attributeValues fica vazio e localizeInfos repete o título como menuTitle, com htmlContent e plainContent vazios. Verifique itemType antes de tratar pageUrl como marcador de página.

Os filhos de um item carregam o itemType dele como seu parentType, então faça a correspondência pelo par ao reconstruir a árvore por conta própria:

const childrenOf = (items, parent) =>
  items.filter(
    (item) => item.parentId === parent.id && item.parentType === parent.itemType,
  );

Idiomas​

Os menus são localizados pelo langCode que você passa para getMenusByMarker(), com fallback para o idioma definido em defineOneEntry(). Busque os menus no idioma do usuário. Referencie menus pelo marcador em vez do ID (os marcadores são estáveis entre ambientes), armazene-os em cache (eles raramente mudam) e renderize um fallback quando um marcador não for encontrado.

Métodos​

MétodoDescriçãoCaso de uso
getMenusByMarker()Obter menu pelo marcadorBuscar a estrutura de um menu específico

Relacionado​