6

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!

  • have you create your custom theme? – Rakesh Jesadiya Jan 24 '17 at 8:44
  • See my detailed answer. I've added you example JS, because this MIGHT cause your problem as well. Always know if you need to use require or define in JS, since require-js handles things differently. – Max Jan 24 '17 at 8:52
  • I updated the JS in my answer. Please note it, since there was something wrongful in it. Cheers! – Max Jan 24 '17 at 20:25
17

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;
});
  • I have tried the first option, but then when I tried to use jQuery on sample.js(in your case), it didnt work. It gave error which said something like "$ (or jQuery) is not defined". Will try the second option soon. But for now I copied theme.js from Magento Blank theme to my own theme, and by surprise it worked like that. I can even use jQuery that way. (My theme inherits from Magento Blank) – raulicious Jan 24 '17 at 9:24
  • 1
    if jQuery is not defined you need to wrap your code in require(['jquery'], function($){ /* your code... */ }); - hope it helps. – Max Jan 24 '17 at 9:56
  • I've updated the answer again for better understanding! Glad that I could helped you. – Max Jan 24 '17 at 10:22
  • @Max I tried your method ( magento.stackexchange.com/questions/206124/…) i posted a question , can you please check. – inrsaurabh Dec 17 '17 at 13:34
3

Please put JS in web/js folder in app/design/frontend/vendorname/themename and call into Magneto_Theme/layout/default_head_blocks.xml file..

<script src="jquery.js" />
<script src="js/modernizr.js" />

and Create one requirejs-config.js in the Magento_Theme.

var config = {
map: {
    '*': {




        modernizer        : 'Magento_Theme/js/modernizr.js'}




    }
};

Then remove pub/static folder expect .htaccess file and remove cache and run it..

  • is it usefulr for u? – Moin Malek Jan 25 '17 at 5:59

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.