{"id":19787,"date":"2019-03-07T14:50:15","date_gmt":"2019-03-07T12:50:15","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=19787"},"modified":"2026-07-08T10:54:00","modified_gmt":"2026-07-08T08:54:00","slug":"how-to-use-jquery-and-requirejs-in-magento-2-javascript-solutions","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-use-jquery-and-requirejs-in-magento-2-javascript-solutions.html","title":{"rendered":"How to use jQuery and requireJS in Magento 2? 2026 JavaScript Solutions"},"content":{"rendered":"

To give your online store a modern, smart look without globally altering the current design, you can include dynamic, changing elements in it. The best solution for adding such elements in Magento 2 is JavaScript, and how to work with it we already described in the previous article.<\/p>\n

<\/p>\n

Although Magento continues to support jQuery and RequireJS in its frontend architecture, many custom projects also use modern JavaScript tooling for standalone applications and integrations. Understanding the native Magento JavaScript stack remains important when developing or maintaining themes and modules in 2026.<\/p>\n

In today’s blog post, we will go over the jQuery, jQuery UI widgets, and RequireJS – the important tools the developer needs to master if they want to work productively with JavaScript in Magento 2.<\/p>\n

Table of Contents:<\/strong><\/p>\n

What are jQuery and jQuery UI widgets?
\n<\/a>How can jQuery UI Widget methods be instantiated?
\n<\/a>How can you add new methods to a jQuery UI Widget?
\n<\/a>How can a jQuery UI Widget method be wrapped with custom logic?
\n<\/a>How do you load a file with require.js and define a require.js module?
\n<\/a>How are require.js module dependencies specified?
\n<\/a>How are module aliases configured in requirejs-config.js?
\n<\/a>How do you debug which file a requireJS alias refers to?<\/a><\/p>\n

What are jQuery and jQuery UI widgets?<\/h2>\n

To simplify the creation of various elements like drop-down lists, accordions, buttons, datepickers, etc., Magento implements jQuery and jQuery UI libraries.<\/p>\n

If you compare jQuery and pure JS, then the jQuery code is significantly shorter and simpler, but at the same time has a far larger load on browser performance.<\/p>\n

jQuery UI is a library extension that provides a set of out-of-the-box widgets for projects.<\/p>\n

How to use Magento core jQuery widgets?<\/strong><\/p>\n

Magento uses jQuery UI widgets to save development time, so the most commonly used elements in projects are already available for use with no need for configuration.<\/p>\n

Practically, in any project, you have to make an FAQ page, or tabs with product descriptions, and a date picker or slider will be the widgets that you will most likely use in your theme for that purpose.<\/p>\n

How can jQuery UI Widget methods be instantiated?<\/h2>\n

Using the accordion as an example ($ (“# element”). accordion ();) I will show you how the call process is performed. It can be done in different ways.<\/p>\n

Method #1: In the template, using the script.<\/p>\n

<script>\r\n    require([\r\n        'jquery',\r\n        'accordion'], function ($) {\r\n        $(\"#element\").accordion();\r\n    });\r\n<\/script><\/pre>\n
Method #2: In the template, using data-mage-init.<\/p>\n
<div id=\"element\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": true, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'>\r\n    <div data-role=\"collapsible\">\r\n        <div data-role=\"trigger\">\r\n            <span>Title 1&lt;\/span>\r\n        <\/div>\r\n    <\/div>\r\n    <div data-role=\"content\">Content 1<\/div>\r\n<\/pre>\n
Method #3: In the script file, using a selector, or by calling a function.<\/p>\n
require([\r\n        'jquery',\r\n        'accordion'], function ($) {\r\n        $(\"#element\").accordion();\r\n    });\r\n<\/pre>\n
Method #4: Using <script type=”text\/x-magento-init” \/>.<\/em><\/p>\n
<script type=\"text\/x-magento-init\">\r\n{\r\n\t\"#element\": { \/\/ your selector that uses the widget\r\n\t\t\"accordion\": \/\/ variables are listed here, for example <?php echo $block->getNavigationAccordionConfig(); ?>\r\n\r\n}\r\n}\r\n<script>\r\n<\/pre>\n
How can you call jQuery UI Widget methods?<\/strong><\/p>\n
It is executed with the following code:<\/p>\n
$ ('# element'). accordion (\"someAction\");\r\n<\/pre>\n
Call the widget and the function we want via the method.<\/p>\n
How can you add new methods to a jQuery UI Widget?<\/h2>\n
To add new methods to a jQuery UI Widget, we either add an existing widget (using mixin), or create a custom component ourselves. The first option is preferable when we aim to only expand the existing code. Otherwise, when you work from scratch, it is better to stick to the second one.<\/p>\n
Let’s consider the first path:<\/p>\n
app\/code\/Vendor\/Module\/view\/frontend\/requirejs-config.js<\/span><\/em><\/p>\n
var config = {\r\n\"config\": {\r\n\"mixins\": {\r\n\"mage\/tabs\": {\r\n'Vendor_Module\/js\/accordion-mixin': true\r\n}\r\n}\r\n}\r\n};\r\n<\/pre>\n
app\/code\/Vendor\/Module\/view\/frontend\/web\/js\/accordion-mixin.js<\/em><\/p>\n
define([\r\n'jquery'\r\n], function($) {\r\nreturn function (original) {\r\n$.widget('mage.accordion', original, {\r\nactivate: function() {\r\n\/\/ your code here\r\nreturn this._super();\r\n}\r\n}\r\n);\r\nreturn $['mage']['accordion'];\r\n}\r\n});\r\n<\/pre>\n
How can a jQuery UI Widget method be wrapped with custom logic?<\/h2>\n
The second option is to introduce a custom component:<\/p>\n
app\/code\/Vendor\/Module\/view\/frontend\/web\/js\/custom-accordion.js<\/em><\/p>\n
define([\r\n'jquery',\r\n'jquery\/ui',\r\n'mage\/accordion'\r\n], function($) {\r\n$.widget('vendor.customAccordion', $.mage.accordion, {\r\nsomeAction: function(element) {\r\n\/\/ your code here\r\n}\r\n});\r\n});\r\n<\/pre>\n
Then we add to the template the following:<\/p>\n
app\/code\/Vendor\/Module\/view\/frontend\/templates\/test.phtml<\/em><\/p>\n
<div id=\"element\"><\/div>\r\n<script>\r\nrequire([\r\n'jquery',\r\n'Vendor_Module\/js\/custom-accordion'], function ($) {\r\n$(\"#element\").customAccordion();\r\n$(\"#element\").customAccordion(\"someAction\");\r\n\/\/ Calling the vidget function the way we described before\r\n});\r\n<\/script>\r\n<\/pre>\n
How do you load a file with require.js and define a require.js module?<\/strong><\/h2>\n
Magento 2 introduced a number of innovations in the use of JavaScript, and one of them is requireJS (JavaScript file loader).<\/p>\n
In order to add the JS file to your Magento 2 custom module, you need to add the requirejs-config.js<\/strong> file to your module at the path app \/ code \/ <Company> \/ <modulename> \/ view \/ frontend.<\/em><\/span><\/p>\n
var config = {\r\n    map: {\r\n        '*': {\r\n            belvgmodule: 'Company_modulename\/js\/belvgrequirejs',\r\n        }\r\n    }\r\n};\r\n<\/pre>\n
For example, in this case, the map property contains an object with the key that is an alias to a file and the value that is the real path to the file.<\/p>\n
“*” Is used to determine that you are using a new module in RequireJS; if you want to add a file to the existing module, you will need to specify the name of the module instead of “*”.<\/p>\n
No file extension is required, because the system accepts js as the default type.<\/p>\n
The united configuration will be loaded to the page immediately after require.js and will be used by the require () and define () functions.<\/p>\n
Let me show you how to define a RequireJS module using a helper \/ belvg<\/em> module as an example. To use the module, we need to add the following code to the JS file (main.js for example):<\/p>\n
requirejs(['helper\/belvg'], function(helper_belvg) {\r\n    var message = helper_belvg.getMessage();\r\n    alert(message);\r\n});<\/pre>\n
We specify the modules as an array that we want to load and pass this array as the first argument to the require.js function call. RequireJS then passes the object that exports the helper \/ belvg<\/strong> module to our main function as the first parameter of helper_belvg<\/strong>.<\/p>\n
Then we need to define a helper \/ belvg<\/strong> module. To define a module, turn the module name into a file path, and add the following contents (scripts \/ helper \/ belvg.js):<\/p>\n
define([], function(){\r\n    var x = {};\r\n    x.getMessage = function()\r\n    {\r\n        return 'Some message';\r\n    }\r\n    return x;\r\n});<\/pre>\n
When adding custom JavaScript, it is also a good practice to avoid overriding Magento core files whenever possible. Using mixins, widgets, and RequireJS configuration helps keep customizations upgrade-friendly and makes future maintenance easier.<\/p>\n
How are require.js module dependencies specified?<\/h2>\n
To build a dependency on a third-party plugin, specify [shim]<\/strong> in the following configuration files:<\/p>\n
requirejs-config.js<\/p>\n
var config = {\r\n     \"shim\": {\r\n     \"3-rd-party-plugin\": [\"jquery\"]\r\n     }\r\n };<\/pre>\n
<third-party-plugin>.js<\/p>\n
!(function($){\r\n     \/\/ plugin code\r\n     \/\/ where $ == jQuery\r\n })(jQuery);<\/pre>\n
How are module aliases configured in requirejs-config.js?<\/h2>\n
In our example, the name of the module RequireJS was tied to the location of this module on the disk. In other words, the helper \/ belvg<\/strong> module will always be located in the helper \/ belvg.js<\/strong> path.<\/p>\n
RequireJS allows you to change this through configuration. For example, if you want your helper \/ belvg<\/strong> module to be called hello, you would run the following configuration code before running your program:<\/p>\n
require.config({   \r\n    paths: {        \r\n        \"hello\": \"helper\/belvg\"\r\n    },\r\n});<\/pre>\n
The paths configuration key is the place where we can rename the modules. The paths object key is the name you want to assign (hello), and the value is the actual module name (helper \/ belvg<\/strong>).<\/p>\n
Therefore, we can work with the module like this:<\/p>\n
requirejs(['hello'], function(hello) {\r\n    alert(\"Some message\");\r\n});<\/pre>\n
How do you regenerate the compiled requirejs-config.js file after changes?<\/h3>\n
Remove static content and execute:<\/p>\n
php bin \/<\/em> magento<\/em> cache: clean<\/em><\/p>\n
How do you debug which file a requireJS alias refers to?<\/h2>\n
To track which file corresponds to the renamed module, you need to open the requirejs-config.js<\/strong> file:<\/p>\n
var config = { \r\n    map: { \r\n        '*': { \r\n            addToCart: 'Magento_Module\/js\/module' \r\n         } \r\n     } \r\n};\r\n<\/pre>\n
You can find the key map in the file, which contains the aliases parameters of the module and its path.<\/p>\n
Demonstrate that you understand how to create and configure Magento JavaScript mixins.
\nMagento 2 comes with a variety of functional capabilities, and when it comes to redefining the JavaScript component or extending the JavaScript component in Magento 2, you need to use mixins.<\/p>\n
Mixins are JavaScript files located in the web \/ js<\/strong> directory. A mixin file can be embedded in several directories if these directories are in web \/ js<\/strong>.<\/p>\n
The example of creating a mixin for custom product samples:<\/p>\n
Step 1. Create app\/code\/VendorName\/ModuleName\/view\/frontend\/requirejs-config.js<\/strong><\/p>\n
var config = {\r\n    config: {\r\n        mixins: {\r\n            'Magento_Swatches\/js\/swatch-renderer': {\r\n                'VendorName_ModuleName\/js\/swatch-renderer-mixin': true\r\n            }\r\n        }\r\n    }\r\n};<\/pre>\n
Step 2. Create app\/code\/VendorName\/ModuleName\/view\/frontend\/web\/js\/swatch-renderer-mixin.js.<\/strong><\/p>\n
define(['jquery'], function ($) {\r\n    'use strict';\r\n\r\n    return function (SwatchRenderer) {\r\n        $.widget('VendorName.SwatchRenderer', $['mage']['SwatchRenderer'], {\r\n            _init: function () {\r\n                console.log('getProductSwatchRenderer');\r\n                this._super();\r\n            }\r\n        });\r\n        return $['mage']['SwatchRenderer'];\r\n    };\r\n});<\/pre>\n
The example of mixin for Magento_Checkout payment information:
\n1. Create app\/code\/VendorName\/ModuleName\/view\/frontend\/requirejs-config.js<\/p>\n
\/**\r\n * Copyright © Magento, Inc. All rights reserved.\r\n * See COPYING.txt for license details.\r\n *\/\r\n\r\nvar config = {\r\n    config: {\r\n        mixins: {\r\n            'Magento_Checkout\/js\/action\/set-payment-information': {\r\n                'Magento_CheckoutAgreements\/js\/model\/set-payment-information-mixin': true\r\n            }\r\n        }\r\n    }\r\n};\r\n<\/pre>\n
2. Create app\/code\/VendorName\/ModuleName\/view\/frontend\/web\/js\/set-payment-information-mixin.js <\/span>(example: \/<\/span>app<\/span>\/<\/span>code<\/span>\/<\/span>Magento<\/span>\/<\/span>CheckoutAgreements<\/span>\/<\/span>view<\/span>\/<\/span>frontend<\/span>\/<\/span>web<\/span>\/<\/span>js<\/span>\/<\/span>model<\/span>\/set-payment-information-mixin.js).<\/span><\/p>\n
\/**\r\n * Copyright © Magento, Inc. All rights reserved.\r\n * See COPYING.txt for license details.\r\n *\/\r\n\/*global alert*\/\r\ndefine([\r\n    'jquery',\r\n    'mage\/utils\/wrapper',\r\n    'Magento_CheckoutAgreements\/js\/model\/agreements-assigner'\r\n], function ($, wrapper, agreementsAssigner) {\r\n    'use strict';\r\n\r\n    return function (placeOrderAction) {\r\n\r\n        \/** Override place-order-mixin for set-payment-information action as they differs only by method signature *\/\r\n        return wrapper.wrap(placeOrderAction, function (originalAction, messageContainer, paymentData) {\r\n            agreementsAssigner(paymentData);\r\n\r\n            return originalAction(messageContainer, paymentData);\r\n        });\r\n    };\r\n});\r\n<\/pre>\n
Before deploying JavaScript changes to production, remember to clear the cache and redeploy static content if required by your deployment workflow. Testing custom widgets and mixins across different storefront pages also helps ensure they behave consistently with other Magento components.<\/p>\n
Summary<\/h2>\n
JavaScript is a very useful technology for ecommerce developers, yet it has one flaw – JavaScript elements tend to slow down the pages’ loading, worsening your store’s performance. Defer JS for Magento 2 is a great tool to optimize your webstore – it moves JavaScript to the bottom of the page, deferring its parсing and loading. This way, your customers will experience the pleasure of comfortable and fast online shopping.<\/p>\n","protected":false},"excerpt":{"rendered":"To give your online store a modern, smart look without globally altering the current design, …","protected":false},"author":82,"featured_media":19789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[491,389,473,524],"tags":[],"class_list":["post-19787","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento-2","category-magento2-development","category-magento-front-end-developer","category-magento-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t