How to use jQuery in Magento 2

By Vishal Lakhani |
Posted on Jan 25, 2020 |
Posted in |
0 comment

Are you looking to give a modern and smart look to your online store? Of Course, every shop owner wants to attract more customers to their store. Without altering the current look and design it’s not possible. The best and most affordable solution to add dynamic elements in Magento 2 is Javascript. To make your frontend dynamic and interactive JavaScript is essential. Magento 2 uses jQuery and jQuery UI libraries to create various dynamic elements like drop-down lists, checkboxes, accordions, buttons, date pickers, pop-ups, etc. If you compare jquery and pure js, then the jquery code is short and simple

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

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.

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:

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.

ABOUT THE AUTHOR

Vishal Lakhani

Magento Certified Developer
Vishal is not just a dedicated developer but also a passionate blogger. He believes that a content with 10 meaningful and helpful words is a quality-rich content than randomly filling 1000 words. Apart from blogging and playing with Magento, he loves to read, travel and learn something new every day.