6 Easy Steps to Create A jQuery Widget in Magento 2
Vinh Jacker | 11-11-2024
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!
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
Top 10 Shopify ERP Solutions to Improve Operation Efficiency
Discover the top 10 Shopify ERP solutions to streamline your business operations, improve efficiency, and automate inventory management & order fulfillment.
Set Up Subscriptions On Shopify In 3 Minutes
Easily set up subscriptions on Shopify! Follow our guide for adding subscription products, creating policies, and choosing the best apps for your store's needs.
How to Connect Your Shopify Store to ActiveCampaign?
Learn how to connect Shopify to ActiveCampaign and unlock automated marketing strategies. In no time, synchronize consumer data and develop customized email campaigns.
Magento 2 Vue Storefront: Power Up Your Online Business
Unlock your Magento 2 store’s potential with Vue Storefront, a modern PWA solution that enhances performance, flexibility, and customer experience across all devices
Magento Self-Hosted vs Managed Hosting: What’s the Different
Differentiate Magento Self-hosted and Managed Hosting, examine each option’s pros and cons, and find out which is the most suitable choice for your business.
Top 10 Shopify ERP Solutions to Improve Operation Efficiency
Discover the top 10 Shopify ERP solutions to streamline your business operations, improve efficiency, and automate inventory management & order fulfillment.
Set Up Subscriptions On Shopify In 3 Minutes
Easily set up subscriptions on Shopify! Follow our guide for adding subscription products, creating policies, and choosing the best apps for your store's needs.
How to Connect Your Shopify Store to ActiveCampaign?
Learn how to connect Shopify to ActiveCampaign and unlock automated marketing strategies. In no time, synchronize consumer data and develop customized email campaigns.
Magento 2 Vue Storefront: Power Up Your Online Business
Unlock your Magento 2 store’s potential with Vue Storefront, a modern PWA solution that enhances performance, flexibility, and customer experience across all devices
Magento Self-Hosted vs Managed Hosting: What’s the Different
Differentiate Magento Self-hosted and Managed Hosting, examine each option’s pros and cons, and find out which is the most suitable choice for your business.
& 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