How to use jQuery in Magento 2

Magento 2 is used for web development and it’s work according to module-based strategy as it loads the module when it requires. By default, Magento 2 adds required JavaScript library i.e Magento 2 includes jQuery as well. Additionally, there is no need to add base URL separately as by default Magento 2 sets base URL configuration in the RequireJS file. Base URL is one type of prefix of web URL of the module and it adds base URL in the prefix of your module URL. If you check the source code of any webpage then you will get the default base URL configuration. Refer below image to know more.

With this configuration, the JavaScript file URL will look as attached below:

If you want to add JavaScript to the module, in this case, you have to add RequireJS module definition to the below path:

-app/code/Package/Module/view/Area/web/jsfile.js 

And, it will automatically available for you as the RequireJS module name with Package_Module/jsfile

Additionally. it can also be loaded via
http://magento2.com/pub/static/adminhtml/Magento/backend/en_US/Package_Module/jsfile.js 

For your reference, it is not mandatory to add .js extension while adding a JavaScript file in RequireJS module.

• How to Configure RequireJS File?

  Magento 2 has introduced various innovations in the use of JavaScript and requireJS is one of them. Magento 2 is based on a modular architecture, so here we need to define the RequireJS configuration file for each module and to each area i.e for frontend and adminhtml separately. 

  • Modules:<Module_dir>/view/<area>/requirejs-config.js
  • Themes: <theme_dir>/requirejs-config.js
    

  Above is a special RequireJS configuration file that will load automatically in Magento 2. 

  In order to add the JavaScript file to your Magento 2 custom module, you need to add the requireJS file to your module at path app/code/Package/Module/view/base/requirejs-config.js

• Magento 2 JQuery Object:

  You are not allowed to write plain jQuery code in Magento 2. So, to use plain jQuery you still need a requireJS library. 

  Query loads as RegularJS module in Magento 2

  <script>type="text/javascript">
jQuery(function(){ 
//your code here }); 
</script>

  Here, the browser can give you a warning that jQuery is undefined as Magento 2 use only RequireJS module so we need to add below jQuery code as RegularJS module:

  requirejs(['jquery'],
  function(jQuery){
  jQuery(function(){ 
//your jquery code here
});
  });

  Here, [‘jquery’] is the dependency. So, before proceeding further jQuery must be loaded. 

  requirejs(['jquery'],
  function(jQuery){
//Write code here
  });

  The main entry point of your program is function(jQuery). Additionally, Magento 2 does not allow jQuery so that adding jQuery plugin via RequireJS is essential here. Use the below code for the same:

  requirejs(['jquery','jquery.slider'], function(jQuery, jQuerySlider){
  //my code here 
});

  The below configuration you need to create for jQuery slider module that points to the jquery.slider.min.js file in the Package_module module.

  var config = {
paths:{ 
"jquery.slider":"Package_Module/js/jquery.slider.min" 
} 
};

  We have added the jQuery here as the dependency. When slider plugin use, Magento 2 load jQuery module first and after that, it’s load slider module. However, there are some situation where due to a network problem, jQuery module load after jquery.slider plugin. 

  So to solve this problem RequireJs provide shim configuration. Refer below code for the same:

  var config = {
  paths:{ 
"jquery.cookie":"Package_Module/path/to/jquery.slider.min"
},
  shim:{
  'jquery.slider':{
  'Deps':['jquery']
}
  }
  };

  So, shim configuration accept key value pair or alias of the plugin path and deps defines dependency on the module.

• How can jQuery UI Widget methods be instantiated in Magento 2?

  There are few methods by which jQuery UI Widget can be instantiated in Magento 2. Here we are referring accordion as an example ($ (“# element”). accordion ();).

  • Method 1 : Using Script in Template
    

    <script>
  require([ 
  'jquery',
   'accordion'], function ($) {
   $("#element").accordion();
  });
  </script>

  • Method 2 : Using data-mage-init in Template
    

    <div id="element" data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true,
"active": true, "collateral": { "openedState": "filter-active", "element": "body" } }}'>
<div data-role="collapsible">
  <div data-role="trigger">
  <span>Title 1</span>
</div>
  </div>
  <div data-role="content">Content 1</div>

  • Method 3 : Using Selector in the Script File or By Calling a Function
    

    require([ 'jquery',
  'accordion'], function ($) {
$("#element").accordion();
  });

  • Method 4 : By Using <script type=”text/x-magento-init” />
    

    <script type="text/x-magento-init">
{ 
"#element": { 
"accordion":  <?php echo $block>getNavigationAccordionConfig(); >
} 
}
<script>

    Above are four methods by which we can initiate a jQuery widget in Magento 2

• How can you call jQuery UI Widget methods?

  To call jQuery UI widget in Magento 2, you need to execute the below code: 

  $ ('# element'). accordion ("someAction"); 

  Call the widget and the function you want with any of the above methods. 

  JavaScript is a very useful technology for eCommerce developers. Hope, this article helped you with how to use jQuery in Magento 2, Mageants have mentioned the most recommended way and the best practice to use the jQuery library in Magento 2. Let us know if you are still facing any problems or issues by commenting or sharing your feedback with us.