Magento jquery: Its benefits and how to use it in Magento 2

How to add Jquery to Magento

jQuery library is the core feature that involves basic functions for work with elements. It assists to control page content, handle, modify, and manage events via JavaScript. You may think of using an external Magento jquery libraryfor 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

jquery

Advantages of Magento jquery

Are you are looking to bring a modern and smart look for your Magento 2 website? The most affordable solution to add dynamic elements in Magento 2 website isJavascript. 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 web URL of the extension and it adds base URL in the prefix of your module URL.

Using the built-in Magento jquerylibrary solve the problem and at the same time provide 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 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 “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 feature like:

require(['jquery', 'jquery/ui'], function($){
     //your js code here  
 });

For instance:
Inside the required feature, you can directly approach 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 widget of Magento from 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>

Need help configuring your Magento 2 store? Connect with our Magento 2 Developers and get started on your Magento development project today.  We — MageSolution offers outstanding Magento solutions that can skyrocket your revenue and increase conversions.

Besides, if you are looking out for a cost effective Magento package for your eCommerce store, then look nowhere other than Magesolution. We not only offer an affordable Magento Development Package for all size and budget but also ensure that it helps your online business grow and sustain. Contact us for a free consultation!

26653 Total Views 3 Views Today