Magento 2 Custom JavaScript – How to Add Custom JavaScript to Theme

customjavascriptmagento2requirejs

I have experience with Magento 1, and there adding a custom javascript file was very straightforward and logical.

But when it comes to Magento 2, I can't figure out how to add a new js file, where I would put little code snippets that affect different places around the page.

For example, I want to modify 'last viewed items' block on the home page, and use jQuery there and then maybe another script that changes some CSS dynamically somewhere (for example).

I find it very comfortable to do it in one single file like I used to do in Magento 1. Also, Magento official docs didn't help me since it didn't provide information clear enough.. I guess it has something to do with requireJS but is there another way? If not then can someone explain it a little clearer than Magento official docs did?

PS. Tried adding my custom.js file to head block trough XML, but then I didn't get access to jQuery.

Thanks!

Best Answer

jQuery is already pre-packaged with Magento2, there is no need to implement it on your own, however, you have to utilize it.

To add JS to your theme you have several possibilities.

By utilizing default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/:

Example Content: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

If you inject JS this way, dont forget to wrap your JS into the requirejs-conform way: 

require(['jquery'], function($){ /* Code... */ })

Or: by utilizing requirejs-config.js in your themes root folder.

Simply add Deps to it, example:

var config = {

    deps: [
        "js/main",
    ],

    map: {
        '*': {
            'owlcarousel': 'js/owl.carousel.min',
            'sticky' : 'js/jquery.sticky',
            'tether' : 'js/tether.min',
            'bootstrap': 'js/bootstrap.min'

        }
    },
    "shim": {
        "owlcarousel": ["jquery"],
        "tether": ["jquery"],
        "bootstrap": ["jquery"]
    }
};

In aboves example I register main.js by calling it in the Deps. The path is without the .js extention, requirejs is handeling this on its own.

Your main.js should be located at web/js/ in your theme.

The content of main.js should be like this:

define([
  "jquery",
  "whatever lib you wanna use..."
], 
function($) {
  "use strict";

    $(document).ready(function($){
        console.log("DID IT! jQuery log complete.");
    });
    return;
});
Related Topic