0

I have successfully added one js file using requirejs-config.js.

Code in requirejs-config.js

var config = {
    //when load requirejs will load following files also
    deps: [
        "js/main" //path to our main.js file. .js extension is not required.
    ]
}

Code in main.js

define([
        "jquery"
    ],
    function($)
    {
        "use strict";

        //our code goes here..
        console.log(" ====== Coming from Ved>Mytheme>Magento_Theme>web>js>main.js ====== ");

    }//main function ends here
);

But now I want to add multiple JS files:

  1. modernizer.js
  2. vendor.js [ This contains all 3rd party js. For ex. jQuery fancybox, flexslider, etc. ]
  3. main.js [ This is already added but this should include after vendor.js ]

All above js files are present at:
vendor_name/theme_name/Magento_Theme/web/js

4

Using deps: [...] in the requirejs-config.js suggests that your file will be loaded on every page. If you want to include your script in specific place You should use map: {"*": {...}}. You can include as many scripts as You need:

var config = {
    map: {
        "*": {
            "script1": "js/script1",
            "script2": "js/script2"
        }
    }
};

Then You can use this scripts with data-mage-init attribute or with <script type="text/x-magento-init" /> tag. Read more

Modernizer You can find here vendor/magento/magento2-base/lib/web/modernizr/modernizr.details.js.

To include vendor plugins/libraries use the same way (with map: {"*": {...}}) and define them if needed in your script:

define(['jquery', 'some-plugin'], function($, some-plugin) {...});

The order of scripts including is not important because we use Asynchronous Module Definition (AMD).

| improve this answer | |
  • Thank you for your help. I have added the code which worked for me. – vedu Aug 18 '17 at 7:14
0

Here is my code:

requirejs-config.js:

var config = {

     paths: {
        'flexslider': 'js/jquery.flexslider-min',
        'fancybox': 'js/jquery.fancybox' 
    },

    //when load requirejs will load following files also
    deps: [
        "js/main" //path to our main.js file. .js extension is not required.
    ],

    shim: {
        'flexslider' : 
        {
            deps: ['jquery']
        },
        'fancybox' : 
        {
            deps: ['jquery']
        }
    }
}

main.js :

    define([
            "jquery",
            "flexslider",
            "fancybox"
        ],
        function($)
        {
            "use strict";
            console.log(" ====== main.js is loaded====== ");
            $(window).load(function() 
            {
              //your code goes here..
            });
            $(document).ready(function() 
            {
              //your code goes here..
            });
        });
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.