Monday, November 16, 2015

How to load custom module js file in magento 2 ?


Step 1: Add your module js file under <Vendor>/<Module_Name>/view/<area>/web/js/
e.g. <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Step 2: Create requirejs-config.js file under <Vendor>/<Module_Name>/view/<area>/
e.g. <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js
Add following code to  requirejs-config.js
var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};
 
Note: you may set your object name as per your choice. In my case I have set as bannerslider and do not add the .js extension to file name in VendorName_ModuleName/js/flexslider

Step 3: Call the function of your module js in .phtml file as following manner.
 
<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>
Its working fine for me.
Trace : Use Net tab to see requested URL of js file loaded or not.


Note: better to use 'domReady!' plugin instead of $(window).load(), for example require(['jquery','bannerslider', 'domReady!],function($) { ...code execute only after dom load}) 

No comments:

Post a Comment