Magento 2 how to add external css and js library with RequireJS?

Question 1

I'm struggling trying to add this js library AOS

This is what I've tried to add both, css and js:

in Theme/Magento_Theme/layout/cms_index_index.xml i have this code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <css src="css/bootstrap.css" />
 <css src="https://unpkg.com/[email protected]/dist/aos.css" src_type="url" />
 </head>
</page>

The reason of why i'm using cms_index_index.xml instead of default_head_blocks.xml is because I want the library just be available in the home page.

Now for javascript I have this: Theme/Magento_Theme/requirejs-config.js

var config = {
 paths: {
 'bootstrap':'Magento_Theme/js/bootstrap.bundle',
 'aos':"https://unpkg.com/[email protected]/dist/aos"
 } ,
 shim: {
 'bootstrap': {
 'deps': ['jquery']
 },
 'aos': {
 'deps': ['jquery']
 },
 }
};

Bootstrap is working fine by the way.

Finally in Theme/Magento_Theme/templates/html/header.phtml i have this code:

<script type="text/javascript">require(['bootstrap','aos']);</script>

I practically did the same as I did for bootstrap, because bootstrap is working fine, but I don't know why AOS is not working. It should work just by adding classes like bootstrap.

Thanks and greetings!

Question 2

Do you have any errors? If you console log aos what is logged?

Question 3

When I use require(['bootstrap','aos'],function () { AOS.init(); }); I get the error that AOS is not defined, but the library says that it needs to be initialize by that way, besides that, there are no errors.

Question 4

See my updated comment

Question 5

UPDATE

I mis-read the original issue. The script is probably loading, but it looks like you're expecting it to be available in the global scope.

The AOS library is AMD-aware in that if it detects it's being loaded by RequireJS, it will "scope" it down to that requested instance. The require call accepts a second parameter of a callback function. If you create a function there and add aos as a parameter of the function you can use it:

require(['jquery', 'aos'], function (,ドル aos) {
 // "aos" is now an object for the AOS library
 aos.init();
});

To validate that you're actually downloading the source, in chrome you can open the developer tools and look at the Sources tab to see if unpkg.com is in there with the aos.js file:

Sources panel showing unpkg.com

I tested this by adding it to one of my requirejs-config.js files in our theme like so:

var config = {
 deps: [
 "js/theme-custom"
 ],
 paths: {
 slick: 'js/slick',
 aos: 'https://unpkg.com/[email protected]/dist/aos'
 },
 shim: {
 slick: {
 deps: ['jquery']
 }
 }
};

I'm not sure about the bootstrap working with just the require(['bootstrap']). It may be that that bootstrap library exposes itself to the window object to make it global instead of staying scoped, but that's just a guess.

Original Response

RequireJS auto-appends .js to all paths in the config. Try adding a query parameter to the URL prevent this from happening:

var config = {
 paths: {
 'bootstrap':'Magento_Theme/js/bootstrap.bundle',
 'aos':"https://unpkg.com/[email protected]/dist/aos?1"
 } ,
 shim: {
 'bootstrap': {
 'deps': ['jquery']
 },
 'aos': {
 'deps': ['jquery']
 },
 }
};

Answer based on information from Coderwall "Requirejs and external scripts"

Question 6

Hi, I tried but did not work :(

Question 7

Updated because I misunderstood the issue. @OscarVazquez

Question 8

I checked in sources and It seems that the library is loaded correctly. I changed it to footer.phtml but it's still not working :( if I type this inside the require function aos.init(); it throws an error saying that it's not a function, in documentation I need to initialize in this way.

Question 9

With the above requirejs-config, the following inline script worked for me (as far as I can tell as I'm not using AOS):

<script type="text/javascript">require(['jquery', 'aos'], function (,ドル aos) { console.log("AOS Initializing"); aos.init(); console.log("AOS Initialized"); });</script>

@OscarVazquez

Question 10

It works now! my error was not including the jquery and $ symbol in require and function, thank you very much! :)

Brett 1,84912 silver badges22 bronze badges · Accepted Answer · 2020-01-16 15:48:23Z

UPDATE

I mis-read the original issue. The script is probably loading, but it looks like you're expecting it to be available in the global scope.

The AOS library is AMD-aware in that if it detects it's being loaded by RequireJS, it will "scope" it down to that requested instance. The require call accepts a second parameter of a callback function. If you create a function there and add aos as a parameter of the function you can use it:

require(['jquery', 'aos'], function (,ドル aos) {
 // "aos" is now an object for the AOS library
 aos.init();
});

To validate that you're actually downloading the source, in chrome you can open the developer tools and look at the Sources tab to see if unpkg.com is in there with the aos.js file:

Sources panel showing unpkg.com

I tested this by adding it to one of my requirejs-config.js files in our theme like so:

var config = {
 deps: [
 "js/theme-custom"
 ],
 paths: {
 slick: 'js/slick',
 aos: 'https://unpkg.com/[email protected]/dist/aos'
 },
 shim: {
 slick: {
 deps: ['jquery']
 }
 }
};

I'm not sure about the bootstrap working with just the require(['bootstrap']). It may be that that bootstrap library exposes itself to the window object to make it global instead of staying scoped, but that's just a guess.

Original Response

RequireJS auto-appends .js to all paths in the config. Try adding a query parameter to the URL prevent this from happening:

var config = {
 paths: {
 'bootstrap':'Magento_Theme/js/bootstrap.bundle',
 'aos':"https://unpkg.com/[email protected]/dist/aos?1"
 } ,
 shim: {
 'bootstrap': {
 'deps': ['jquery']
 },
 'aos': {
 'deps': ['jquery']
 },
 }
};

Answer based on information from Coderwall "Requirejs and external scripts"

I checked in sources and It seems that the library is loaded correctly. I changed it to footer.phtml but it's still not working :( if I type this inside the require function aos.init(); it throws an error saying that it's not a function, in documentation I need to initialize in this way.
With the above requirejs-config, the following inline script worked for me (as far as I can tell as I'm not using AOS): <script type="text/javascript">require(['jquery', 'aos'], function (,ドル aos) { console.log("AOS Initializing"); aos.init(); console.log("AOS Initialized"); });</script> @OscarVazquez
It works now! my error was not including the jquery and $ symbol in require and function, thank you very much! :)

Stack Exchange Network

Magento 2 how to add external css and js library with RequireJS?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Magento 2 how to add external css and js library with RequireJS?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions