Magento 2 RequireJS – Add JS Files

javascriptjquerymagento2

Been trying to figure out how to add some custom JS files with requirejs.

I've been successful in adding them via default_head_blocks.xml, however… in doing so… they get loaded before the jquery script that magento2 uses…

so I am wondering how I can use the requirejs to add a few .js files and make sure they are loaded AFTER the jquery library?

I read the documentation here:

http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js-resources.html

but it's talking about modules and such, I don't have a module, I am just trying to add some jquery scripts on product pages and the home page.

Best Answer

simply use that in you js file all code inside that. this will load the jquery first. after that just add you script via default_head_blocks.xml that worked for and hope worked for you.

require([ 'jquery', 'jquery/ui'], function($){ //your js file code here  });

this solution for theme

Related Solutions

Get requirejs-config.js to Load Declared CDN’s for jQuery in Magento 2

After much trail this is what boiled out. The location of the requirejs-config.js is correct as the docs indicate,

/app/design/frontend/<vendor>/<theme>/requirejs-config.js

But the why this didn't work was that if you redid the jQuery to a CDN then everything else would fail as the mappings were based on that (as I understand it at this time). This is what I ended up needing to do to get everything to load an show up.

var config = {
    "paths":{
        'jquery':'https://code.jquery.com/jquery-1.11.3.min',
        '_jquery':'jquery/',
        'jquery/ui':'https://code.jquery.com/ui/1.11.4/jquery-ui',
        'jquery/jquery-migrate':'https://code.jquery.com/jquery-migrate-1.2.1.min',
        'spine':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
        'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min'},
     map: {
        "*": {
            "jquery/jquery.mobile.custom": "/static/frontend/wsu/wsu_base/en_US/jquery/jquery.mobile.custom.js",
            'jquery/jquery.cookie':"/static/frontend/wsu/wsu_base/en_US/jquery/jquery.cookie.js",
            'jquery/jquery.validate':'/static/frontend/wsu/wsu_base/en_US/jquery.validate.js',
            'jquery/jquery.metadata':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery.metadata.js',
            'jquery/jquery-ui-timepicker-addon':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery-ui-timepicker-addon.js'
        }
    },
    "shim": {
        "spine" : ["jquery","jquery/ui"],
        "datatables" : ["jquery","jquery/ui"]
    },deps: [
        "spine",
        "datatables"
    ]
};

Magento2 – Override JS File via requirejs-config.js

placing the file under app/design/frontend/Mytheme/mytheme/Magento_Catalog/web/js/price-box.js should be sufficient (without any require config) to overload the file in your theme.

As already said, try clearing the pub/static/ folder content (except the .htaccess). On unix systems you can do this with the command rm -rf pub/static/* from the root directory since * does not include any files starting with a .

If this does not work, I assume there is a problem, since the original File is located in the base area while your theme is in the frontend area. Logically (if this is not working), since base should be inherited by all areas, this might be a bug in the overloading mechanism.

Best Answer

Related Solutions

Get requirejs-config.js to Load Declared CDN’s for jQuery in Magento 2

Magento2 – Override JS File via requirejs-config.js

Related Topic