0

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/aos@2.3.1/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/aos@2.3.1/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!

3
  • Do you have any errors? If you console log aos what is logged? – Ben Crook Jan 16 '20 at 15:47
  • 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. – Oscar Vazquez Jan 16 '20 at 15:56
  • See my updated comment – Brett Jan 16 '20 at 16:36
2

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/aos@2.3.1/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/aos@2.3.1/dist/aos?1"
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        },
        'aos': {
            'deps': ['jquery']
        },
    }
};

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

6
  • Hi, I tried but did not work :( – Oscar Vazquez Jan 16 '20 at 15:55
  • Updated because I misunderstood the issue. @OscarVazquez – Brett Jan 16 '20 at 16:36
  • 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. – Oscar Vazquez Jan 16 '20 at 16:55
  • 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 – Brett Jan 16 '20 at 19:45
  • It works now! my error was not including the jquery and $ symbol in require and function, thank you very much! :) – Oscar Vazquez Jan 16 '20 at 21:50

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.