Anpassen des JavaScript für die Hauptnavigation (Topmenü) von Magento 2

8

Ich habe eine ganze Weile damit verbracht, mich mit dem Theme-Modul und den leeren Vorlagen zu beschäftigen und zu versuchen, Änderungen an der Magento2-Hauptnavigation vorzunehmen. Bisher habe ich ein benutzerdefiniertes Modul erstellt, um den auf der Seite gerenderten Inhalt zu steuern (Hinzufügen von Links zum Subnav), aber ich kann nicht herausfinden, wo sich das Navigationsmenü JavaScript befindet.

Ich kann eine Datei navigation.menu.js in der leeren Vorlage und eine Datei menu.js im Themenmodul sehen, aber keines davon scheint für das Hauptmenü zu sein, und ich kann keine anderen Orte finden, an denen nach JS gesucht werden kann.

Da der Block von XML generiert wird und die Navigation auf der jQuery-Benutzeroberfläche ausgeführt zu werden scheint, kann ich nicht viel suchen. Bis jetzt habe ich hauptsächlich eine benutzerdefinierte Vorlage geändert, die auf der Basisvorlage basiert, indem ich das Herstellerverzeichnis durchsucht habe, aber ich bin leer.

Ich verwende Magento 2.1 mit einer benutzerdefinierten Vorlage, die auf der Basisvorlage basiert. Wenn mich jemand in die richtige Richtung weisen könnte, wäre dies eine große Hilfe.

Edit1:

Nach mehr googeln und testen habe ich endlich eine zweite Datei menu.js in lib / web / mage gefunden, die der richtige Ort zu sein scheint, aber jetzt kann ich sie nicht überschreiben.

Mit meinen neuen Informationen bin ich tatsächlich auf die Magento2-Entwicklungsdokumente gestoßen, die ein Beispiel für das Überschreiben der Menü- und Administratormenüs enthalten. Also habe ich meinem Modul Folgendes hinzugefügt

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;
});

Wenn ich jetzt in die Datei vendor / magento / module-theme / view / frontend / templates / html / topmenu.phtml schaue, kann ich sehen, dass sie einen Data-Mage-Init des Menü-Widgets verwendet haben. Soweit ich weiß, sollte dies die geänderte Version der Datei verwenden, aber es scheint nicht zu funktionieren. Ich habe dem Standard-Init ein Konsolenprotokoll hinzugefügt und zahlreiche Konnotationen von Fällen und Namespaces ausprobiert, um sicherzustellen, dass ich diese nicht falsch eingerichtet habe (ich habe viele Beispiele gesehen, aber die Leute verwenden sie normalerweise nur oder nicht an anderen Orten). , aber ich kann den neuen Init nicht zum Aufrufen bringen.

Ich habe auch das Verzeichnis pub / static / frontend geleert und nach jeder Änderung erneut bereitgestellt, um sicherzustellen, dass nur die richtigen Versionen aufgerufen werden können.

Chris Morris
quelle

Antworten:

1

Wenn Sie die Datei navigation-menu.js überschreiben möchten, müssen Sie sie Ihrem Thema hinzufügen:

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

Danach müssen Sie ausführen:

php bin/magento setup:static-content:deploy

und leeren Sie den Cache, nur um sicherzugehen.

Ich hoffe das hilft!

Anca Mihaela
quelle