Here we learn how to use javascript in magento2
1# First we will create requirejs-config.js file in folder app/code/NameSpace/Module/view/frontend
/** * @author Webkul Software Private Limited */ var config = { map: { '*': { customjs: 'NameSpace_ModuleName/js/customjsfile' // 'js/customjsfile' is path of javascript file in your module in web folder /* Here you can add multiple mapping * of javascript file separated by comma ( , )*/ } } };
In case of add js file in admin section you need to create this above file in app/code/NameSpace/Module/view/adminhtml folder
2# Now i’ll create javascript file which i want to use
create ‘customjsfile.js’ file in app/code/NameSpace/Module/view/frontend/web/js
/** * @author Webkul Software Private Limited */ define([ "jquery", "jquery/ui" ], function($) { "use strict"; $.widget('modulename.customname', { _create: function() { var yourData = this.options; /*this.options contaion all variables which you pass in it for use in your javascript code */ console.log(this.options); // here you can write your javascript code as your requirement } }); return $.modulename.customname; });
3# Now we’ll call this javascript file on phtml file.
add following code in our phtml file where we want to use javascript
<script type="text/x-magento-init"> { "body" : { "customjs": // customjs name as we map in our requirejs-config.js file { /* variables which we want to use in our javascript code*/ "yourvar1": "<?php echo $yourvar1 ?>", "yourvar2" : "<?php echo $yourvar2 ?>" } } } </script>
after these steps flush cache and check your page where you add this javascript .
Thanks …
Be the first to comment.