Magento – Replacing a default JS component

magento2requirejs

How do you replace a default JS component using requirejs in a custom theme? I have tried following the example at devdocs.magento.com but I can't seem to get it to work.

To keep things simple I have a new theme, which is a copy of the magento-blank theme, and has no parent theme.

I am trying to replace the default menu.js, I have copied /lib/web/mage/menu.js to <theme-dir>/web/js/menu.js and added a simple console log to the _create function so I can tell the difference between them when I check the browser.

As suggested in the devdocs my requirejs-config is as follows

Path: vendor/<vendor-name>/new-theme/requirejs-config.js

var config = {
    "map": {
        "*": {
            "menu": "js/menu"
        }
    }
};

Unfortunately I'm not seeing my new console message show up when I refresh the browser, and I also can't see this config being combined with others in the generated requirejs-config.js in the browser.

I checked the theme is active and tried the following:

  • bin/magento dev:source-theme:deploy
  • bin/magento cache:flush
  • Flush Javascript/CSS cache
  • Flush Static Files Cache
  • clearing my browser cache

What am I missing, some other examples in the devdocs show adding an initialisation, but I'm not changing the markup at this time, so the
data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}' is still present, in the template, my understanding is that "menu" definition refers to the component name in requirejs-config, so am I correct in thinking it should work?

Best Answer

Check the following code in vendor/module-theme/view/frontend/requirejs-config.js

var config = {
map: {
    "*": {
        "rowBuilder":             "Magento_Theme/js/row-builder",
        "toggleAdvanced":         "mage/toggle",
        "translateInline":        "mage/translate-inline",
        "sticky":                 "mage/sticky",
        "tabs":                   "mage/tabs",
        "zoom":                   "mage/zoom",
        "collapsible":            "mage/collapsible",
        "dropdownDialog":         "mage/dropdown",
        "dropdown":               "mage/dropdowns",
        "accordion":              "mage/accordion",
        "loader":                 "mage/loader",
        "tooltip":                "mage/tooltip",
        "deletableItem":          "mage/deletable-item",
        "itemTable":              "mage/item-table",
        "fieldsetControls":       "mage/fieldset-controls",
        "fieldsetResetControl":   "mage/fieldset-controls",
        "redirectUrl":            "mage/redirect-url",
        "loaderAjax":             "mage/loader",
        "menu":                   "mage/menu",
        "popupWindow":            "mage/popup-window",
        "validation":             "mage/validation/validation",
        "welcome":                "Magento_Theme/js/view/welcome"
    }
},
paths: {
    "jquery/ui": "jquery/jquery-ui"
},
deps: [
    "jquery/jquery.mobile.custom",
    "js/responsive",
    "mage/common",
    "mage/dataPost",
    "js/theme",
    "mage/bootstrap"
]

};

2) They have specified the name "menu" for "mage/menu.js"

3) Write below content in your module's requirejs-config.js

var config = {
map: {
    '*': {
        "menu": "Companyname_Modulename/js/menu",


    } 
},

};

4) Copy menu.js in your module to the path specified in requirejs.

Let me know if you have any further question.

Related Topic