Magento 2 – Adding Frontend Global JavaScript in Theme

frontendjavascriptmagento2theme

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.

Best Answer

So i solved it:

By changeing

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

{
    "*": {
        "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.

Related Solutions

Magento 1.8 – Adding CSS and JS to Using Module Layout.xml

First, your layout file should be placed in app/design/frontend/{interface}/{theme}/layout/.
Second. If you want to add the css and js files only in the grouped and simple product pages don't use the <default> layout handle.
Make your layout look like this:

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>

Magento CE 1.9.0.1 – Unable to Use jQuery

Answer

To force it to load after jQuery in the head don't use addJs, rather use <action method="addItem"><type>skin_js</type> as skin is loaded after libraries (addJs)

As a side note

My preferred method of scripting custom jQuery is to add templates to before_body_end; there is no addJs action for this so instead you'll be creating a template file which includes the script tag with getSkinUrl. This ensures that your script is non-blocking. In Magento this may be considered to be laughable (due to the vast number of scripts in head) but rather adhere to best practice where your customizations are concerned.
Rather than use jQuery the RWD framework uses noConflict to alias it to $j:

File: skin/frontend/rwd/default/js/app.js

// ==============================================
// jQuery Init
// ==============================================

// Avoid PrototypeJS conflicts, assign jQuery to $j instead of $
var $j = jQuery.noConflict();