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); } } |
[crayon-63d3e4c1683b8714153916/] Using above fucntion Images can be imported directly from...
Override view block using di.xml and add the below code...
You can check a list of called layout XML for...
Follow the below steps to install and set up PWA...
If you want to remove all leading zero's from order,...
Let our Magento expert connect to discuss your requirement.
We offer Magento
certified developers.
Our Magento clientele
is 500+.
We sign NDA for the
security of your projects.
We’ve performed 100+
Magento migration projects.
Free quotation
on your project.
Three months warranty on
code developed by us.