Personalizando o javaScript de navegação principal (menu principal) do Magento 2

8

Passei um bom tempo pesquisando o módulo de tema e os modelos em branco tentando fazer alterações na navegação principal do Magento2. Até agora, criei um módulo personalizado para controlar o conteúdo renderizado na página (Adicionando links ao subnav), mas não consigo descobrir onde está o menu de navegação javaScript.

Posso ver um arquivo navigation.menu.js no modelo em branco e um menu.js no módulo de tema, mas nenhum deles parece ser o menu principal e não encontro outros lugares para procurar o JS.

Como o bloco é gerado por XML e a navegação parece ser executada na interface do usuário do jQuery, não tenho muito o que procurar. Até agora, eu modifiquei principalmente um modelo personalizado criado no modelo base pesquisando o diretório do fornecedor, mas estou ficando em branco.

Estou executando o Magento 2.1 com um modelo personalizado criado a partir do modelo base. Se alguém pudesse me apontar na direção certa, seria uma grande ajuda.

Edit1:

Então, após mais pesquisas e testes, finalmente encontrei um segundo arquivo menu.js na lib / web / mage, que parece ser o lugar certo, mas agora não consigo substituí-lo.

Com minhas novas informações, eu realmente me deparei com os documentos de desenvolvimento do Magento2, que têm um exemplo de como substituir o menu e os menus do administrador. Então eu adicionei o seguinte ao meu módulo

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

Agora, olhando no arquivo vendor / magento / module-theme / view / frontend / templates / html / topmenu.phtml, posso ver que eles usaram um init de criação de dados do widget de menu. Pelo que entendi, isso deve usar a versão modificada do arquivo, no entanto, não parece estar funcionando. Eu adicionei um log do console ao init padrão e tentei várias conotações de casos e espaços de nomes para garantir que eu não os estivesse configurando errado (já vi muitos exemplos, mas as pessoas tendem a usar ou não em outros lugares) , mas não consigo chamar o novo init.

Também esvaziei o diretório pub / static / frontend e reimplante após cada alteração, para garantir que apenas as versões corretas possam ser chamadas.

Chris Morris
fonte

Respostas:

1

Se você deseja substituir o navigation-menu.js, adicione-o ao seu tema:

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

Depois disso, você precisa executar:

php bin/magento setup:static-content:deploy

e limpe o cache, apenas para ter certeza.

Eu espero que isso ajude!

Anca Mihaela
fonte