Magento 2 jQuery widget serves as a modular and reusable JavaScript component that encapsulates specific behavior or functionality. By creating custom jQuery widgets, you can enhance the user experience by adding interactive and customized functionality. Additionally, these widgets seamlessly integrate interactive elements into your Magento 2 storefront, making your website more engaging and user-friendly.
In this article, we’ll guide you through the steps to create a custom jQuery widget in Magento 2.
The first step is to create one front action to call the template. Create a routes.xml file at the path:
Mageplaza/Customize/app/code/Vendor/Module/etc/frontend/routes.xml
Add the following code to the routes.xml file:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="mageplaza" frontName="mageplaza">
<module name="Mageplaza_Customize" />
</route>
</router>
</config>
You need to create a Controller action file which is called Index.php file at the following path:
Mageplaza/Customize/app/code/Vendor/Module/Controller/Index/Index.php
Then add the code below
<?php
namespace Mageplaza\Customize\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
/**
* Index action
*
* @return $this
*/
public function execute()
{
$this->_view->loadLayout();
$this->_view->getLayout()->getBlock('page.main.title')->setPageTitle('DemoWidget');
$this->_view->renderLayout();
}
}
The next step is to create an action handle in the layout folder (e.g., demo_index_index.xml).
Mageplaza/Customize/app/code/Vendor/Module/view/frontend/layout/demo_index_index.xml
Then add the below-mentioned code:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="demo.page" template="Mageplaza_Customize::magento-widget.phtml"></block>
</referenceContainer>
</body>
</page>
Create a requirejs-config.js file at the path:
Mageplaza/Customize/app/code/Vendor/Module/view/frontend/requirejs-config.js.
Then run the following code:
var config = {
"map": {
"*": {
"myCustomWidget":"Mageplaza_Customize/js/my-custom-widget"
}
}
};
Create a my-custom-widget.js file at the path:
Mageplaza/Customize/app/code/Vendor/Module/view/frontend/web/js/my-custom-widget.js
Use the code mentioned in your text to declare your custom widget
define([
'jquery',
'jquery/ui'
], function($){
$.widget('mage.myCustomWidget', {
options: {
value: 1,
message:'test'
},
/**
* Widget initialization
* @private
*/
_create: function() {
}
});
return $.mage.myCustomWidget;
});
Create a template file (e.g., magento-widget.phtml) at the path:
Mageplaza/Customize/app/code/Vendor/Module/view/frontend/templates/magento-widget.phtml
And then add the below-mentioned code
<div class="maindiv">
<div class="secondary">
Widget Example using Magento 2
</div>
</div>
<script type="text/x-magento-init">
{
".maindiv": {
"myCustomWidget": {
"message": "custom message",
"value": 123
}
}
}
</script>
After completing the above steps, you need to run the following commands:
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
This will create a module, clear the cache, and allow you to check the result.
By following the steps outlined above, you will create and integrate your custom widget seamlessly into your Magento 2 store. These jQuery widgets in Magento 2 allow you to adjust your frontend components and provide a more engaging experience for users.
If you need further assistance or have any questions, feel free to ask!
Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.
Related Post
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
Holiday Marketing Hacks 2025 - How to Boost Sales for Magento 2 Stores? - Mageplaza
Discover the best 2025 holiday marketing strategies for Magento 2. Learn key trends, creative campaign ideas, and expert tips to increase seasonal sales.
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
Holiday Marketing Hacks 2025 - How to Boost Sales for Magento 2 Stores? - Mageplaza
Discover the best 2025 holiday marketing strategies for Magento 2. Learn key trends, creative campaign ideas, and expert tips to increase seasonal sales.