cancel
Showing results for 
Search instead for 
Did you mean: 

Add Js into my head

SOLVED
   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Add Js into my head

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 Smiley Frustrated 

 

Thank you !

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Add Js into my head

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:

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

For Backend:

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

  1. 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']
            }
        }
    };
  2. Upload the JavaScript file at app/code/Vendor/Module/view/adminhtml/web/js/
  3. Put the following code in your .phtml file to load the JavaScript file:
    <script>
        requirejs(['jquery', 'js-file-alias'], function($){
            // Your Code
        });
    </script>
  4. 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

8 REPLIES 8

Re: Add Js into my head

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:

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

For Backend:

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

  1. 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']
            }
        }
    };
  2. Upload the JavaScript file at app/code/Vendor/Module/view/adminhtml/web/js/
  3. Put the following code in your .phtml file to load the JavaScript file:
    <script>
        requirejs(['jquery', 'js-file-alias'], function($){
            // Your Code
        });
    </script>
  4. 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.

Re: Add Js into my head

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 Smiley Sad 

 

Thank you 

Re: Add Js into my head

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.

Re: Add Js into my head

Really thank you for your answer Smiley Happy 

 

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

It's working, 

 

Thank you Sanjay ! Smiley Happy 

 

 

Re: Add Js into my head

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.

Re: Add Js into my head

Yes sorry, i wasn't with the good account

Re: Add Js into my head

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.

 

Re: Add Js into my head