How To Use Custom JavaScript in Magento 2 How To Use Custom JavaScript in Magento 2

Magento 2 applications use RequirJS file and module loader to optimize the loading time of your Magento 2 application including JavaScript files and to manage dependencies of JavaScript resources.

In this article, I’m going to show you how you can use custom JavaScript components in Magento 2. I recommend not changing the source code of the default Magento 2 components and widgets. Implement all your customizations in your custom modules or themes.

How to Replace Default JavaScript Component

For using a custom implementation of an existing Magento 2 JavaScript component, place your custom component source file in any of these following locations: Your Magento 2 JavaScript files <yourtheme_dir>/web/js and in your Magento 2 module view JavaScript files <yourmodule_dir>/view/frontend/web/js. Create RequireJS configuration file config-requirejs.js using this code I’ve shown below:

var config = {

 “map”: {

“*”: {

     “<yourdefault_component>”: “<yourcustom_component>”

}

 }

};

<yourdefault_component>: Name of your default component

<yourcustom_component>: Name of your custom component

  • If you want to use custom image-gallery.js script instead of the default Gallery widgets, your config-requirejs.js should look like:

 

var config = {

 “map”: {

“*”: {

  “gallery”: “js/image-gallery.js”,

  “mage/backend/gallery”: “js/image-gallery”,

}

 }

};

  •     Place your config-requirejs.js file in one of these following directories: Your theme files: <yourtheme_dir> or in your module view files: <yourmodule_dir>/view/frontend

In this way, you can use your custom JavaScript component rather than the Magento 2 component all over the frontend area.

How to Extend Default JavaScript Component

You can add custom JavaScript component or widget which extends the default Magento 2 component or widget.

  •     Extend Widget

For extending the default Magento 2 jQuery widget, you must create <your-widget-name>.js file with the following code:

define([

 ‘jquery’,

 ‘jquery/ui’,

 ‘mage/<widget.name>’ // usually widget can be found in /lib/web/mage dir

], function($){

 $.widget(‘<your_namespace>.<your-widget-name>’, $.mage.<widget.name>, { … });

 return $.<your_namespace>.<your-widget-name>;

});

<your_namespace>.<your-widget-name>: Name of your custom widget. According to jQuery widgets naming tradition, you must include a namespace and name.

mage.<widget.name>: Name of the Magento 2 widget that we extend.

  •     Extend UI Component

For extending the default JS UI component your custom script must look like this:

define([

 ‘<component_path>’

], function(<component_alias>){

 return <component_alias>.extend({

defaults: { … }, // properties with default values

… // methods of your component

 });

});

<component_path>: Path of the default component that we extend

<component_alias>: Variable containing default component that we extend

E.G: Filters.js script extends the default filters.js:

define([

 ‘Magento_Ui/js/grid/filters/filters’

], function(Filters){

 return Filters.extend({

defaults: { … }, // properties with default values

… // methods of your component

 });

});

Conclusion: In this tutorial I mentioned the most important things for those of you who need to use custom JavaScript. Leave your comments or suggestions in the comments section below. I’d appreciate your engagement!

Wajid Hussain is a Magento Community Manager at Cloudways. He is an experienced in Magento Front-end and PHP development. He loves to play football & basketball. You can find him on Twitter or Linkedin.

No comments so far.

Be first to leave comment below.

Your email address will not be published. Required fields are marked *