Main frontend menu generation in Magento 2

May 12, 2016 - E-Commerce, Fire development, Magento 2

Magento 2 Development
If you are familiar with Magento 1.x menu generation, you will be surprised how similar is the appropriate Magento 2 process. There are 9 steps of menu generation.

Table of contents

1 magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml#L18
2 magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Theme/Block/Html/Topmenu.php#L72-L75
3 magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Helper/Category.php#L115
4 magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Model/Category.php#L947
5 magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Model/ResourceModel/Category.php#L628-L640
6 magento/magento2/blob/487f5f45/app/code/Magento/Theme/view/frontend/requirejs-config.js#L27-L27
7 magento/magento2/blob/487f5f45/app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml#L21-L24
8 magento/magento2/blob/487f5f45/lib/web/mage/menu.js#L14-L17
9 magento/magento2/blob/487f5f45/lib/web/jquery/jquery-ui.js#L11439-L11439

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml#L18

?>
 <?php
 /**
 * Top menu for store
 *
 * @see \Magento\Theme\Block\Html\Topmenu
 */
 ?>
 <?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
 <?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

 <nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
    </ul>
 </nav>

<?php

/**

* Top menu for store

* @see \Magento\Theme\Block\Html\Topmenu

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>

<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<?php /* @escapeNotVerified */ echo $_menu; ?>

</ul>

</nav>

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Theme/Block/Html/Topmenu.php#L72-L75

$this->_eventManager->dispatch(
    'page_block_html_topmenu_gethtml_before',
    ['menu' => $this->_menu, 'block' => $this]
);

$this->_eventManager->dispatch(

'page_block_html_topmenu_gethtml_before',

['menu' => $this->_menu, 'block' => $this]

);

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Observer/AddCatalogToTopmenuItemsObserver.php#L54

/**
  * Checking whether the using static urls in WYSIWYG allowed event
  *
  * @param \Magento\Framework\Event\Observer $observer
  * @return void
  */
public function execute(\Magento\Framework\Event\Observer $observer)
 {
    $block = $observer->getEvent()->getBlock();
    $block->addIdentity(\Magento\Catalog\Model\Category::CACHE_TAG);
    $this->_addCategoriesToMenu($this->catalogCategory->getStoreCategories(), $observer->getMenu(), $block);
}

/**
  * Recursively adds categories to top menu
  *
  * @param \Magento\Framework\Data\Tree\Node\Collection|array $categories
  * @param \Magento\Framework\Data\Tree\Node $parentCategoryNode
  * @param \Magento\Theme\Block\Html\Topmenu $block
  * @return void
  */

/**

* Checking whether the using static urls in WYSIWYG allowed event

* @param \Magento\Framework\Event\Observer $observer

* @return void

public function execute(\Magento\Framework\Event\Observer $observer)

{

$block = $observer->getEvent()->getBlock();

$block->addIdentity(\Magento\Catalog\Model\Category::CACHE_TAG);

$this->_addCategoriesToMenu($this->catalogCategory->getStoreCategories(), $observer->getMenu(), $block);

}

/**

* Recursively adds categories to top menu

* @param \Magento\Framework\Data\Tree\Node\Collection|array $categories

* @param \Magento\Framework\Data\Tree\Node $parentCategoryNode

* @param \Magento\Theme\Block\Html\Topmenu $block

* @return void

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Helper/Category.php#L115

        return [];
    }

    $recursionLevel = max(
        0,
        (int)$this->scopeConfig->getValue(
            'catalog/navigation/max_depth',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        )
    );
    $storeCategories = $category->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);

    $this->_storeCategories[$cacheKey] = $storeCategories;
    return $storeCategories;
}

/**
  * Retrieve category url
  *
  * @param ModelCategory $category
  * @return string

return [];

}

$recursionLevel = max(

(int)$this->scopeConfig->getValue(

'catalog/navigation/max_depth',

\Magento\Store\Model\ScopeInterface::SCOPE_STORE

)

);

$storeCategories = $category->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);

$this->_storeCategories[$cacheKey] = $storeCategories;

return $storeCategories;

}

/**

* Retrieve category url

* @param ModelCategory $category

* @return string

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Model/Category.php#L947

*
 * @param int $parent
 * @param int $recursionLevel
 * @param bool $sorted
 * @param bool $asCollection
 * @param bool $toLoad
 * @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\ResourceModel\Category\Collection
 */
public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)
 {
    $categories = $this->getResource()->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);
    return $categories;
}

/**
  * Return parent categories of current category
  *
  * @return \Magento\Framework\DataObject[]|\Magento\Catalog\Model\Category[]
  */
public function getParentCategories()
 {

* @param int $parent

* @param int $recursionLevel

* @param bool $sorted

* @param bool $asCollection

* @param bool $toLoad

* @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\ResourceModel\Category\Collection

public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)

{

$categories = $this->getResource()->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);

return $categories;

}

/**

* Return parent categories of current category

* @return \Magento\Framework\DataObject[]|\Magento\Catalog\Model\Category[]

public function getParentCategories()

{

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Model/ResourceModel/Category.php#L628-L640

public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)
 {
    $tree = $this->_categoryTreeFactory->create();
    /* @var $tree \Magento\Catalog\Model\ResourceModel\Category\Tree */
    $nodes = $tree->loadNode($parent)->loadChildren($recursionLevel)->getChildren();

    $tree->addCollectionData(null, $sorted, $parent, $toLoad, true);

    if ($asCollection) {
        return $tree->getCollection();
    }
    return $nodes;
}

public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)

{

$tree = $this->_categoryTreeFactory->create();

/* @var $tree \Magento\Catalog\Model\ResourceModel\Category\Tree */

$nodes = $tree->loadNode($parent)->loadChildren($recursionLevel)->getChildren();

$tree->addCollectionData(null, $sorted, $parent, $toLoad, true);

if ($asCollection) {

return $tree->getCollection();

}

return $nodes;

}

magento/magento2/blob/487f5f45/app/code/Magento/Theme/view/frontend/requirejs-config.js#L27-L27

"menu":                   "mage/menu",

1	"menu": "mage/menu",

magento/magento2/blob/487f5f45/app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml#L21-L24

<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
    <?php /* @escapeNotVerified */ echo $_menu; ?>
    <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>
</ul>

<?php /* @escapeNotVerified */ echo $_menu; ?>

<?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>

</ul>

magento/magento2/blob/487f5f45/lib/web/mage/menu.js#L14-L17

/**
  * Menu Widget - this widget is a wrapper for the jQuery UI Menu
  */
$.widget('mage.menu', $.ui.menu, {

/**

* Menu Widget - this widget is a wrapper for the jQuery UI Menu

$.widget('mage.menu', $.ui.menu, {

magento/magento2/blob/487f5f45/lib/web/jquery/jquery-ui.js#L11439-L11439

$.widget( "ui.menu", {

1	$.widget( "ui.menu", {

Source

More tips from Magento 2 cookbook

Post Tags:magento 2 Magento 2 Developer’s Cookbook Main frontend menu

← Previous Post Next Post →

Magento 2 Google Sheets Integration Guide

Have you ever known that importing data to Magento 2 from Google Sheets is possible? It is not a joke,… Read more…
Magento 2 Page Builder Import & Export

In the following article, we shed light on Magento 2 Page Builder. You will learn its core features. After that,… Read more…
How to Import Custom CSV to Magento 2 Programmatically

Let's discuss the Magento 2 import of custom CSV files. Recently, we've been surfing across endless StackExchange discussions and stumbled… Read more…
How to Import Magento 2 Product by Store View?

You've come to the right place if you run a multilingual storefront or use several different store views. Below, we… Read more…
Magento 2 MSI User Guide: How to Import & Export Magento 2 MSI (Multi Source Inventory)

This Magento 2 MSI user guide briefly explains the platform's multi-source inventory functionality and then focuses on the Magento 2… Read more…
Magento Error Log to Debug Magento 2 Import & Export

Today, we are going to discuss the Magento error log for import and export processes. Since Magento 2 doesn’t have any… Read more…
Magento 2 Import of Custom Attributes: How to Import Products with Custom Attributes to Magento 2

When you import products to Magento 2, you may face various difficulties. Transferring them to your website without headaches is… Read more…
How to Import Data via REST API into Magento 2

Today, we'd like to draw your attention to the Magento 2 REST API Import. Depending on the edition of your… Read more…
How to Create a Custom Import in Magento 2

Although the default import and export instruments of Magento 2 are enough to satisfy the basic data transfer needs, you… Read more…
Magento 2 Import: How To Fix Value For Attribute Contains Incorrect Value Error

In the following article, you will discover a universal algorithm for solving Magento 2 errors associated with incorrect attribute values.… Read more…
Magento 2 Imported Resource (Image) Could Not Be Downloaded: How To Fix This Magento 2 Import Error

In the following article, we explore a problem that prevents Magento users from importing images. You may be familiar with… Read more…
Magento 2 General System Exception Happened: How To Fix Error During Magento 2 Import

If you regularly deal with Magento 2 import processes, you might have faced the following message: General System Exception Happened.… Read more…
How to Import & Export Product Attributes for Magento 2 (Along with Attribute Values & Sets)

Today, we are going to talk about the import and export of product attributes for Magento 2. Operating an e-commerce store… Read more…
How to Import Product Images into Magento 2 in Bulk

Below, we describe how to import product images in Magento 2 using CSV. Since it is a part of a product… Read more…
Magento 2 Bulk API & Asynchronous Import

Below, we discuss the Magento 2 bulk API and the corresponding asynchronous import processes. After a short introduction to the… Read more…
How to Import Database in Magento 2

Recently, we’ve spotted a question on StackExchange regarding the Magento 2 database import. David Duong faced problems while transferring a… Read more…
Magento 2 B2B Requisition List Guide: How to Manage & Import Requisition Lists in Magento 2

In the following article, we explain what a requisition list of Magento 2 is - a feature exclusively available in Adobe… Read more…
Magento 2 Shared Catalog Guide: How to Import and Export Shared Catalogs in Magento 2

The following article explores Magento 2 shared catalogs - a B2B entity exclusively available to Adobe Commerce users. You will learn what a… Read more…
Magento 2 B2B Company Guide: Revealing Company Structure & Import

If you want to migrate from the existing Magento B2B website, you may face a problem when companies cannot be… Read more…
How to Import & Export Magento 2 Gift Cards

Gift cards are a useful addition to every e-commerce website. They are frequently used on e-commerce websites with any assortment:… Read more…

Related posts