jQuery library is the core feature that involves basic functions for working with elements. It assists to control page content, and handle, modify, and managing events via JavaScript. You may think of using an external Magento jquery library for leveraging the advantage of jQuery. However, you may be unaware that you can also use the jQ library in Magento 2 by default itself, and the post will guide you.
What is jQuery?
jquery is regarded as one of the most popular open-source JavaScript libraries available. It offers a fast way to implement query selection, HTML traversal, event handling, animations, special effects, and AJAX. It is an open-source library, with pretty solid API documentation, and regular maintenance
Advantages of Magento jquery
Are you are looking to bring a modern and smart look to your Magento 2 website? The most affordable solution to add dynamic elements in Magento 2 website javascript. Making your frontend dynamic and interactive JavaScript is very important. Magento 2 uses jQuery and jQuery UI libraries to generate various dynamic elements like drop-down lists, checkboxes, accordions, buttons, date pickers, pop-ups, etc. By default, Magento 2 adds the required JavaScript library i.e Magento 2 combines jQuery as well. Moreover, there is no requirement to add base URL separately as by default Magento 2 sets base URL configuration in the RequireJS file. Base URL is one kind of prefix of the web URL of the extension and it adds a base URL in the prefix of your module URL.
Using the built-in Magento jquery library solves the problem and at the same time provides the advantages of jquery such as:
- SEO optimized
- User-friendly
- Cross-browser compatibility
- Easy implementation comparatively
- Simplifies AJAX
- Interactive frontend
- Open-source
- Lightweight
How to Use Magento jquery Library
Magento 2 offers a lot of built-in by-default functions. Although, there is usually a need to include jQ while generating a Magento 2 theme as it facilitates a dynamic & interactive front-end. Require JS improves performance by allowing javascript to have loaded in the background similar to Lazy javascript loading.
To add Magento jquery library, you need to contain the jQ code inside require:
require(['jquery', 'jquery/ui'], function($){
//your js code here
});
For Example :
require(['jquery', 'jquery/ui'], function($){
$(document).ready( function() {
alert("jquery demo.");
});
});jQuery UI In Magento 2.3.3
jQuery UI library was restructured in Magento 2.3.3. jQ UI is divided into separate widgets that can be loaded by core modules only when they are needed. It was made to enhance the performance of store functions. That means you have to remove the “jquery/UI” dependency. Here is an example of the right script for Magento 2.3.3
<script>
define([
'jquery',
‘jquery-ui-modules/widget’
],
function ($) {
‘use strict’;
$.widget(‘...’);
});
</script>Or you can utilize the “delegated” dependency approach to support compatibility with old versions:
<script>
define([
'jquery',
‘Magento_Ui/js/modal/modal’
],
function ($) {
‘use strict’;
$.widget(‘...’);
});
</script>How To Use Magento 2 Built-in jQuery Library On A Custom Theme
If you have generated a Magento theme where you need to combine jQ. Usually, there is a conflict with jquery, JavaScript feature does not operate properly. Since jquery is already included in Magento 2. But if you need to use custom themes, you will have to do it in a different way. If you are adding your custom js library other than jQ then you need to add the js code inside require features like:
require(['jquery', 'jquery/ui'], function($){
//your js code here
});For instance, Inside the required feature, you can directly approach the jQuery function in place by utilizing either jquery or its short form alias, the dollar $ sign
require(['jquery', 'jquery/ui'], function($){
jQuery(document).ready( function() {
alert("Page loaded.");
});
});See the example with $ alias:
require(['jquery', 'jquery/ui'], function($){
$(document).ready( function() {
alert("Page loaded.");
});
});You also can use jquery or call the widget of Magento from a js file like:
define([
'jquery',
'jquery/ui',
'mage/<widget.name>' found in /lib/web/mage dir
], function($){
$.widget('<your_namespace>.<your_widget_name>', $.mage.<widget.name>, { CODE HERE... });
return $.<your_namespace>.<your_widget_name>;
});Moreover, if you have an error, it may be caused by the duplication of jquery. So check it and remove the jquery source first, if you have an error in page .xml file in the layout folder. Then define your jquery like:
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
define jquery and print message in console
<script type="text/javascript">// < ![CDATA[
$.noConflict();
jQuery(document).ready(function(){
console.log('hello this is demo ');
});// ]]>
</script>Conclusion
We go along with you through the post to give you a brief of Magento jquery. It is really helpful assistance to assist you to control the page, very friendly for the user and has lots of other benefits. Therefore, don’t hesitate to apply it to your Magento store to utilize its advantage. Or if you need help configuring your Magento store? Connect with our Magento Developers and get started on your Magento website development today. We — MageSolution offers outstanding Magento solutions that help you free this task and enjoy the quick result. Contact us for a free consultation!
