Overriding Core Component JS Files In Magento 2

It’s pretty simple actually, but through the course of my career, I’ve seen that “Simple” is most often the actual complication. Skimming through a slew of questions by a lot of developers who are trying to achieve this, here are my 2 cents on how we successfully accomplished this.

Note: Even a newbie to Magento knows very well that editing the core files is one of the biggest blunders considering Magento’s Development Principles.

I’m going to try and explain the simplest way to extend the functionalities by overriding the core JS component.

1. To override the core JS components, we first need to create a file called “requires-config.js”. 
   
   

• In case you are developing a Magento 2 extension, you will have to create this file in the following path:
  

  app/code/Namespace/ModuleName/view/frontend/require-config.js
  

• If you are developing a theme, then you will have to create this file in the root directory of your theme:
  

  app/design/frontend/PackageName/ThemeName/require-config.js
  

2. Now that you have the file created, we should specify the override in the following format:

   varconfig = {
   	“map” : {
   		“*” : {
   			“<core_component>” : “<our_component>”
   		}
   	}
   };
   

3. Below is an example of how you would override the Menu component’s JS file with your custom-menu.js file:

   varconfig = {
   	“map” : {
   		“*” : {
   			“menu” : “js/custom-menu”
   		}
   	}
   };
   

And that wraps up the simplest way to Override Core JS files of Magento 2. Hope this helps! Try it out and let us know in the comments whether this worked for you. If it didn’t work, fret not – comment if you need further guidance! We’d love to help you out if you promise to buy us coffee!

Are you trying out something that needs professional help? Reach us by Clicking Here or alternatively call us at +1 516-717-2049. We love a challenge!