4

I am creating a new theme for Magento 2 to be used inhouse as a basetheme for new projects. I am basing it on "Zurb Foundation for sites" and this boilerplate includes js files what-input.js, jquery.js and foundation.js:

i have created foundation.js as such: 

define([
'jquery',
'what-input'
],function($) {
    'use strict';
    $(function() {
        $(document).foundation();
    });
});

And what-input.js also has the same setup with define depending on jquery only. Am i doing this the right way? Will magento recognize what-input.js as a js module and load it when foundation.js is loaded? Also, how do i tell magento to load foundation.js?

These files are in theme_folder/web/js next to responsive.js and theme.js which both loads properly as far as i can tell.

EDIT:

Solved the issue i described in the comment by replacing the JS:

    "*": {
        "Mage2theme/js/foundation": {}
    }

With:

{
    "*": {
        "Mage2theme/js/foundation": {}
    }
}

But another problems arose, it does not copy the foundation.js file to pub/stacic theme folder so i get a 404 when trying to load it.

Improve this question
1

1 Answer 1

Reset to default
4

So i solved it:

By changeing 

{
    "*": {
        "Mage2theme/js/foundation": {}
    }
}

to 

{
    "*": {
        "js/foundation": {}
    }
}

It started searching for it in the correct place and made the appropriate symlink in pub/static subfolder. It also seems i need to do the same thing with what-input.js.

Not sure if i am missing something here because i saw some references pointing at require([]) at http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js-resources.html but this will have to do for now anyway.

Some things to note:

For adding the tags i used default.xml layout and inserted a phtml template in the content as such: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <block class="Magento\Framework\View\Element\Template" name="mage2themejs" as="mage2themejs" template="Magento_Theme::js/main.phtml"/>
            </referenceContainer>
        </body>
</page>

main.phtml then looks like this: 

<script type="text/x-magento-init">
    {
        "*": {
            "js/foundation": {}
        }
    }
</script>

And my foundation-init.js after being renamed since i also needed to include actual foundation.js finally looks like this: 

define([
    'jquery',
    'js/foundation'
    'js/what-input'
],function($) {
    'use strict';
    $(function() {
        $(document).foundation();
    });
});

By adding js/ it properly includes the specified file from themes web/js/ directory. I hope this information will be helpful.

Improve this answer

Your Answer

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

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