自定义Magento 2主导航(topmenu)javaScript


8

我花了很多时间研究主题模块和空白模板,以尝试更改Magento2的主要导航。到目前为止,我已经制作了一个自定义模块来控制呈现到页面中的内容(向subnav添加链接),但是我无法确定导航菜单javaScript的位置。

我可以在空白模板中看到一个navigation.menu.js文件,在主题模块中看到了menu.js,但是这些似乎都不是主菜单,而且找不到其他地方可以找到JS。

因为该块是由XML生成的,并且导航似乎在jQuery UI上运行,所以我没有太多可以用来搜索的内容。到目前为止,我主要是通过搜索供应商目录来修改基于基础模板构建的自定义模板,但是我还是空白。

我正在运行Magento 2.1,并在基础模板的基础上构建了自定义模板,如果有人可以向我指出正确的方向,那将是很大的帮助。

编辑1:

因此,经过更多的谷歌搜索和测试之后,我终于在lib / web / mage中找到了第二个menu.js文件,这似乎是正确的位置,但是现在我无法覆盖它。

有了我的新信息,我实际上偶然发现了Magento2开发文档,其中有一个覆盖菜单和管理菜单的示例。所以我在模块中添加了以下内容

命名空间/模块/视图/前端/require-config.js

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

命名空间/模块/视图/前端/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;
});

现在查看vendor / magento / module-theme / view / frontend / templates / html / topmenu.phtml文件,我可以看到他们已经使用了菜单小部件的data-mage-init。据我了解,这应该使用文件的修改版本,但是似乎无法正常工作。我在默认的init中添加了一个控制台日志,并尝试了很多案例和名称空间的含义,以确保我没有将这些设置错误(我看过很多示例,但是人们倾向于在其他地方使用或不使用) ,但是我无法调用新的init。

我还一直清空pub / static / frontend目录,并在每次更改后重新部署,以确保仅能调用正确的版本。

Answers:


1

如果要覆盖navigation-menu.js,则需要在主题中添加它:

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

之后,您需要运行:

php bin/magento setup:static-content:deploy

并确定要清除缓存。

我希望这有帮助!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.