How To Use Custom JQuery Plugin In Magento2

Magento2 uses Require Js to load javascript dependencies in the project, There are many benefits of using Require JS since you can can define which dependency to load on which page,  and also there is no need to include js in head, you can include js in body that makes the load time of the page more faster.

We will learn in this article how to include custom jQuery plugin using require js. So I am assuming that you have basic understanding of how to create a module in Magento2 if not, please read our other articles related to module development .

First we assume that our module name is Webkul\CustomJquery , now create a file requirejs-config.js inside following path from magento root app/code/Webkul/CustomJquery/view/frontend :

var config = {
    map: {
        '*': {
            mycomponent: 'Webkul_CustomJquery/js/jqplugin'
        }
    }
};

Now create a jqplugin.js file on this path app/code/Webkul/CustomJquery/view/frontend/web/js :

// define is used to register a module in require js 
define([
          "jquery"
     ], function($) {

     console.log('called');
        //defining our plugin
	$.fn.mycomponent = function(options) {
		
		// get initialised data here
		console.log(options);
		// 'your plugin is ready do whatevent you want to do'			
	};
});

In the above code I have created a plugin which name is mycomponent, this name must be the same name which was given in requirejs-config.js

Now create a test.phtml file on this path app/code/Webkul/CustomJquery/view/frontend/templates add this code like below :

<?php

$data =  json_encode(array(
    "name"=>"John Doe",
    "company"=>"Webkul"
));
?>

<script type="text/x-magento-init">
	{
		"*":{
			"mycomponent":{
				"wkdata":<?php echo $data ?>
			}
		}
	}
</script>

<script type="text/x-magento-init"> tag defines that On DOM ready it will load the defined components and initialize the configuration.

In the above code “*” defines that component will be loaded with no binding to any html element, you can specify an element there too . “mycomponent” in the js component that will be loaded here and the plugin that will be called and “wkdata”, you can name it anything you want it contains the data, that will be used by the plugin .

Note that the above data must be in json format else it will give error.

Now call this phtml on any page in your project and plugin will work ,make sure you run these commands after adding above code in the terminal   :

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

That’s all your plugin is ready to use, please try this and if you have any issues just comment below, I will try to add more on this in future.

Thanks