8

I've spent a fair while digging into the theme module and blank templates trying to make changes to the main Magento2 navigation. So far I've made a custom module to control the content rendered into the page (Adding links to subnav) but I can't work out where the navigation menu javaScript is.

I can see a navigation.menu.js file in the blank template and a menu.js in the theme module but neither of these seem to be for the main menu and I can't find any other places to look for the JS.

Because the block is generated by XML and the navigation seems to run on jQuery UI I don't have much I can use to search for. Up until now I've mainly been modifying a custom template thats built on the base template by searching the vendor directory but I'm coming up blank.

I'm running Magento 2.1 with a custom template built off the base template, If anyone could point me in the right direction it would be as great help.

Edit1:

So after more googling and testing I finally found a second menu.js file in lib/web/mage which seems to be the right place, however now I"m unable to override it.

With my new information i actually stumbled across the Magento2 dev docs which has an example on overriding the menu and admin menus. So I added the following to my module

Namespace/Module/view/frontend/require-config.js

var config = {
    map: {
        '*': {
            'menu': 'Test_Topmenu/js/navigation-menu'
        }
    }
};

Namespace/Module/view/frontend/web/js/navigation-menu.js

define([
    'jquery',
    'jquery/ui',
    'mage/menu'
], function ($) {
    "use strict";
    $.widget('Test_Topmenu.navigationMenu', $.mage.menu, {
        _init: function () {
            console.log('new init');
        }
    });
    return $.Test_Topmenu.navigationMenu;
});

Now looking in the vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml file I can see that they have used a data-mage-init of the menu widget. As I understand it this should use the modified version of the file, however it doesn't seem to be working. I added a console log to the default init and have tried numerous connotations of cases and namespaces to make sure I wasn't setting these up wrong (I've seen a lot of examples but people tend to just use or not in other places), but I'm unable to get the new init to be called.

I have also been emptying the pub/static/frontend directory and redeploying after every change as well to make sure only the correct versions could be getting called.

1

If you want to override the navigation-menu.js you need to add it in your theme:

app/design/frontend/{yourVendorName}/{yourThemeName}/web/js/navigation-menu.js

After that you need to run:

php bin/magento setup:static-content:deploy

and clear the cache, just to be sure.

I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.