Menu editor for Magento 2 – new module that replace category based menus

Snowdog’s Magento 2 Menu implements a long awaited feature for Magento. The ability to work with menus as a modifiable node-list as a content element in the admin area. There are modules available that does this, but at a substantial cost if you run multi-store. There are also nice hacks available, using a plugin-approach, but the hacks that are readily available doesn’t support multi-store and is not implemented for editors with access only to the store admin. Personally, I think that such a feature should be part of the core. Hence, I was delighted when Alan Storm informed about the existence of this module.

FYI: It turned out to be a bit of work to get it working as I wanted. What I initially thought was a substantial cost for the available commercial modules are close to zero in comparison to the effort I put into understanding the Snowdog menu master module. Add any potential maintenance to that and the substantial cost is… close to zero for the commercial available modules. But hey, I enjoy learning, it is why I work with Magento and internet! 

Installation (one way to do it)

  1. Download the files from https://github.com/SnowdogApps/magento2-menu and select download ZIP.
  2. Unzip on your machine.
  3. Upload to your server, I’ve put it in MagentoWebRoot/app/code/Snowdog. Within the Snowdog-folder, I’ve got the Menu-folder.
  4. Run CLI-command php magento setup:upgrade and follow the instructions.

Use

If installation worked, you should see a new section in the Content-menu, within the Element-section, namely, Menus. In this, you can easily create a new menu. It is quite self-instructing. It will work well in multi-store as you select to which store each menu is applicable to.

The position of the Menu editor in the admin is located within the "Content" area in the menu, with title "Menus". Once Menus has been clicked, a "Create new menu" button and a list of existing menus will appear.
The Menu editor appears in the Content section of the Magento 2 admin.
Once the "Create new menu" has been selected, a page is shown where configuration (title, identifier, menu main css class, store view) is made.
The configuration once a new menu is created with Menu editor

Within the Nodes tab, once creating a new menu, the menu nodes are added. Different types are available, such as category, custom url, cms page, etc. Within this tab, CSS class, node text, link etc. are set.
Adding a node to the menu. The tree that gets created has a drag and drop feature. If you select Add [some] node, it is a bit finicky to get the node at the right level. It is possible to put all nodes without any node being the parent of another (typically, the top-level of any menu shouldn’t have an explicit parent specified).
Once the menu is created, you need to include it your theme. To do so, edit default.xml in your theme. By editing default.xml, you can also remove existing menu. The code I’ve added in my default.xml (in the MagentoWebRoot/app/design/frontend/VendorName/themeName/Magento_Theme/layout/default.xml) is below. When I created the menu, I’ve named it main and added a couples of nodes of different types. You can see the menu-identifier in the arguments section and need to adjust it according to the identifier you select.

To remove existing menu, add the below code in your default.xml.

Its not pretty – out of the box

Out of the box with Luma-theme or similar theme, the menu will not look good. Well, yes, you can add certain CSS-classes when you create the menu, but what you can add and what gets automatically added isn’t in the same as Magento standard menu CSS. Furthermore, Menu master implements certain Html-elements that doesn’t exist in the native menu and seems to have a different approach to responsive web design.

Stay tuned, I’ll come back with some technical in-depth stuff and what I did to get the Menu Editor work with a Luma child theme.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *