Solved: Add Js into my head

jrouzot1998896 · ‎04-02-2020

Hello,

I start with Magento 2, it's really different of magento 1...

I have a JS folder (uni.js), and i want put this folder into my <head>

On magento 1, i had the skin folder... But on magento 2, i really don't know.

I put my js into a custom module in app/code/Motion/Catalog/view/frontend/web/js/uni.js

And in my back-office i add '<script type="text/javascript" src="Motion_Catalog::js/uni.js"></script>' into content > Configuration > my theme > HTML HEAD

What's wrong ? There is an other solution ?

Sorry for my english

Thank you !

Sanjay Jethva · ‎04-02-2020

Hello @jrouzot1998896

Please follow the below two methods for the solution:

For Frontend:

Method to Add JS File in Frontend for All Pages in Magento 2:

Create default.xml at app\code\[Vendor]\[Module]\view\frontend\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <link src="[Vendor]_[Module]::js/js_fileName.js"/>
    </head>
</page>

Create or place the JS file at app\code\[Vendor]\[Module]\view\frontend\web\js\js_fileName.js
Run setup upgrade and setup:static-content:deploy command

For Backend:

Steps to Add Custom JS File in Magento 2 Admin Panel:

Create app/code/Vendor/Module/view/adminhtml/requirejs-config.js file with the following code:

var config = {
    paths: {
        'js-file-alias': 'Vendor_Module/js/js-file-name'
    },
    shim: {
        'js-file-alias': {
            deps: ['jquery']
        }
    }
};

Upload the JavaScript file at app/code/Vendor/Module/view/adminhtml/web/js/

Put the following code in your .phtml file to load the JavaScript file:

<script>
    requirejs(['jquery', 'js-file-alias'], function($){
        // Your Code
    });
</script>

Run the following commands:

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

That's it.

I hope it helps.

Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.

View solution in original post

Sanjay Jethva · ‎04-02-2020

Hello @jrouzot1998896

Please follow the below two methods for the solution:

For Frontend:

Method to Add JS File in Frontend for All Pages in Magento 2:

Create default.xml at app\code\[Vendor]\[Module]\view\frontend\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <link src="[Vendor]_[Module]::js/js_fileName.js"/>
    </head>
</page>

Create or place the JS file at app\code\[Vendor]\[Module]\view\frontend\web\js\js_fileName.js
Run setup upgrade and setup:static-content:deploy command

For Backend:

Steps to Add Custom JS File in Magento 2 Admin Panel:

Create app/code/Vendor/Module/view/adminhtml/requirejs-config.js file with the following code:

var config = {
    paths: {
        'js-file-alias': 'Vendor_Module/js/js-file-name'
    },
    shim: {
        'js-file-alias': {
            deps: ['jquery']
        }
    }
};

Upload the JavaScript file at app/code/Vendor/Module/view/adminhtml/web/js/

Put the following code in your .phtml file to load the JavaScript file:

<script>
    requirejs(['jquery', 'js-file-alias'], function($){
        // Your Code
    });
</script>

Run the following commands:

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

That's it.

I hope it helps.

Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.

dazai_dolbac · ‎04-03-2020

Hello @Sanjay Jethva

Thank for your answer =)

I followed your instructions for the front.
I created:

App/Code/Motion/Uni/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Motion_Uni::js/uni.js"/>
    </head>
</page>

App/Code/Motion/Uni/view/frontend/web/js/uni.js

Then I did both magento commands, but I still don't see my script on the front after all that...(uni.js) in the head of https://www.tid-inox.com/

What's problem in my process

Thank you

Sanjay Jethva · ‎04-03-2020

Hello again, @dazai_dolbac

If you create own custom module 'Motion_Uni' then refer this
https://meetanshi.com/blog/magento-2-module-development/

Also, your js is merged and it look like this
https://www.tid-inox.com/static/version1585902830/_cache/merged/b11d898eb25102ea5b24b42a97fbbdd9.min...

Please check your js code in this merge file or do unmerge js file and check.

Hope it helps.

Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.

dazai_dolbac · ‎04-03-2020

Really thank you for your answer

I swap my code into an other module (already here)

It's working,

Thank you Sanjay !

Sanjay Jethva · ‎04-03-2020

Hey @dazai_dolbac

If the answer was helpful to you, please mark it as a solution so that it could be helpful for other members too.

Thank you.

Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.

jrouzot1998896 · ‎04-03-2020

Yes sorry, i wasn't with the good account

tarek_fellah · ‎03-09-2022

Hello

@Sanjay Jethva

For admin js, the name of js file should be js-file-name.js on app/code/Vendor/Module/view/adminhtml/web/js/ ?

Thanks.

nitishrajcea6c · ‎03-12-2022

you can go through this link

https://dolphinwebsolution.com/how-to-include-add-custom-js-in-magento-2

Add Js into my head

Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head

Re: Add Js into my head