cancel
Showing results for 
Search instead for 
Did you mean: 

Add Js into my head

SOLVED

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