Personalización del javaScript de navegación principal de Magento 2 (menú superior)


8

Pasé una feria mientras investigaba el módulo del tema y las plantillas en blanco tratando de hacer cambios en la navegación principal de Magento2. Hasta ahora, he creado un módulo personalizado para controlar el contenido representado en la página (Agregar enlaces a subnav), pero no puedo determinar dónde está el menú de navegación javaScript.

Puedo ver un archivo navigation.menu.js en la plantilla en blanco y un menu.js en el módulo de tema, pero ninguno de estos parece ser para el menú principal y no puedo encontrar ningún otro lugar para buscar el JS.

Debido a que el bloque es generado por XML y la navegación parece ejecutarse en jQuery UI, no tengo mucho que pueda usar para buscar. Hasta ahora, he estado modificando principalmente una plantilla personalizada que se basa en la plantilla base buscando en el directorio de proveedores, pero estoy en blanco.

Estoy ejecutando Magento 2.1 con una plantilla personalizada construida a partir de la plantilla base. Si alguien pudiera señalarme en la dirección correcta, sería de gran ayuda.

Editar1:

Entonces, después de buscar y buscar en Google, finalmente encontré un segundo archivo menu.js en lib / web / mage que parece ser el lugar correcto, sin embargo, ahora no puedo anularlo.

Con mi nueva información, en realidad me topé con los documentos de desarrollo de Magento2, que tienen un ejemplo para anular el menú y los menús de administración. Entonces agregué lo siguiente a mi módulo

Espacio de nombres / Módulo / vista / frontend / require-config.js

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

Espacio de nombres / Módulo / 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;
});

Ahora, mirando el archivo vendor / magento / module-theme / view / frontend / templates / html / topmenu.phtml, puedo ver que han utilizado un data-mage-init del widget de menú. Según tengo entendido, esto debería usar la versión modificada del archivo, sin embargo, no parece estar funcionando. Agregué un registro de consola al init predeterminado y probé numerosas connotaciones de casos y espacios de nombres para asegurarme de que no los estaba configurando incorrectamente (he visto muchos ejemplos, pero la gente tiende a usarlos o no en otros lugares) , pero no puedo hacer que se llame al nuevo init.

También he estado vaciando el directorio pub / static / frontend y volviéndome a implementar después de cada cambio para asegurarme de que solo se puedan llamar las versiones correctas.

Respuestas:


1

Si desea anular el menú de navegación.js, debe agregarlo en su tema:

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

Después de eso debes ejecutar:

php bin/magento setup:static-content:deploy

y borrar el caché, solo para estar seguro.

¡Espero que esto ayude!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.