Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Magento 2 - Adding Custom JavaScript File to Theme:

‎01-07-2024 05:09 AM
‎01-07-2024 05:09 AM

Magento 2 - Adding Custom JavaScript File to Theme:

I'm working on customizing my Magento 2 theme, and I need to add a custom JavaScript file to enhance certain front-end functionalities. I've tried a few methods, including modifying the JS file and placing the JS file in the correct theme directory, but it doesn't seem to be loading. Are there any steps I might be missing, or is there a recommended way to include custom JS files in Magento 2 themes to my client site Apkinstal?

Any insights or guidance would be greatly appreciated!

Labels:
0 Kudos
Reply
6 REPLIES 6
‎05-24-2024 07:38 AM
‎05-24-2024 07:38 AM

Re: Magento 2 - Adding Custom JavaScript File to Theme:

Hello @hiratareen61d5 

 

Add JS to your theme you have several possibilities.

 

By utilizing default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/:

 

<?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="js/sample.js"/>
    </head>
</page>

And Create js file in app/design/frontend/Vendor/Theme/web/js/:

 

require(['jquery', 'jquery/ui'], function ($) {

"use strict";

$(document).ready(function($){

console.log("JS Called.");

});

});

 

Hope it helps !

If you find our reply helpful, please give us kudos.

 

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

 

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

 

Thank You,


WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

0 Kudos
Reply
‎05-29-2024 06:35 AM
‎05-29-2024 06:35 AM

Re: Magento 2 - Adding Custom JavaScript File to Theme:

@hiratareen61d5 

Hey,

- add js in head block in your theme layout file
<?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.js"/>
    </head>
</page>

- using requirejs-config.js
var config = {
     paths: {
        "customJs": 'Magento_Theme/js/custom-js'
     }
}

customJs object can be used to add custom js in any other js file

- in phtml file
you can use script tag to import js direct or you can add script by following way
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Theme/js/custom-js": {} // use your custom config data to fetch in javascript file
        }
    }
</script>
Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.
0 Kudos
Reply
‎03-04-2025 02:06 AM
‎03-04-2025 02:06 AM

Re: Magento 2 - Adding Custom JavaScript File to Theme:

 

It sounds like you're on the right track with adding your custom JavaScript file, but Magento 2 can be a bit tricky when it comes to loading JS properly in a Magento theme. Make sure you've placed the JS file inside your theme directory under web/js/, and then include it in requirejs-config.js or reference it in your layout XML file like:

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

Also, clear the cache and run setup:static-content:deploy to ensure the changes take effect. If it's still not loading, check the browser console for errors.

Avid learner and technical marketer at devrims.com
0 Kudos
Reply
‎03-06-2025 08:45 AM
‎03-06-2025 08:45 AM

Re: Magento 2 - Adding Custom JavaScript File to Theme:

Make sure you’ve added your JS file in requirejs-config.js and cleared the cache. Also, check if the file is correctly placed under web/js/ in your theme directory. Sometimes, running bin/magento setup:static-content:deploy Cookout helps if changes aren’t reflecting. Have you checked the browser console for errors.

0 Kudos
Reply
‎03-31-2025 08:10 PM
‎03-31-2025 08:10 PM

Re: Magento 2 - Adding Custom JavaScript File to Theme:

Great question! When adding custom JavaScript to Magento 2, there are a few steps to ensure it's properly loaded. First, make sure you’ve added your JS file in the web/js directory of your custom theme. Then, you need to reference it in your requirejs-config.js file. You can also use the default.xml layout file to include the JS by adding a <script> tag.

here is want to ask a question if I want to customize the https://cookoutsmenu.com/cookout-nutrition/ , should I use custom JavaScript to improve user interaction, such as showing different menu items based on location or device? This could enhance the user experience and make the website more responsive.

0 Kudos
Reply
a week ago
a week ago

Re: Magento 2 - Adding Custom JavaScript File to Theme:

Great review! For those with restrictions, it's crucial to know what's in your meal. I compiled a detailed list where you can view Cook Out allergens to help make safer choices.

0 Kudos
Reply