How to Override JS File in Magento 2

Sonal Motghare-Balpande
Published: Mar 14, 2022 | Updated: Jul 12, 2023
Magento 2

How to Override JS File in Magento 2

In this article, we are learning the way of overriding the Js files in Magneto2. Magento 2 provides a solid mechanism to inject the custom JavaScript file in our themes and modules. We can inject the custom JavaScript file using requires js. Many times while developing the store we need to change the little bit part of core JavaScript file to fulfil the client need. As we all know we can not change the core file. We must override the core file.

In this post, we will see how to override core JavaScript file in Magento 2 using different methods:-

- Using Custom Theme
- Using Custom Module

We can Override Core Javascript file in Magento 2 using a custom theme or custom module.

We will first see how to override core Javascript file in Magento 2 using a custom theme.

Override Javascript File Using Custom theme in Magento2

Themes are a good option when you want to quickly override the javascript file in Magento 2.

Requirement: – Suppose we have to override the checkout-data-resolve.js file.

First, we have to identify from which module the JavaScript file is rendering. This file is rendering from the Checkout module.

Then, Create the Magento_Checkout directory under app/design/frontend/Vendor/Theme path. After creating module directory follow the core Javascript directory structure. so create directory web/js/model Under Magento_Checkout directory and copy the file checkout-data-resolve.js from vendor/magento/module-checkout/view/frontend/web/js/model directory and paste into this directory.

In short copy the file from vendor/magento/module-checkout/view/frontend/web/js/model directory and paste it under app/design/frontend/Vendor/Theme/Magento_Checkout/web/js/model directory. The basic idea is to follow the core Javascript file structure and copy the file in our theme folder.

Override Javascript File Using Custom Module in Magento2

Custom module is a great way to extend the functionality of Magento store. When you want particular functionality to implement for one specific store you can go with the custom theme to override the file. But if you want to reuse the code in different Magento stores then you should go with the custom module to override the core JavaScript file.

Step 1: Create a custom module with requirejs-config.js file under app/code/Vendor/Module/view/frontend/ directory and add below code

var config = {
   map: {
     '*': {
      'Magento_Checkout/js/model/checkout-data-resolver': 'Vendor_Module/js/model/checkout-data-resolver'
    }
}};

Step 2: Copy the file checkout-data-resolver.js from vendor/magento/module-checkout/view/frontend/web/js/model directory and paste is under app/code/Vendor/Module/view/frontend/web/js/model directory

Step 3: Add your code in app/code/Vendor/Module/view/frontend/web/js/model/checkout-data-resolver.js file.

Step 4:

Remove all the folders present in pub/static/frontend/
Remove all the folders present in var/view_preprocessed/pub/static/frontend/
run below commands

php bin/magento se:s:d -f && php bin/magento c:f

That’s it.

Conclusion

We have seen two different way to override core JavaScript file in Magento 2. As a Magento 2 developer one should follow the second approach using a custom module to override the core JavaScript file in Magento 2.

Comments (1)

Sonal Motghare-Balpande

About Sonal Motghare-Balpande Sonal Motghare-Balpande is an eCommerce technology professional with 14+ years of experience working with Magento, PHP and eCommerce platforms. Over the years, she has worked on real-world eCommerce stores, helping businesses and development teams solve technical problems, improve performance, upgrade and maintain Magento stores, and make practical technology decisions. Through TheCoachSMB, Sonal shares what she has learned from working on real eCommerce projects — from Magento development and troubleshooting to performance, SEO, architecture, upgrades and day-to-day technical challenges. Her approach is practical and experience-driven: Learn the technology. Understand the problem. Make the right decision. The goal is simple: make complex eCommerce technology easier to understand and help developers and eCommerce professionals avoid costly technical mistakes. Have a question about Magento or eCommerce? If you're working through a Magento problem, learning eCommerce development, or trying to make an important technology decision, Ask Sonal. Connect with Sonal WhatsApp: +91 702-050-0374 Email: support@thecoachsmb.com

How to Override JS File in Magento 2

How to Override JS File in Magento 2

Sonal Motghare-Balpande

One thought on “How to Override JS File in Magento 2”

Leave a Reply Cancel reply

How to Override JS File in Magento 2

How to Override JS File in Magento 2

Related Posts:

Sonal Motghare-Balpande

One thought on “How to Override JS File in Magento 2”

Leave a Reply Cancel reply