Scribd
Upload
2 views2 pages

Navbar API Usage

The document outlines the structure of a menu configuration system, detailing top-level objects, main menu categories, dropdowns, and media objects. It emphasizes the recursive nature of the menu, allowing for multi-level hierarchies and localization features. Additionally, it highlights the visibility control for different customer types and the use of SEO-friendly URLs for navigation.

Uploaded by

contactxloy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

Navbar API Usage

The document outlines the structure of a menu configuration system, detailing top-level objects, main menu categories, dropdowns, and media objects. It emphasizes the recursive nature of the menu, allowing for multi-level hierarchies and localization features. Additionally, it highlights the visibility control for different customer types and the use of SEO-friendly URLs for navigation.

Uploaded by

contactxloy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

Top-Level Object

Fields:
id : Unique identifier for the menu configuration.
created_at / updated_at : Timestamps for creation and updates.
color : Default color for the menu (e.g., #000 for black).
locale : Language setting (e.g., fr for French).
menuLists : An array of main menu categories (e.g., "FEMME", "HOMME", "ENFANT").

2. Main Menu Categories ( menuLists )

Structure:

{
"id": 9,
"menuName": "FEMME",
"menuLink": "/shop/1",
"color": "#FF0000",
"activeBTOC": true, // Visible for B2C customers
"activeBTOB": true, // Visible for B2B customers
"specificUrl": "1-femme",
"newUrl": "1-femme",
"dropdowns": [ ... ], // Submenu items
"mediaMenu": [ ... ] // Images/icons for this category
}

Key Fields :
dropdowns : Subcategories or submenu items.
mediaMenu : Images or media associated with the category (e.g., banners).

3. Dropdowns (Submenu Items)

Structure:

{
"id": 32,
"menuName": "NOUVEAUTÉS",
"menuLink": "/shop/519",
"color": "#ff0000",
"pos": 1, // Position/order in the menu
"activeBtoC": true, // Visibility for B2C
"activeBtoB": false, // Visibility for B2B
"specificUrl": "519-nouveautes-femme",
"newUrl": "519-nouveautes-femme",
"mediaMenu": { ... }, // Image for this submenu
"dropdowns": [ ... ] // Further nested submenus
}

Key Features :
Nesting: Each dropdown can have its own dropdowns , allowing infinite nesting (e.g., "VÊTEMENTS" → "Pantalons").
Activation Flags : activeBtoC / activeBtoB control visibility for different customer types.
SEO URLs: specificUrl and newUrl generate clean URLs (e.g., /shop/519 maps to 519-nouveautes-femme ).

4. Media Objects ( mediaMenu )

Structure:

{
"id": 10,
"name": "products4.jpg",
"url": "https://images.zen.com.tn/...",
"formats": {
"large": { ... },
"small": { ... },
"medium": { ... },
"thumbnail": { ... }
}
}
Purpose: Stores images for menu items, with multiple resolutions for responsive display.

5. Recursive Structure

Example:

FEMME (menuLists)
├── NOUVEAUTÉS (dropdowns)
├── VÊTEMENTS (dropdowns)
│ ├── Pantalons (dropdowns)
│ ├── Afficher tout (dropdowns)
│ │ └── ... (nested dropdowns)
│ └── Maille (dropdowns)
├── CHAUSSURES (dropdowns)
└── ACCESSOIRES (dropdowns)

Key Insight: The menu is a tree where each node ( dropdowns ) can have children ( dropdowns ), creating a multi-level hierarchy.

6. Special Features

Localization : Fields like menuName_en / menuName_ar suggest support for multiple languages.
Promotions/Flags: Items like "SOLDES" (sales) or "PROMOTION" have color: "#ff0000" for highlighting.
Dynamic Content: Some entries link to collections (e.g., "Spring Summer 2024") or personas (e.g., "FASHIONISTA").

7. Usage Example

User Path: A customer might navigate:

FEMME → VÊTEMENTS → Robes | Combinaisons → /shop/165

You might also like