Aller au contenu principal

Menus

Récupérez des menus de navigation à plusieurs niveaux construits à partir des pages configurées dans OneEntry.

Plus d'informations sur l'interface utilisateur du module https://doc.oneentry.cloud/docs/category/menu (ouvre dans un nouvel onglet)

Le module Menus renvoie des structures de navigation telles que les menus d'en-tête, de pied de page, de barre latérale et mobiles.

Vous créez les menus dans le panneau d'administration OneEntry (Menus → Create Menu → Add Pages → Save) ou via l'Admin API, et ce module récupère l'arbre complet du menu : vous pouvez afficher la navigation sans coder les liens en dur. Le SDK ne fait que lire les menus.

Démarrage rapide​

Initialisez le module depuis defineOneEntry :


const {  } = defineOneEntry(
  , {
    
  }
);

Récupérez un menu par son marqueur et parcourez ses pages :

// 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);
});

Un menu (IMenusEntity) est une structure de navigation qui relie des pages entre elles :

  • identifier : le marqueur du menu (par ex. "main_menu")
  • localizeInfos : le titre localisé du menu
  • pages : les éléments du menu : pages et éléments personnalisés

Un menu contient des pages configurées dans OneEntry et des éléments personnalisés ; itemType permet de les distinguer (voir ci-dessous). Pour ajouter un lien externe, créez une page de type external_page dans le module Pages et ajoutez-la au menu. Pour avoir des menus différents selon les sections, créez plusieurs menus avec des marqueurs différents (par ex. header_menu, footer_menu, sidebar_menu) et récupérez chacun avec getMenusByMarker().

Éléments du menu​

Chaque élément de pages est un objet 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
}

Les éléments ont un champ position. Triez-les selon ce champ pour conserver l'ordre d'affichage configuré dans le panneau d'administration.

Imbrication​

Les menus peuvent être imbriqués. L'imbrication s'exprime par le tableau children[] de chaque élément, avec son parentId (les éléments de premier niveau ont parentId: null). Il n'y a pas de champ de profondeur ; on l'obtient en parcourant children[]. Pour construire un menu à plusieurs niveaux (déroulant), imbriquez les pages dans le panneau d'administration et affichez children[] de façon récursive.

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)

Pour marquer l'élément actif, comparez l'URL de la page courante avec le pageUrl de chaque élément. Pour construire un fil d'Ariane, remontez les parentId depuis la page courante (Accueil > Catégorie > Sous-catégorie > Page courante).

Deux sortes d'éléments de menu : itemType et parentType​

Un menu contient deux sortes d'éléments, les pages de menu et les éléments personnalisés, et leurs identifiants proviennent de séquences différentes, donc ils se chevauchent : parentId: 5 seul ne dit pas si le parent est la page d'id 5 ou l'élément personnalisé d'id 5.

Deux champs lèvent l'ambiguïté :

  • itemType ('page' | 'custom') : ce qu'est l'élément lui-même.
  • parentType ('page' | 'custom' | null) : ce qu'est son parent. null avec parentId: null signifie que l'élément est de premier niveau.

Un élément personnalisé a la même forme qu'un élément de page : son pageUrl contient la valeur que vous lui avez attribuée (par exemple un lien externe), attributeValues est vide, et localizeInfos reprend le titre dans menuTitle avec htmlContent et plainContent vides. Vérifiez itemType avant de traiter pageUrl comme un marqueur de page.

Les enfants d'un élément portent son itemType comme parentType : faites correspondre la paire lorsque vous reconstruisez l'arbre vous-même :

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

Langues​

Les menus sont localisés selon le langCode transmis à getMenusByMarker(), avec repli sur la langue définie dans defineOneEntry(). Récupérez les menus dans la langue de l'utilisateur. Référencez les menus par marqueur plutôt que par ID (les marqueurs sont stables d'un environnement à l'autre), mettez-les en cache (ils changent rarement) et prévoyez un affichage de repli lorsqu'un marqueur est introuvable.

Méthodes​

MéthodeDescriptionCas d'usage
getMenusByMarker()Récupérer un menu par marqueurRécupérer une structure de menu précise

Voir aussi​