Personnalisation du javaScript de navigation principale (topmenu) de Magento 2


8

J'ai passé beaucoup de temps à creuser dans le module de thème et les modèles vides en essayant d'apporter des modifications à la navigation principale de Magento2. Jusqu'à présent, j'ai créé un module personnalisé pour contrôler le contenu rendu dans la page (Ajout de liens à la sous-navigation) mais je ne peux pas déterminer où se trouve le menu de navigation javaScript.

Je peux voir un fichier navigation.menu.js dans le modèle vierge et un menu.js dans le module de thème mais aucun de ceux-ci ne semble être pour le menu principal et je ne trouve aucun autre endroit pour rechercher le JS.

Parce que le bloc est généré par XML et que la navigation semble fonctionner sur jQuery UI, je n'ai pas grand-chose que je puisse utiliser pour rechercher. Jusqu'à présent, j'ai principalement modifié un modèle personnalisé basé sur le modèle de base en recherchant le répertoire du fournisseur, mais je suis vide.

J'utilise Magento 2.1 avec un modèle personnalisé construit à partir du modèle de base, si quelqu'un pouvait me diriger dans la bonne direction, ce serait d'une grande aide.

Edit1:

Donc, après plus de recherches et de recherches sur Google, j'ai finalement trouvé un deuxième fichier menu.js dans lib / web / mage qui semble être le bon endroit, mais maintenant je ne peux plus le remplacer.

Avec mes nouvelles informations, je suis tombé sur les documents de développement de Magento2 qui ont un exemple sur la substitution du menu et des menus d'administration. J'ai donc ajouté ce qui suit à mon module

Espace de noms / Module / view / frontend / require-config.js

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

Espace de noms / 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;
});

En regardant maintenant dans le fichier vendor / magento / module-theme / view / frontend / templates / html / topmenu.phtml, je peux voir qu'ils ont utilisé un data-mage-init du widget de menu. Si je comprends bien, cela devrait utiliser la version modifiée du fichier, mais cela ne semble pas fonctionner. J'ai ajouté un journal de console à l'initialisation par défaut et j'ai essayé de nombreuses connotations de cas et d'espaces de noms pour m'assurer que je ne les configurais pas mal (j'ai vu beaucoup d'exemples mais les gens ont tendance à utiliser ou non à d'autres endroits) , mais je ne parviens pas à appeler le nouvel init.

J'ai également vidé le répertoire pub / static / frontend et redéployé après chaque modification pour m'assurer que seules les versions correctes pouvaient être appelées.

Réponses:


1

Si vous souhaitez remplacer le menu de navigation.js, vous devez l'ajouter dans votre thème:

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

Après cela, vous devez exécuter:

php bin/magento setup:static-content:deploy

et vider le cache, juste pour être sûr.

J'espère que ça aide!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.