Here i will show you how to grab all of the child categories and their subcategories in category top navigation menu.
By the way, if seen, there is a default function in the admin side of Magento which provides the convenience of setting the maximal depth of navigation for your menu as needed, but this functionality does not work in most Magento 2 version.
So let us know how we add any nested sub-category to Magento 2 category top navigation according to our needs or how we show four more depth sub-categories in the navigation menu.
By default magento2 provide depth of menu level is 4, But as you can see here the nested subcategory has more than 4 category depth so it won't show on the front-end.
Magento 2 Category Top Navigation Maximal Depth
Maximal depth in the category navigation decide the level of subcategory which shows the level of menu on the store view.
On the Admin sidebar, go to Stores > Settings > Configuration.
Expand Catalog and click on the Catalog underneath.
Expand the Category Top Navigation section.
You will see something like below screen. This section of mximal depth decide the level of category navigation menu in the store view.
This depth of the top navigation of category has a global configuration scope, so this setting applies to all websites, stores, and store views in the Magento 2.
How actually its should be visible on the frontend but it's wont be visible like the below screen.
You have to create the block and template for the just like below class.
Effective Category Level in Magento 2 for SEO
Search engine optimisation is the most important factor of online business success so the category structure of your catalog can influence how well your site is indexed by search engines.
The more deeply nested a category, the less likely it is to be thoroughly indexed. Magento 2 nested category level or depth of the category level should be between one and three visible levels which would be most effective.
How to Customise Maximal Depth Level of Category Navigation Menu
You just have to create a block for this and then you can get the data on the store view through the custom.phtml template.
<?php
namespace Wishusucess\CustomMenu\Block;
class Topmenu extends \Magento\Framework\View\Element\Template
{
protected $_categoryHelper;
protected $_categoryFlatConfig;
protected $_topMenu;
protected $_categoryFactory;
protected $_helper;
protected $_filterProvider;
protected $_blockFactory;
protected $_custommenuConfig;
protected $_storeManager;
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Magento\Catalog\Helper\Category $categoryHelper,
\Wishusucess\CustomMenu\Helper\Data $helper,
\Magento\Catalog\Model\Indexer\Category\Flat\State $categoryFlatState,
\Magento\Catalog\Model\CategoryFactory $categoryFactory,
\Magento\Theme\Block\Html\Topmenu $topMenu,
\Magento\Cms\Model\Template\FilterProvider $filterProvider,
\Magento\Cms\Model\BlockFactory $blockFactory
) {
$this->_categoryHelper = $categoryHelper;
$this->_categoryFlatConfig = $categoryFlatState;
$this->_categoryFactory = $categoryFactory;
$this->_topMenu = $topMenu;
$this->_helper = $helper;
$this->_filterProvider = $filterProvider;
$this->_blockFactory = $blockFactory;
$this->_storeManager = $context->getStoreManager();
parent::__construct($context);
}
public function getCategoryHelper()
{
return $this->_categoryHelper;
}
public function getCategoryModel($id)
{
$_category = $this->_categoryFactory->create();
$_category->load($id);
return $_category;
}
public function getHtml($outermostClass = '', $childrenWrapClass = '', $limit = 0)
{
return $this->_topMenu->getHtml($outermostClass, $childrenWrapClass, $limit);
}
public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
{
return $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);
}
public function getChildCategories($category)
{
if ($this->_categoryFlatConfig->isFlatEnabled() && $category->getUseFlatResource()) {
$subcategories = (array)$category->getChildrenNodes();
} else {
$subcategories = $category->getChildren();
}
return $subcategories;
}
public function getActiveChildCategories($category)
{
$children = [];
if ($this->_categoryFlatConfig->isFlatEnabled() && $category->getUseFlatResource()) {
$subcategories = (array)$category->getChildrenNodes();
} else {
$subcategories = $category->getChildren();
}
foreach($subcategories as $category) {
if (!$category->getIsActive()) {
continue;
}
$children[] = $category;
}
return $children;
}
public function getBlockContent($content = '') {
$content = html_entity_decode($content);
if(!$this->_filterProvider)
return $content;
return $this->_filterProvider->getBlockFilter()->filter(trim($content));
}
public function getCustomBlockHtml($type='after') {
$html = '';
$block_ids = $this->_custommenuConfig['custom_links']['staticblock_'.$type];
if (!$block_ids) return '';
$block_ids = preg_replace('/\s/', '', $block_ids);
$ids = explode(',', $block_ids);
$store_id = $this->_storeManager->getStore()->getId();
foreach($ids as $block_id) {
$block = $this->_blockFactory->create();
$block->setStoreId($store_id)->load($block_id);
if(!$block) continue;
$block_content = $block->getContent();
if(!$block_content) continue;
$content = $this->_filterProvider->getBlockFilter()->setStoreId($store_id)->filter($block_content);
if(substr($content, 0, 4) == '<ul>')
$content = substr($content, 4);
if(substr($content, strlen($content) - 5) == '</ul>')
$content = substr($content, 0, -5);
$html .= $content;
}
return $html;
}
public function getSubmenuItemsHtml($children, $level = 1, $max_level = 0, $column_width=12, $menu_type = 'fullwidth', $columns = null)
{
$html = '';
if(!$max_level || ($max_level && $max_level == 0) || ($max_level && $max_level > 0 && $max_level-1 >= $level)) {
$column_class = "";
if($level == 1 && $columns && ($menu_type == 'fullwidth' || $menu_type == 'staticwidth')) {
$column_class = "col-sm-".$column_width." ";
$column_class .= "mega-columns columns".$columns;
}
$html = '<ul class="subchildmenu '.$column_class.'">';
foreach($children as $child) {
$cat_model = $this->getCategoryModel($child->getId());
$rt_menu_hide_item = $cat_model->getData('rt_menu_hide_item');
if (!$rt_menu_hide_item) {
$sub_children = $this->getActiveChildCategories($child);
$rt_menu_cat_label = $cat_model->getData('rt_menu_cat_label');
$rt_menu_icon_img = $cat_model->getData('rt_menu_icon_img');
$rt_menu_font_icon = $cat_model->getData('rt_menu_font_icon');
$item_class = 'level'.$level.' ';
if(count($sub_children) > 0)
$item_class .= 'parent ';
$html .= '<li class="ui-menu-item '.$item_class.'">';
if(count($sub_children) > 0) {
$html .= '<div class="open-children-toggle"></div>';
}
if($level == 1 && $rt_menu_icon_img) {
$html .= '<div class="menu-thumb-img"><a class="menu-thumb-link" href="'.$this->_categoryHelper->getCategoryUrl($child).'"><img src="' . $this->_helper->getBaseUrl().'catalog/category/' . $rt_menu_icon_img . '" alt="'.$child->getName().'"/></a></div>';
}
$html .= '<a href="'.$this->_categoryHelper->getCategoryUrl($child).'">';
if ($level > 1 && $rt_menu_icon_img)
$html .= '<img class="menu-thumb-icon" src="' . $this->_helper->getBaseUrl().'catalog/category/' . $rt_menu_icon_img . '" alt="'.$child->getName().'"/>';
elseif($rt_menu_font_icon)
$html .= '<em class="menu-thumb-icon '.rt_menu_font_icon.'"></em>';
$html .= '<span>'.$child->getName();
if($rt_menu_cat_label)
$html .= '<span class="cat-label cat-label-'.$rt_menu_cat_label.'">'.$this->_custommenuConfig['cat_labels'][$rt_menu_cat_label].'</span>';
$html .= '</span></a>';
if(count($sub_children) > 0) {
$html .= $this->getSubmenuItemsHtml($sub_children, $level+1, $max_level, $column_width, $menu_type);
}
$html .= '</li>';
}
}
$html .= '</ul>';
}
return $html;
}
public function getCustomMenuHtml()
{
$html = '';
$categories = $this->getStoreCategories(true,false,true);
$this->_custommenuConfig = $this->_helper->getConfig('custommenu');
$max_level = $this->_custommenuConfig['general']['max_level'];
$html .= $this->getCustomBlockHtml('before');
foreach($categories as $category) {
if (!$category->getIsActive()) {
continue;
}
$cat_model = $this->getCategoryModel($category->getId());
$rt_menu_hide_item = $cat_model->getData('rt_menu_hide_item');
if(!$rt_menu_hide_item) {
$children = $this->getActiveChildCategories($category);
$rt_menu_cat_label = $cat_model->getData('rt_menu_cat_label');
$rt_menu_icon_img = $cat_model->getData('rt_menu_icon_img');
$rt_menu_font_icon = $cat_model->getData('rt_menu_font_icon');
$rt_menu_cat_columns = $cat_model->getData('rt_menu_cat_columns');
$rt_menu_float_type = $cat_model->getData('rt_menu_float_type');
if(!$rt_menu_cat_columns){
$rt_menu_cat_columns = 4;
}
$menu_type = $cat_model->getData('rt_menu_type');
if(!$menu_type)
$menu_type = $this->_custommenuConfig['general']['menu_type'];
$custom_style = '';
if($menu_type=="staticwidth")
$custom_style = ' style="width: 500px;"';
$rt_menu_static_width = $cat_model->getData('rt_menu_static_width');
if($menu_type=="staticwidth" && $rt_menu_static_width)
$custom_style = ' style="width: '.$rt_menu_static_width.';"';
$item_class = 'level0 ';
$item_class .= $menu_type.' ';
$menu_top_content = trim($cat_model->getData('rt_menu_block_top_content'));
$menu_left_content = trim($cat_model->getData('rt_menu_block_left_content'));
$menu_left_width = trim($cat_model->getData('rt_menu_block_left_width'));
if(!$menu_left_content || !$menu_left_width)
$menu_left_width = 0;
$menu_right_content = trim($cat_model->getData('rt_menu_block_right_content'));
$menu_right_width = trim($cat_model->getData('rt_menu_block_right_width'));
if(!$menu_right_content || !$menu_right_width)
$menu_right_width = 0;
$menu_bottom_content = trim($cat_model->getData('rt_menu_block_bottom_content'));
if($rt_menu_float_type)
$rt_menu_float_type = 'fl-'.$rt_menu_float_type.' ';
if(count($children) > 0 || (($menu_type=="fullwidth" || $menu_type=="staticwidth") && ($menu_top_content || $menu_left_content || $menu_right_content || $menu_bottom_content)))
$item_class .= 'parent ';
$html .= '<li class="ui-menu-item '.$item_class.$rt_menu_float_type.'">';
if(count($children) > 0) {
$html .= '<div class="open-children-toggle"></div>';
}
$html .= '<a href="'.$this->_categoryHelper->getCategoryUrl($category).'" class="level-top">';
if ($rt_menu_icon_img)
$html .= '<img class="menu-thumb-icon" src="' . $this->_helper->getBaseUrl().'catalog/category/' . $rt_menu_icon_img . '" alt="'.$category->getName().'"/>';
elseif($rt_menu_font_icon)
$html .= '<em class="menu-thumb-icon '.$rt_menu_font_icon.'"></em>';
$html .= '<span>'.$category->getName().'</span>';
if($rt_menu_cat_label)
$html .= '<span class="cat-label cat-label-'.$rt_menu_cat_label.'">'.$this->_custommenuConfig['cat_labels'][$rt_menu_cat_label].'</span>';
$html .= '</a>';
if(count($children) > 0 || (($menu_type=="fullwidth" || $menu_type=="staticwidth") && ($menu_top_content || $menu_left_content || $menu_right_content || $menu_bottom_content))) {
$html .= '<div class="level0 submenu"'.$custom_style.'>';
if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_top_content) {
$html .= '<div class="menu-top-block">'.$this->getBlockContent($menu_top_content).'</div>';
}
if(count($children) > 0 || (($menu_type=="fullwidth" || $menu_type=="staticwidth") && ($menu_left_content || $menu_right_content))) {
$html .= '<div class="row">';
if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_left_content && $menu_left_width > 0) {
$html .= '<div class="menu-left-block col-sm-'.$menu_left_width.'">'.$this->getBlockContent($menu_left_content).'</div>';
}
$html .= $this->getSubmenuItemsHtml($children, 1, $max_level, 12-$menu_left_width-$menu_right_width, $menu_type, $rt_menu_cat_columns);
if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_right_content && $menu_right_width > 0) {
$html .= '<div class="menu-right-block col-sm-'.$menu_right_width.'">'.$this->getBlockContent($menu_right_content).'</div>';
}
$html .= '</div>';
}
if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_bottom_content) {
$html .= '<div class="menu-bottom-block">'.$this->getBlockContent($menu_bottom_content).'</div>';
}
$html .= '</div>';
}
$html .= '</li>';
}
}
$html .= $this->getCustomBlockHtml('after');
return $html;
}
}
Now you have to make a template file and then you can customize the below code according to your needs.
<?php
/**
* Copyright © 2016 TuanHatay. All rights reserved.
*/
?>
<?php
/**
* Top menu for store
*
* @see \Wishusucess\CustomMenu\Block\Topmenu
*/
?>
<?php
$_helper = $this->helper('Wishusucess\CustomMenu\Helper\Data');
$_config = $_helper->getConfig('custommenu');
$columnsLimit = 0;
if($_config['general']['enable']) {
?>
<?php $_menu = $block->getCustomMenuHtml(); ?>
<nav class="navigation custommenu" role="navigation">
<ul>
<?php echo $_menu; ?>
</ul>
</nav>
<script type="text/javascript">
require([
'jquery',
'wishusucess/custommenu'
], function ($) {
$(".custommenu").CustomMenu();
});
</script>
<?php
} else {
?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit); ?>
<nav class="navigation custommenu" 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
}
?>
Recommended Post:
Magento 2.4 Installation Guide: How to Install Magento 2.4.2
Elasticsearch: How to Install Elasticsearch in Ubuntu 18.04
Also Read:
Show Custom Attributes in Magento 2 on The Frontend Side
Magento 2 Interview Questions: Most Important Question & Answer