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/[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!

Improve this question
3
  • Do you have any errors? If you console log aos what is logged?
    – Ben Crook
    Jan 16, 2020 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, 2020 at 15:56
  • See my updated comment
    – Brett
    Jan 16, 2020 at 16:36

1 Answer 1

Reset to default
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/[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"

Improve this answer
6
  • Hi, I tried but did not work :(
    – Oscar Vazquez
    Jan 16, 2020 at 15:55
  • Updated because I misunderstood the issue. @OscarVazquez
    – Brett
    Jan 16, 2020 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, 2020 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, 2020 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, 2020 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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