6 Easy Steps to Create A jQuery Widget in Magento 2
Vinh Jacker | 08-28-2024
The Most Popular Extension Builder for Magento 2
With a big catalog of 224+ extensions for your online store
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.
Hire JavaScript Developers
Step 1: Create a Front Action and Routes
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>
Step 2: Create Controller Action
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();
}
}
Step 3: Create an action handle in the layout folder
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>
Step 4: Declare JavaScript Dependencies
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"
}
}
};
Step 5: Declare Your 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;
});
Step 6: Create The Widget Template
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.
Wrap Up
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!
Table of content
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Setup Google Shopping Feed for Magento 2
Boost sales and visibility by integrating Google Shopping in Magento 2 with Mageplaza's guide. Maximize your e-commerce potential with this powerful feature.
7 mins read
|
09-06-2024
How to Import Coupons Codes in Magento 2?
Effortlessly import coupons in Magento with our FAQs. Explore guidance for seamless coupon management. Optimize your e-commerce operations with our expert insights.
4 mins read
|
09-04-2024
Detailed guide to creating a Magento 2 Coupon Code, a solution for businesses struggling with attracting new customers. An efficient tool to boost sales quickly.
4 mins read
|
09-04-2024
How to Apply Coupon by a link in Magento 2
Pre-apply coupon by link. Discover how to streamline the coupon application process using pre-applied links in Mageplaza extensions.
2 mins read
|
09-04-2024
Ecommerce Website Architecture: A Comprehensive Guide for 2024
Explore ecommerce website architecture and learn how to build a solid structure for your online store to achieve optimal performance and business success.
18 mins read
|
08-30-2024
Setup Google Shopping Feed for Magento 2
Boost sales and visibility by integrating Google Shopping in Magento 2 with Mageplaza's guide. Maximize your e-commerce potential with this powerful feature.
7 mins read
|
09-06-2024
How to Import Coupons Codes in Magento 2?
Effortlessly import coupons in Magento with our FAQs. Explore guidance for seamless coupon management. Optimize your e-commerce operations with our expert insights.
4 mins read
|
09-04-2024
Detailed guide to creating a Magento 2 Coupon Code, a solution for businesses struggling with attracting new customers. An efficient tool to boost sales quickly.
4 mins read
|
09-04-2024
How to Apply Coupon by a link in Magento 2
Pre-apply coupon by link. Discover how to streamline the coupon application process using pre-applied links in Mageplaza extensions.
2 mins read
|
09-04-2024
Ecommerce Website Architecture: A Comprehensive Guide for 2024
Explore ecommerce website architecture and learn how to build a solid structure for your online store to achieve optimal performance and business success.
18 mins read
|
08-30-2024
Website Support
& Maintenance Services
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started