1

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?

1

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.

  • Thanks, but as I said in the original post, I am trying to do this as part of a custom theme, not via a module. – fracture Apr 12 '16 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.