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, \u00a0and 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.<\/p>\n\n\n\n
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 .<\/p>\n\n\n\n
First we assume that our module name is Webkul\\CustomJquery , now create a file\u00a0requirejs-config.js inside following path from magento root\u00a0app\/code\/Webkul\/CustomJquery\/view\/frontend :<\/p>\n\n\n\n
var config = {\n map: {\n '*': {\n mycomponent: 'Webkul_CustomJquery\/js\/jqplugin'\n }\n }\n};<\/pre>\n\n\n\nNow create a jqplugin.js file on this path app\/code\/Webkul\/CustomJquery\/view\/frontend\/web\/js :<\/p>\n\n\n\n
\/\/ define is used to register a module in require js \ndefine([\n "jquery"\n ], function($) {\n\n console.log('called');\n \/\/defining our plugin\n\t$.fn.mycomponent = function(options) {\n\t\t\n\t\t\/\/ get initialised data here\n\t\tconsole.log(options);\n\t\t\/\/ 'your plugin is ready do whatevent you want to do'\t\t\t\n\t};\n});<\/pre>\n\n\n\nIn 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<\/p>\n\n\n\n
Now create a test.phtml file on this path app\/code\/Webkul\/CustomJquery\/view\/frontend\/templates add this code like below :<\/p>\n\n\n\n
<?php\n\n$data = json_encode(array(\n "name"=>"John Doe",\n "company"=>"Webkul"\n));\n?>\n\n<script type="text\/x-magento-init">\n\t{\n\t\t"*":{\n\t\t\t"mycomponent":{\n\t\t\t\t"wkdata":<?php echo $data ?>\n\t\t\t}\n\t\t}\n\t}\n<\/script><\/pre>\n\n\n\n