Magento 2のメインナビゲーション(トップメニュー)javaScriptのカスタマイズ


8

Magento2のメインナビゲーションに変更を加えようとして、テーマモジュールと空のテンプレートを掘り下げて見ました。これまでのところ、ページにレンダリングされるコンテンツを制御するためのカスタムモジュールを作成しました(サブナビゲーションへのリンクの追加)。ただし、ナビゲーションメニューのjavaScriptがどこにあるのかわかりません。

空白のテンプレートにnavigation.menu.jsファイルがあり、テーマモジュールにmenu.jsがありますが、どちらもメインメニュー用ではないようで、JSを探す場所が他にありません。

ブロックはXMLによって生成され、ナビゲーションはjQuery UIで実行されているように見えるため、検索に使用できるものがあまりありません。これまでは主に、ベーステンプレートに基づいて構築されたカスタムテンプレートをベンダーディレクトリを検索して変更してきましたが、何も表示されません。

私はベーステンプレートに基づいて構築されたカスタムテンプレートでMagento 2.1を実行しています。誰かが私を正しい方向に向けることができれば、それは大きな助けになります。

Edit1:

したがって、さらにグーグルしてテストした後、lib / web / mageに2番目のmenu.jsファイルが見つかりましたが、これは適切な場所のようですが、今はそれをオーバーライドできません。

私の新しい情報で、実際にメニューと管理メニューをオーバーライドする例を含むMagento2開発ドキュメントを偶然見つけました。だから私は私のモジュールに以下を追加しました

名前空間/モジュール/view/frontend/require-config.js

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

名前空間/モジュール/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;
});

vendor / magento / module-theme / view / frontend / templates / html / topmenu.phtmlファイルを見ると、メニューウィジェットのdata-mage-initが使用されていることがわかります。私が理解しているように、これはファイルの変更されたバージョンを使用する必要がありますが、動作していないようです。コンソールログをデフォルトのinitに追加し、ケースと名前空間のさまざまな意味合いを試して、これらが間違って設定されていないことを確認しました(多くの例を見てきましたが、人々は単に他の場所で使用するか使用しない傾向があります)。 、しかし私は新しいinitを呼び出すことができません。

また、変更があるたびにpub / static / frontendディレクトリを空にして再デプロイし、正しいバージョンのみが呼び出されるようにしています。

回答:


1

navigation-menu.jsをオーバーライドする場合は、テーマに追加する必要があります。

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

その後、実行する必要があります:

php bin/magento setup:static-content:deploy

念のため、キャッシュをクリアしてください。

これが役に立てば幸いです!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.