Magento – Best Way to Add JS file in Magento 2 Theme

javascriptmagento2magento2.2

I have created a custom theme. I have to use bootstrap in my theme. So I am adding the JS file as follows :

In theme directory /Magento_Theme/requirejs-config.js file.

var config = {
 paths:{
"jquery.bootstrap":"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"
},
shim:{
'jquery.bootstrap':{
    'deps':['jquery']
}
}
};

But it's not working.

I have tried with this in default_head_blocks.xml. JS file in theme/web/js directory

<script src="js/bootstrap.min.js"/>

But getting error Mismatched anonymous define() module

Best Answer

The best way to add JS is with requirejs.

To add a js in theme via Requirejs:

Supposing that your js file is: myfile.js

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/myfile'
        }
    }
};

app/design/frontend/{Vendor}/{theme}/web/js/myfile.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('hello myscript');
           //put all your myfile js code here
       }
});

app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/{yourfile}.phtml

<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

Info: don't forget to :

clean the cache
clean var/view_preprocessed content
clean pub/static content
deploy the static content = php bin/magento setup:static-content:deploy -f

Related Solutions

Magento – jQuery event listeners working most of the time but not sometimes

You have to set jQuery dependency for your custom script. You have occurance of problem because of dependency issue.

For Module/Extension Level

You can set at module/extension level dependency like below,

app/code/Packagename/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider"
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        }
    }
};

Add slider.js inside path, app/code/Packagename/Modulename/view/frontend/web/js/slider.js

You can use in any template file like this,

<script>
    require(["jquery","slider"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

Theme Level

If you want to apply require js changes at theme level, Go to theme module,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/requirejs-config.js

Set your theme required js file in requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider",
            'customjsfile': "Packagename_Modulename/js/customjsfile",
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        },
        'customjsfile':{
            deps: ['jquery']
        }
    }
};

Add your js file inside web folder of theme,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/slider.js
app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/customjsfile.js

In your template file,

<script>
    require(["jquery","slider","customjsfile"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

For your case,

Keep below config in requirejs-config.js file,

var config = {
    paths: {            
            'footerContact': 'Module_Contact/js/contact'
        },   
    shim: {
        'footerContact': {
            deps: ['jquery']
        }
    }
};

Inside phtml file,

<script>
  require(["jquery","footerContact"],function($)(){
    jquery('.element').on('click', function(event) {
        console.log('logging');
    });
  });
</script>

Magento – Popper Bootstrap 4 Require-js

I had the same problem and just solved it by re-attaching Popper to the global scope and nesting the bootstrap dependency in my javascript.

app.js

require(['jquery', 'popper'], function($, Popper) {
    window.Popper = Popper; // re-attach to global scope
    require(['bootstrap'], function() {
        $(function() {
            // This function is needed (even if empty) to force RequireJS to load Twitter Bootstrap and its Data API.
            // You can make calls to bootstrap functions here.
        });
    });
});

I'm requiring a little different so I'll attach these just in case.

requirejs-config.js

var config = {
    paths: {
        'popper': 'js/popper',
        'bootstrap': 'js/bootstrap'
    },
    shim: {
        'popper': {
            'deps': ['jquery'],
            'exports': 'Popper'
        },
        'bootstrap': {
            'deps': ['jquery', 'popper']
        }
    }
};

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <css src="css/app.css" />
        <script src="js/app.js" type="text/javascript" />
    </head>

</page>

Best Answer

Related Solutions

Magento – jQuery event listeners working most of the time but not sometimes

Magento – Popper Bootstrap 4 Require-js

Related Topic