Hello Magento Friends,

In today’s blog, we will learn How to Create a Custom jQuery Widget in Magento 2.

In Magento 2, a jQuery widget is a modular and reusable JavaScript component that encapsulates a specific behavior or functionality. Creating custom jQuery widgets enhances the user experience and adds interactive elements to your storefront.

Let’s learn How to Create a Custom jQuery Widget in Magento 2.

Steps to Create Custom jQuery Widget in Magento 2:

Step 1: Create one front action to call the template. Create one routes.xml file at the below path.


Then add the code as follows

Note – In our routes.xml file, we have set frontname as demo. So we can access our template using storeUlr/demo/ControllerfoldeName/actionPhp

Step 2: Now create Controller action file called Index.php file at the following path


Then add the below-mentioned code

Step 3: Create an action handle in the layout folder.


And add the code as given below

Step 4: Create a requirejs-config.js file for js declaration.


Then add the below-mentioned code

Our widget name is myCustomWidget.

Step 5: Create a my-custom-widget.js file for declaring widget.


Use the code mentioned below

Step 6: Create a template magento-widget.phtml file.


And finally, add the below code-snippet


custom jQuery widget Magento 2


Hence, using the above method, you can successfully create and integrate your own custom jQuery widgets into your Magento 2 website. Experiment with different widget functionalities to enhance the user experience and make your online store more dynamic and user-friendly.

Also Learn How to Create a Widget Programmatically in Magento 2.

If you come across any error while performing the above steps, you can easily connect with me through the comment section and I will quickly provide you with the solution for it.

Happy Coding!

Click to rate this post!
[Total: 0 Average: 0]