Saltar al contenido principal

Menus

Obtén menús de navegación multinivel del sitio, construidos a partir de las páginas configuradas en OneEntry.

Más información sobre la interfaz de usuario del módulo https://doc.oneentry.cloud/docs/category/menu (abre en una nueva pestaña)

El módulo Menus devuelve estructuras de navegación como los menús de cabecera, pie de página, barra lateral y móvil.

Los menús se crean en el panel de administración de OneEntry (Menus → Create Menu → Add Pages → Save) o mediante la Admin API, y este módulo obtiene el árbol completo del menú, de modo que puedes renderizar la navegación sin codificar los enlaces. El SDK solo lee los menús.

Inicio rápido​

Inicializa el módulo desde defineOneEntry:


const {  } = defineOneEntry(
  , {
    
  }
);

Obtén un menú por su marcador y recorre sus 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);
});

Menús​

Un menú (IMenusEntity) es una estructura de navegación que enlaza páginas entre sí:

  • identifier: el marcador del menú (p. ej. "main_menu")
  • localizeInfos: el título localizado del menú
  • pages: los elementos del menú: páginas y elementos personalizados

Un menú contiene páginas configuradas en OneEntry y elementos personalizados; itemType los distingue (ver más abajo). Para añadir un enlace externo, crea una página de tipo external_page en el módulo Pages y añádela al menú. Para tener menús distintos en distintas secciones, crea varios menús con marcadores diferentes (p. ej., header_menu, footer_menu, sidebar_menu) y obtén cada uno con getMenusByMarker().

Elementos del menú​

Cada elemento de pages es un 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
}

Los elementos tienen un campo position. Ordénalos por él para mantener el orden de visualización configurado en el panel de administración.

Anidamiento​

Los menús pueden anidarse. El anidamiento se expresa mediante el array children[] de cada elemento junto con su parentId (los elementos de nivel superior tienen parentId: null). No hay un campo de profundidad; la profundidad se obtiene recorriendo children[]. Para construir un menú multinivel (desplegable), anida las páginas en el panel de administración y renderiza children[] de forma recursiva.

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 el elemento activo, compara la URL de la página actual con el pageUrl de cada elemento. Para construir migas de pan, sigue parentId hacia arriba desde la página actual (Inicio > Categoría > Subcategoría > Página actual).

Dos tipos de elementos de menú: itemType y parentType​

Un menú contiene dos tipos de elementos, páginas del menú y elementos personalizados, y sus ids proceden de secuencias distintas, por lo que se solapan: parentId: 5 por sí solo no indica si el padre es la página con id 5 o el elemento personalizado con id 5.

Dos campos lo resuelven:

  • itemType ('page' | 'custom'): qué es el propio elemento.
  • parentType ('page' | 'custom' | null): qué es su padre. null junto con parentId: null significa que el elemento es de nivel superior.

Un elemento personalizado tiene la misma forma que un elemento de página: su pageUrl contiene el valor que le asignaste (por ejemplo, un enlace externo), attributeValues está vacío y localizeInfos repite el título como menuTitle con htmlContent y plainContent vacíos. Comprueba itemType antes de tratar pageUrl como marcador de página.

Los hijos de un elemento llevan su itemType como parentType, así que compara el par cuando reconstruyas el árbol por tu cuenta:

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

Idiomas​

Los menús se localizan según el langCode que pases a getMenusByMarker(); si no lo pasas, se usa el idioma configurado en defineOneEntry(). Obtén los menús en el idioma del usuario. Haz referencia a los menús por marcador en lugar de por ID (los marcadores son estables entre entornos), guárdalos en caché (cambian poco) y muestra una alternativa cuando no se encuentre un marcador.

Métodos​

MétodoDescripciónCaso de uso
getMenusByMarker()Obtiene un menú por marcadorObtener una estructura de menú concreta

Relacionado​