What is jQuery and how to use it in Magento 2?

jQuery library is the core functionality that includes basic functions for work with elements. It helps to manage page content, handle, modify, and manage events via JavaScript.

You can use jQuery with a script like this:

<script>

    require([

        'jquery'

],

function ($) {

        $("#element_example").show();

    });

</script>

jQuery UI in Magento 2

Besides, there is jQuery UI that extends the jQuery functionality with the set of add-ons to improve the UI, add effects, widgets, and themes. The full list of available tools you can find in the official documentation.

Let’s see how to use jQuery UI in Magento 2. There are 4 ways how you can request the elements from the UI library. 

1) You can use this script:

<script>

    require([

        'jquery',

        jquery/ui

],

function ($) {

       $("#element_example").accordion();

    });

</script>

However, Magento recommends using the next two.

2) You can set up a data-mage-init configuration:

<div id="element_example" 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>

3) You can configure the special type of script - text/x-magento-init:

<script type="text/x-magento-init">

{

             "#element_example": { // Your selector that will use widget

                         "accordion": // <?php echo $block->getNavigationAccordionConfig(); ?>

}

}

<script>

jQuery UI in Magento 2.3.3

jQuery UI library was restructured in Magento 2.3.3. jQuery UI was split in separate widgets that can be loaded by core modules only when they are necessary. It was made to improve the performance of store features.

This means that you need to remove "jquery/ui" dependency. Otherwise, you will see a notification:

"Fallback to JQueryUI Compat activated. Your store is missing a dependency for a jQueryUI widget. Identifying and addressing the dependency will dramatically improve the performance of your site. Message from compat.js"

Here is an example of the correct script for Magento 2.3.3:

<script>

define([

       'jquery',

       ‘jquery-ui-modules/widget’

],
function ($) {

       ‘use strict’;

        $.widget(‘...’);

    });

</script>

Or you can use the "delegated" dependency approach to support compatibility with older versions:

<script>

define([

        'jquery',

       ‘Magento_Ui/js/modal/modal’

],

function ($) {

        ‘use strict’;

        $.widget(‘...’);

    });

</script>

Edit methods in a widget

Magento supports jQuery widgets implementation.

There are two ways you can do it: mixin and custom component development. If you want to add new methods to existing code, it’s better to use mixin. But if you are creating new code from scratch, you can create a custom component by yourself. Let’s consider both options.

Mixin

For this, you need to do only 2 steps:

Step 1. Create app/code/<Vendor>/<Module>/view/frontend/requirejs-config.js with the code:

var config = {

"config": {

"mixins": {

"mage/tabs": {

'<Vendor>_<Module>/js/accordion-mixin': true

}

}

}

};

Step 2. Create app/code/<Vendor>/<Module>/view/frontend/web/js/accordion-mixin.js with required Magento 2 specifications:

define([

'jquery'

], function($) {

return function (original) {

$.widget('mage.accordion', original, {

activate: function() {

// your code here

return this._super();

}

}

);

return $['mage']['accordion'];

}

});

Add methods to a widget

To add it, you need to create app/code/<Vendor>/<Module>/view/frontend/web/js/custom-accordion.js and configure the code:

define([

'jquery',

'jquery/ui',

'mage/accordion'

], function($) {

$.widget('vendor.customAccordion', $.mage.accordion, {

someAction: function(element_example) {

// your code here

}

});

});

Then go to template app/code/<Vendor>/<Module>/view/frontend/templates/example.phtml and add the next code:

<div id="elemen_examplet"></div>
<script>
require([
'jquery',
'<Vendor>_<Module>/js/custom-accordion'], function ($) {
$("#element_example").customAccordion();
$("#element_example").customAccordion("someAction");
// Calling the vidget function the way we described before
});
</script>

If you're seeking to customize your Magento store, leave this to professionals. Use our software development service, specialists with 11+ years of experience will realize your project under the most convenient conditions for you.