Aller au contenu principal

Introduction

Récupérez des menus de navigation multi-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

🎯 Que fait ce module ?​

Le module Menus vous permet de récupérer des structures de navigation de site - menus de header, menus de footer, navigation latérale, menus mobiles - en construisant dynamiquement une navigation multi-niveaux à partir des pages configurées dans OneEntry.

Vous créez des menus dans le panneau d'administration de OneEntry (en liant les pages entre elles) et ce module récupère l'arbre complet du menu, vous permettant ainsi de rendre la navigation dynamiquement sans coder les liens en dur. Le SDK est en lecture seule pour les menus - vous les récupérez, vous ne les créez pas via le code.

🚀 Démarrage rapide​

Initialisez le module à partir de defineOneEntry :


const { Menus } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

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");

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

✨ Concepts clés​

Qu'est-ce qu'un Menu ?​

Un Menu (IMenusEntity) est une structure de navigation qui lie les pages entre elles :

  • identifier - le marqueur du menu (par exemple, "main_menu")
  • localizeInfos - le titre localisé du menu
  • pages - le tableau des éléments du menu (chaque élément est une page)

Structure de l'élément de menu​

Chaque élément dans 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
  position: 1,                   // Display order
  children: []                   // Nested menu items
}

Hiérarchie des menus​

Les menus supportent des structures imbriquées. L'imbrication est exprimée à travers le tableau children[] de chaque élément ainsi que son parentId (les éléments de premier niveau ont parentId: null). Il n'y a pas de champ de profondeur séparé - vous déterminez la profondeur en parcourant children[].

📂 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)

📋 Ce que vous devez savoir​

Les menus sont créés dans le panneau d'administration​

Vous ne pouvez pas créer de menus via le SDK - ils sont créés dans le panneau d'administration de OneEntry (Menus → Créer un menu → Ajouter des pages → Enregistrer) ou via l'API Admin. Le SDK est destiné à récupérer les structures de menu.

Les éléments de menu sont des pages​

Chaque élément de menu est une page configurée dans OneEntry - vous ne pouvez pas ajouter de liens arbitraires. Pour ajouter un lien externe, créez une page avec une URL externe dans le module Pages et ajoutez-la au menu.

Trier par position​

Les éléments portent un champ position - triez-les par ce champ pour respecter l'ordre d'affichage configuré dans le panneau d'administration.

Multi-langue​

Les menus sont localisés par le langCode passé à getMenusByMarker() (retombant sur la langue définie dans defineOneEntry()). Récupérez les menus dans la langue préférée de l'utilisateur.

📊 Tableau de référence rapide​

MéthodeDescriptionCas d'utilisation
getMenusByMarker()Récupérer un menu par marqueurRécupérer une structure de menu spécifique

❓ Questions fréquentes (FAQ)​

Comment créer un menu multi-niveaux (dropdown) ?​

Construisez l'arbre du menu dans le panneau d'administration en imbriquant les pages. L'imbrication est renvoyée à travers le tableau children[] de chaque élément - rendez-le de manière récursive.

Puis-je ajouter des liens externes aux menus ?​

Les éléments de menu doivent être des pages configurées dans OneEntry. Pour ajouter un lien externe, créez une page avec une URL externe dans le module Pages, puis ajoutez-la à votre menu.

Comment gérer l'état de l'élément de menu actif ?​

Comparez l'URL de la page actuelle avec le pageUrl de chaque élément et appliquez une classe active lorsqu'ils correspondent.

Comment construire des fils d'Ariane ?​

Tracez depuis la page actuelle à travers les relations parentId (Accueil > Catégorie > Sous-catégorie > Page actuelle).

Puis-je avoir des menus différents pour différentes sections ?​

Oui - créez plusieurs menus avec des marqueurs différents (par exemple, header_menu, footer_menu, sidebar_menu) et récupérez chacun avec getMenusByMarker().

🎓 Meilleures pratiques​

  • Utilisez des marqueurs, pas des IDs - les marqueurs sont stables à travers les environnements.
  • Rendez children[] de manière récursive - c'est ainsi que l'imbrication est représentée.
  • Trier par position - respectez l'ordre d'affichage configuré.
  • Mettre en cache les menus - ils changent rarement.
  • Passez langCode - récupérez le menu dans la langue de l'utilisateur.
  • Gérez les menus manquants avec grâce - fournissez une solution de repli lorsque le marqueur n'est pas trouvé.

🔗 Documentation connexe​