How to Override JS File in Magento 2
By Sanjay Jethva|
It is strongly recommended not to change the source code of default Magento components including JS files. However, owing to the business requirements you are bound to go out of the way and override the default function.
Here, I have posted the code to override JS file in Magento 2. You may use this code when you want to extend the default JS file to extend a default Magento 2 feature! For example: you can also use the JS file to update total in Magento 2.
Method to Override JS File in Magento 2:
- Create registration.php file in app\code\[Vendor]\[Namespace]\
12<?php\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE, '[Vendor]_[Namespace]', __DIR__); - Create module.xml file in app\code\[Vendor]\[Namespace]\etc
12345<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"><module name="[Vendor]_[Namespace]" setup_version="1.0.0"/></config> - Create requirejs-config.js file in app\code\[Vendor]\[Namespace]\view\frontend
12345678910var config ={map:{'*':{'Magento_Checkout/js/action/place-order':'[Vendor]_[Namespace]/js/action/place-order'}}};
That’s all.
Any doubts? Do mention them in the Comments section below. I’d be glad to solve them asap.
Feel free to share the solution to extend Magento 2 JS file with fellow developers on social media.
Thank you.
Still need help? Hire our Adobe-certified Magento experts.
×
5
(based on 22 Reviews)
12 Comments
I have followed same steps but it not working for me.
I am overriding configurable js in theme / module it not working for me.
even i am changing in static folder in that js , front end not showing latest changes in that file.
can you please help me on this.
thanks.
Hey Hemendra,
Please do check if there is any CDN,
or else make sure you have executed the commands after override js.
Hi Sanjay,
How can we override core js function, not whole js file
Hey Asma,
You can do this by js mixin concept,
You may please checkout the below given reference,
Reference : https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_mixins.html
What about Step 4? Where does the actual new file go?
– [Vendor]_[Namespace]/js/action/place-order?
– [Vendor]_[Namespace]/view/frontend/js/action/place-order?
– [Vendor]_[Namespace]/view/frontend/web/js/action/place-order?
I’ve followed this example in my own app/code/Vendor/Namespace folder trying to override the customer-date.js file in the magento/module-customer/view/frontend/web/js/ folder, but it doesn’t appear to be overriding the original file.
Thanks for posting this!
Hello Tom,
Third path is the correct one
app\code\[Vendor]\[Namespace]\view\frontend\web\js\action\place-order.js
Thank You
I have tried to override an existing override, is it possible? i have made all the steps and magento are using the first override and not my override. this is my code
var config = {
map: {
‘*’: {
“Omnipro_StorePickup/js/view/checkout/shipping/store-selector”: “Mavi_FiltrosCheckout/js/view/checkout/shipping/store-selector”
}
}
};
Hello,
No, you can not override JS that’s overrided already for once.
Thank You.
I have created same structure which is there in 3 rd party system into my custom module i have Done with required JS
But still the 3 rd party module js only loading i have tried with RM static/fronted
Please help me to achieve this ASAP
var config =
{
map:
{
‘*’:
{
//”main”: “Nits_EventLayout/view/base/web/js/lib/fullcalendar/daygrid/main”,
‘Aheadworks_EventTickets/js/lib/fullcalendar/daygrid/main’:’Nits_EventLayout/js/lib/fullcalendar/daygrid/main’
//’Aheadworks_EventTickets/js/lib/fullcalendar/daygrid/main’:’Nits_EventLayout/view/base/web/js/lib/fullcalendar/daygrid/main’
}
}
};
Hello,
Please run the setup upgrade and deploy command once and check again.
Thank You.
Thanks for sharing such an amazing article, really informative.
Thank you very much!