1 Comment

Replacing a default JS component

Shipping restricted by package price including VAT/TAX
Sign-up form in static block [closed]

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?

Related Posts

  • Selecting form fields on Checkout page with JavaScript (0)
    I'm trying to edit a checkout page - specifically form and order of the fields. I didn't find a way how to reorganize and "do stuff" inside the checkout page so I decided to do it through JS since I'm not doing any big changes. I'm trying to move field VAT ID under the field […]
  • magento2 checkout forms, sign in form and search form invisible in frontend even though the code is there (0)
    I have a strange problem with my theme inheriting from Luma. The checkout page loads correctly but even though the set of input fields is present in the code, no forms show up on the frontend. I have tried to flush cache even though it is disabled and to regenerate pub/static, and of […]
  • Magento2 – Using Luma – Can't add CSS or JS (1)
    new Magento2 installation, went through a whole series of learning where I could not figure out why my default head blocks xml wasn't working to load my custom css/js files... as per the new theme in the documentation. After re-going over the code, there was nothing wrong... by […]
  • custom js/css file not getting called through phtml- 404 error (1)
    Im trying to creating a custom js file in my custom module. This is what i have tried. viewfrontendrequirejs-config.js var config = { map: { '*': { test: 'Vendor_Module/js/test' } } }; viewfrontendlayoutdefault.xml <?xml version="1.0"?> <page […]
  • custom js/css file not getting called through phtml- 404 error (1)
    Im trying to creating a custom js file in my custom module. This is what i have tried. viewfrontendrequirejs-config.js var config = { map: { '*': { test: 'Vendor_Module/js/test' } } }; viewfrontendlayoutdefault.xml <?xml […]
  • How to properly override a core JS file in Magento2 (1)
    We are attempting to override the behavior of Bundle Products in Magento2, specifically, to enable user defined quantities for Checkbox type products within the bundle. We have written an extension, and followed instructions about how to replace a default JS component found here: […]
  • Magento2 activate theme from console after installation (0)
    I created a theme for magento2 and added it to the right place. Now I would like to activate it in a custom module. Therefor I defined a install data script (InstallData implements InstallDataInterface), where I would like to activate my defined theme. It works fine, if I go in […]
  • Configurable product image not switching with swatch change (1)
    I am trying to get configurable swatches working in a custom theme in a 1.9 build. I am basically using this method of importing the functionality in the theme. The swatches are working fine, they are setting the correct values of the configurable product, but when selecting the […]
  • Selecting form fields on Checkout page with JavaScript (0)
    I'm trying to edit a checkout page - specifically form and order of the fields. I didn't find a way how to reorganize and "do stuff" inside the checkout page so I decided to do it through JS since I'm not doing any big changes. I'm trying to move field VAT ID under the field […]
  • Child theme is not inheriting Magento 2 (2)
    I have just started to use magento and made a child theme of Blank. I have followed the documentation about making a theme at devdocs.magento.com And i have activated the theme but the problem is i dont know why require.js or Icons are not loading. I have tried to deploy the […]
Shipping restricted by package price including VAT/TAX
Sign-up form in static block [closed]

1 Comment on this article

  • User November 12, 2016

    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.

    Reply

Add a comment