{"id":595,"date":"2019-09-13T12:01:01","date_gmt":"2019-09-13T12:01:01","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/09\/13\/override-js-file-in-magento-2\/"},"modified":"2025-06-16T14:42:20","modified_gmt":"2025-06-16T09:12:20","slug":"override-js-file-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/override-js-file-in-magento-2\/","title":{"rendered":"How to Override JS File in Magento 2"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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<\/a>.<\/p>\n\n\n\n

Method to Override JS File in Magento 2:<\/h2>\n\n\n\n

1. Create registration.php<\/strong> file in app\\code\\[Vendor]\\[Namespace]\\<\/strong><\/strong><\/p>\n\n\n\n

    \n
  1. <\/li>\n<\/ol>\n\n\n\n
    <?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE, '[Vendor]_[Namespace]', __DIR__);<\/pre>\n\n\n\n
    2. Create module.xml<\/strong> file in app\\code\\[Vendor]\\[Namespace]\\etc<\/strong><\/strong><\/p>\n\n\n\n
    <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"[Vendor]_[Namespace]\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
    3. Create requirejs-config.js<\/strong> file in app\\code\\[Vendor]\\[Namespace]\\view\\frontend<\/strong><\/strong><\/p>\n\n\n\n
    var config = \n{\n    map: \n    {\n        '*': \n        {\n            'Magento_Checkout\/js\/action\/place-order':'[Vendor]_[Namespace]\/js\/action\/place-order'\n        }\n    }\n};<\/pre>\n\n\n\n
    That\u2019s all.<\/p>\n\n\n\n
    The developers may, require to use custom JavaScript for additional features not offered by the default Magento 2. To know how to add custom JS<\/a> you can Read our Blog<\/p>\n\n\n\n
    Feel free to share the solution to extend Magento 2 JS file with fellow developers on social media.<\/p>\n\n\n\n
    Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-595","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/595\/revisions"}],"predecessor-version":[{"id":16903,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/595\/revisions\/16903"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}