Let’s say I have to show category images to navigation menu.
Magento doesn’t take a use of any kind of template to draw the whole menu, but a function which will retrieve all the categories & create li/ul tree.
In Magento 2.1.X you can easily perform this task by rewriting the _getHtml() function from the class located at Magento\Theme\Block\Html\Topmenu. It’s kind of function which will call to itself again-n-again. We will make an observer which will add our programmed code in the navigation menu.
1. Create your module
Let’s start by creating one folder in app/code/Vendor/ModuleName.
Here, ‘vendor’ is the namespace for your modules.
app/code/Vendor/ModuleName/etc/module.xml
|
1 2 3 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Vendor_ModuleName" setup_version="0.0.1"/></config> |
Now the module registration:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php /** * Registration file * * @category Vendor * @package Vendor\ModuleName * @author Your Name <your@name.com> * @copyright 2017 Vendor * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Vendor_ModuleName', __DIR__ ); |
Create a file called di.xml to declare the rewriting of the class where the _getHtml() method is going to get called:
app/code/Vendor/NavigationMenu/etc/di.xml
|
1 2 3 4 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Magento\Theme\Block\Html\Topmenu" type="Vendor\NavigationMenu\Rewrite\Block\Html\Topmenu" /> </config> |
After this you are allowed to create the class which will allow to rewrite the method. Now the following points:
app/code/Vendor/NavigationMenu/Rewrite/Block/Html/Topmenu.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php /** * Vendor Project * Module Vendor/ModuleName * * @category Vendor * @package Vendor\ModuleName * @author Your Name <your.name@email.com> * @copyright 2017 Vendor * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) */ namespace Vendor\ModuleName\Rewrite\Block\Html; use Magento\Framework\Data\Tree\Node; use Magento\Framework\DataObject; use Magento\Framework\View\Element\Template; /** * Plugin ModuleName * * @author Your Name <your.name@email.com> * @copyright 2017 Vendor */ class Topmenu extends \Magento\Theme\Block\Html\Topmenu { /** * Recursively generates top menu html from data that is specified in $menuTree * * @param Node $menuTree menu tree * @param string $childrenWrapClass children wrap class * @param int $limit limit * @param array $colBrakes column brakes * @return string * * @SuppressWarnings(PHPMD) */ protected function _getHtml( Node $menuTree, $childrenWrapClass, $limit, $colBrakes = [] ) { $html = parent::_getHtml($menuTree, $childrenWrapClass, $limit, $colBrakes = []); $transportObject = new DataObject(['html' => $html, 'menu_tree' => $menuTree]); $this->_eventManager->dispatch( 'vendor_topmenu_node_gethtml_after', ['menu' => $this->_menu, 'transport' => $transportObject] ); $html = $transportObject->getHtml(); return $html; } } |
To perform it we have to create the events.xml configuration file and assign the class which will handle the event:
app/code/Vendor/NavigationMenu/etc/frontend/events.xml
|
1 2 3 4 5 6 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name="vendor_topmenu_node_gethtml_after"> <observer name="vendor_modulename_topmenu" instance="Vendor\ModuleName\Observer\AddContentToCategoryTopmenu" /> </event> </config> |
app/code/Vendor/NavigationMenu/Observer/AddContentToCategoryTopmenu.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<?php /** * Topmenu catalog observer to add custom additional elements * * @category Vendor * @package Vendor\ModuleName * @author Your Name <your.name@email.com> * @copyright 2017 Vendor * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0) */ namespace Vendor\ModuleName\Observer; use Magento\Framework\Event\Observer; use Magento\Framework\Event\ObserverInterface; use Magento\Catalog\Api\CategoryRepositoryInterface; /** * Class AddFirstCategoryImageToTopmenu * @package Vendor\ModuleName */ class AddContentToCategoryTopmenu implements ObserverInterface { /** * @var CategoryRepositoryInterface $categoryRepository */ protected $categoryRepository; /** * AddFirstCategoryImageToTopmenu constructor. * * @param CategoryRepositoryInterface $categoryRepository repository */ public function __construct( CategoryRepositoryInterface $categoryRepository ) { $this->categoryRepository = $categoryRepository; } /** * @param Observer $observer Observer object */ public function execute(Observer $observer) { $transport = $observer->getTransport(); $html = $transport->getHtml(); $menuTree = $transport->getMenuTree(); $parentLevel = $menuTree->getLevel(); $childLevel = $parentLevel === null ? 0 : $parentLevel + 1; $menuId = $menuTree->getId(); if ($childLevel == 1 && $this->isCategory($menuId)) { $html .= '<li class="category_image" style=""><img src="'.$this->getCategoryImage($menuId).'"/></li>'; } $transport->setHtml($html); } /** * Retrieves the category image for the corresponding child * * @param string $categoryId Category composed ID * * @return string */ protected function getCategoryImage($categoryId) { $categoryIdElements = explode('-', $categoryId); $category = $this->categoryRepository->get(end($categoryIdElements)); $categoryName = $category->getImageUrl(); return $categoryName; } /** * Check if current menu element corresponds to a category * * @param string $menuId Menu element composed ID * * @return string */ protected function isCategory($menuId) { $menuId = explode('-', $menuId); return 'category' == array_shift($menuId); } } |