How to add custom js file in Magento 2 in custom theme without use module

Question 1

I used custom theme in magento 2. I want to add custom js file for navigation in magento 2 but js file not work.

I add js link in default_head_block.xml but a js doesn't work.

<link src="js/menu.js"/>

Question 2

Don't do this, man. Use Magento devdocs devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/…. if you include scripts in this way - you will have a lot of problems.

Question 3

@Gagan, could you please tell me how you succeeded in accomplishing this?

Question 4

create the file /app/design/frontend/Vendor/customtheme/Magento_Theme/layout/default_head_blocks.xml

assume you are trying to add bootstrap.js

File : default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <!--Include js From CDN-->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
 <!--Include js From Custom module app/code/Company/Module/view/frontend/web/js-->
 <script src="Company_Module::js/bootstrap.min.js"/> 
 </head>
</page>

Please remove static files and flush magento cache

Question 5

I want to add this script <script src="code.jquery.com/jquery-3.3.1.min.js"></script>

Question 6

please update default_head_blocks.xml with <script src="code.jquery.com/jquery-3.3.1.min.js" src_type="url" />

Question 7

Goto your default.xml to the below location:

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

And add the below code:

<?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>
 <script src="Magento_Theme::js/custom.js"/>
 </head>
</page>

Now place your custom.js under below location:

app/design/frontend/Vendor/theme/Magento_Theme/web/js/custom.js

Now you can add your to the js file as you want.

Question 8

<?xml version="1.0"?> <page xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="Magento_Theme::js/menu.js"/> </head> </page> Add js file but js file not loaded

Question 9

Did you flush the cache? Also you need to run static-content:deploy as well.

Question 10

@Sukumar Gorai, could you please have a look at my post regarding the similar task with slightly varying requirement at magento.stackexchange.com/questions/312387/…

Question 11

The best way to add a JS in Magento (theme or module) 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

Question 12

what if I need to place the javascript url in the header of my Magento site?

Question 13

could you please tell me if I can also use your method if I have placed the custom js file in a directory media/pmm-custom?

Question 14

I don't want to keep my custom file here in app/design/frontend/{Vendor}/{theme}/web/js/.

Pritam Biswas 2,6421 gold badge10 silver badges11 bronze badges · Answer 1 · 2018-12-06 09:36:40Z

create the file /app/design/frontend/Vendor/customtheme/Magento_Theme/layout/default_head_blocks.xml

assume you are trying to add bootstrap.js

File : default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <!--Include js From CDN-->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
 <!--Include js From Custom module app/code/Company/Module/view/frontend/web/js-->
 <script src="Company_Module::js/bootstrap.min.js"/> 
 </head>
</page>

Please remove static files and flush magento cache

I want to add this script <script src="code.jquery.com/jquery-3.3.1.min.js"></script>
please update default_head_blocks.xml with <script src="code.jquery.com/jquery-3.3.1.min.js" src_type="url" />

Sukumar Gorai 11k4 gold badges20 silver badges47 bronze badges · Answer 2 · 2018-12-06 09:29:47Z

Goto your default.xml to the below location:

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

And add the below code:

<?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>
 <script src="Magento_Theme::js/custom.js"/>
 </head>
</page>

Now place your custom.js under below location:

app/design/frontend/Vendor/theme/Magento_Theme/web/js/custom.js

Now you can add your to the js file as you want.

<?xml version="1.0"?> <page xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="Magento_Theme::js/menu.js"/> </head> </page> Add js file but js file not loaded
Did you flush the cache? Also you need to run static-content:deploy as well.
@Sukumar Gorai, could you please have a look at my post regarding the similar task with slightly varying requirement at magento.stackexchange.com/questions/312387/…

PЯINCƎ ♦ 11.8k3 gold badges27 silver badges85 bronze badges · Answer 3 · 2018-12-06 10:00:09Z

The best way to add a JS in Magento (theme or module) 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

what if I need to place the javascript url in the header of my Magento site?
could you please tell me if I can also use your method if I have placed the custom js file in a directory media/pmm-custom?
I don't want to keep my custom file here in app/design/frontend/{Vendor}/{theme}/web/js/.

Stack Exchange Network

How to add custom js file in Magento 2 in custom theme without use module

3 Answers 3

To add a js in theme via `Requirejs`:

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

How to add custom js file in Magento 2 in custom theme without use module

3 Answers 3

To add a js in theme via Requirejs:

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions

To add a js in theme via `Requirejs`: