How To Use jQuery Library In Magento 2
I’ll state two sentences which are difficult to implement at a time. (Or so do you think!)
“Optimize page load speed”
“Use of jQuery for SEO optimized and extensible frontend”
You may think of using an external jQuery library in Magento 2 for leveraging the benefits of jQuery for the store such as autocomplete fields. However, you may be unaware that you can also use jQuery library in Magento 2 by default itself, and the post shows how!
The use of external jQuery library increases the page load time which kills conversion!
However, using the built-in jQuery library in Magento 2 overcomes the issue and at the same time offer the advantages of jquery such as:
- SEO optimized
- User-friendly
- Cross-browser compatibility
- Easy implementation comparatively
- Simplifies AJAX
- Interactive frontend
- Open-source
- Lightweight
Method To Use jQuery Library In Magento 2:
|
1 2 3 4 5 6 7 8 9 10 11 |
require(['jquery', 'jquery/ui'], function($){ //your js code here }); For Example : require(['jquery', 'jquery/ui'], function($){ $(document).ready( function() { alert("jquery demo."); }); }); |
All you have to do is mention the library with the particular RequireJS configuration in the layout.xml file. And the library is available for you in default Magento 2 itself!
The next time you develop a script in Magento 2, don’t forget to use the RequireJS for an optimized page load speed.
Any doubts in the above code? Please mention them in the Comments section below. I’d be happy to help.
Feel free to share the post with fellow developers via social media.
Thanks.
Prev
How To Add Order Number To Subject In Order Email Template in Magento 2
Learn The Best Way to Pass Parameter to URL in Magento 2
Next