Saturday, January 23, 2016

How to load Javascript scripts in Magento 2

All assets file relate in frontend will be store in view/web of module structure



Require lib from requirejs-config.js file

var config = {
    map: {
        "*":{
            "lightbox": "VES_Sociallogin/js/lightbox/lightbox.min" //This related to file lightbox/lightbox.min.js
        }
    }

};

Order to call light box js


In any js files you can call to like this. You should use define instead of require in stituation

define([
    "jquery",
    "jquery/ui",
    "lightbox",
    'Magento_Ui/js/modal/alert',
    'uiComponent'
], function($, lightbox, alert, uiComponent){
    "use strict";
    $(window).ready(function(){
        //console.log('hello magento2! File js edited');
        DO ANY CODE YOU WANT HERE

    });

});

Execute js in template mangeto can be done with script tag
script tag with type="text/x-magento-init"
    {
        "*":{
            "VES_Sociallogin/js/lightbox/lightbox":{ //This way like that way do by requireJS-config

            }
        }
    }


    require([
        'PopupLogin',
        'prototype'
    ], function(LoginPopup, prototype){
        Event.observe(window, 'load', function() {
           
         return 
        });
    });

To apply changed. You should delete static file in pub/static//Magento//en_US//




No comments:

Post a Comment