How to create custom jQuery Widget using Magento 2?

You can simply create jQuery widget using Magento 2 by just simple steps. Using jQuery widget you can pass dynamic value from php to js file.

Many times you need to pass dynamic value using phtml file to js file, In this scenario, you can help jQuery widget for getting dynamic value from a template or phtml file.

I have just created simple module for better understanding of widget. You can see many places inthe core code of magento which used jQuery widget.

Lets start with simple module, Rbj_DemoWidget,  Create registration.php file for our module register,
File path, app/code/Rbj/DemoWidget/registration.php

Create module.xml file for configure our module entry to setup_module table.
File path, app/code/Rbj/DemoWidget/etc/module.xml

We have create one front action for call our template, Create one routes.xml file,

File path, app/code/Rbj/DemoWidget/etc/frontend/routes.xml

In our routes.xml file, We have set frontname as demo. so we can access our template using storeUlr/demo/ControllerfoldeName/actionPhp
Now we create Controller action file called Index.php file,
File path, app/code/Rbj/DemoWidget/Controller/Index/Index.php

In controller, we have just set page title only and load and render layout for render our layout.
Our final Url will be STORE_URL/demo/index/index

Create our action handle in layout folder,
File path, app/code/Rbj/DemoWidget/view/frontend/layout/demo_index_index.xml
XML file demo_index_index.xml,

File path, app/code/Rbj/DemoWidget/view/frontend/requirejs-config.js
Create requirejs-config.js file for our js declaration,

Our widget name will be myCustomWidget.

File path, app/code/Rbj/DemoWidget/view/frontend/web/js/my-custom-widget.js
Create my-custom-widget.js file for declaring our widget,

In above js file, We have created the custom widget in Magento 2, Here you must need to pass jquery/ui as dependencies for call our custom widget in any phtml file.

_create function is used for call our default method and variable when our widget initialized. You can pass dynamic variable from the template. Here options object variable will be changed based on a value of template file.

Create template magento-widget.phtml file,File path, app/code/Rbj/DemoWidget/view/frontend/templates/magento-widget.phtml

Here we will call our customWidget in a template file,
Pass variable from here to override js variable.
We have set variable name passvalue and value to override default js value.

So you can pass a custom dynamic value like the above example and override default value.

Final result,
passvalue variable default value is test and we can pass the custom message so test value will be overridden with the custom message
same for abcd variable default value 1 will override with 123.

When you run the front action,
You got alert with value of passvalue equals to custom message and  abcd value equals 123.

 

Leave a Reply

Your email address will not be published. Required fields are marked *