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.

 

How to pass image data using Ajax to server side in backend magento 2?

By default Image data are not post using ajax. only plain data will be passed as Ajax post. if we need to pass image data using ajax we need to call ajax as below way,
Call jquery using requirejs way in backend template file,
Let’s create a simple example of the form,

We need to Use You FormData() object of Javascript to store our image data and using above way we can just send image data to server side using ajax.

How to resolve Uncaught ReferenceError: jQuery is not defined(anonymous function) error magento 2?

Many time during custom development in Magento 2 using require js we have faced error like,

Uncaught ReferenceError: jQuery is not defined(anonymous function).
Uncaught TypeError: $(…).customjs is not a function.

Above issue can be resolved using require js paths and shim attribute of requirejs.
Most of the time issue occurs because of jQuery is not loaded before our custom js file due to AMD(asynchronously module dependencies) nature of require js.

Many of the custom js or Third party js library depends on Jquery to load first.
In Magento 2, Magento team used require js concept for improvement of site speed.

So you need to add dependencies in requirejs-config.js file as below. let’s assume you are using slider js names myslider.min.js and they depend on jquery. Your requirejs-config.js file will be as below,

Gives pathname under the paths object, Your myslider.min.js stay at app/code/<Vendor>/<Module>/view/frontend/web/js/myslider.min.js

Gives dependencies using shim attribute. Our slider depends on jquery.