JavaScript – How to Add JS to Home Page in Magento 2.2

javascriptjquerymagento2.2requirejs

I need to add some jQuery script to home page.

Following docs:
http://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js-resources.html

I have my.js file with inside:

require(["jquery"], function($){
   //my code
});

but in the console i've got thi error:

TypeError: require is not a function

Which is the correct way to add e js file in the homepage only?

EDIT:

the problem seems to be that the js is loaded before all the others, including jquery, when it is inserted in the <head> tag

How to make it to be load at the end of the que?

Best Answer

We should use the javascript init method for adding the javascript to our page.

Javascript init method helps you to solve few problems.

They provide a standard mechanism to discourage directly embedding javascript into a page.
They provide a way to invoke a standalone RequireJS module (defined with define) as a program.
They provide a way to pass that program a server-side generated JSON object.
They provide a way to tell that program which (if any) DOM nodes it should operate on.

You can get more info here https://alanstorm.com/magento_2_javascript_init_scripts/

Now let's use this in your case.

Navigate to

Magento Admin > Content > CMS Pages > Homepage

Add following code in the content of homepage.

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

Now create a homepage.js file

app/code/Vendor/Module/view/frontend/web/js/homepage.js

Add following code in the file

define([
    'jquery'
], function (jQuery) {
    'use strict';

    return function (config) {
        alert(jQuery('body').attr('class'));
        // add your jQuery script here
    }
});

Run command php bin/magento setup:static-content:deploy

Related Solutions

Magento 2 RequireJS – Add JS Files

simply use that in you js file all code inside that. this will load the jquery first. after that just add you script via default_head_blocks.xml that worked for and hope worked for you.

require([ 'jquery', 'jquery/ui'], function($){ //your js file code here  });

this solution for theme

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

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;
});

Best Answer

Related Solutions

Magento 2 RequireJS – Add JS Files

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

Related Topic