Rewrite default js file or Replace a default JS component

To Customize default js we will use below steps.

Step 1 -

Place the custom component source file in one of the following locations:
  • Place the custom component source file in one of the following locations:
  • Your theme JS files: /web/js or /_/web/js
  • Your module view JS files: <module_dir>/view/frontend/web/js

Step 2 -

Create a RequireJS configuration file requirejs-config.js, having specified the following:

var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"

  • <default_component>: the name of the default component you replace
  • <custom_component>: the name of the custom component
For example, if you want to use custom navigation-menu.js script instead of the default menu widgets, your requirejs-config.js should contain the following:
var config = {
  "map": {
    "*": {
      "menu": "js/navigation-menu"

Step 3 -
Place your requirejs-config.js file in one of the following directories (according to the location of your custom script, see step 1 of this procedure):
  • Your theme files: <theme_dir>
  • Your module view files: <module_dir>/view/frontend

 Upgrade using setup:upgrade command, deploy static content, clear cache will show in console added new file which is placed in theme.

reference for more info :-

Experienced Magento Certified Developer with a demonstrated history of working in the information technology and services industry. Skilled in SQL, PHP, XAMPP, jQuery, and Microsoft Office. Strong engineering professional with a Master of Computer Applications


Post a Comment

Popular Posts

Have You Any Questins Let Us Know.

Contact Us
Ahmedabad India