Override Magento 2 core JS file Without affecting core functionilties

Question 1

I'm trying to override

module-sales/view/adminhtml/web/order/create/scripts.js file.

Added the custom js file in my requirejs-config.js file. But the issue is, What all changes I made to in custom script.js file is reflecting in Magento core functionalities also, For example in order page. I need to reflect the changes in my custom module pages only. How to make it possible?

Please, can anyone help?

Question 2

Did u get any solution for this?

Question 3

@mani No. Im checking

Question 4

You have to add custom.js file in your module layout xml file like this:

<head>
 <script src=path/cutom.js"/>
</head>

And put only that which you needed for that module only other code move to default custom.js.

Question 5

I tried editing and overriding this file but was not able to find a proper way. As a workaround I created my extra functionality in another prototype object and called it inside a phtml defined in the sales_order_create_index layout file.

example:

Namespace/Module/view/adminhtml/web/js/customscript.js

define([
 "jquery",
 "Magento_Ui/js/modal/modal",
 "mage/loader",
 "mage/translate",
 "prototype",
], function (jQuery, modal,loader) {
 window.addProduct = Class.create();
 addProduct.prototype = {
 //Custom code
 initialize: function () {
 //Code to run on Object Initialisation
 },
 setPopUpContainer: function (trigger) {
 //Code to pull up a modal 
 },
 reloadAreas: function () {
 // this accesses the order object from the scripts.js file and reloads the various areas in the page
 order.loadArea(['items', 'shipping_method', 'totals', 'billing_method'], true);
 }
 };
});

Namespace/Module/view/adminhtml/templates/custom-js.phtml

<script>
 require(["jquery", "prototype", "Magento_Sales/order/create/form", "Namespace_Module/js/customscript"], function ($) {
 window.CustomAddProduct = new addProduct();
 });
</script>

Namespace/Module/view/adminhtml/layout/

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body> 
 <referenceContainer name="js"> 
 <block class="Namespace\Module\Block\Adminhtml\CustomBlock" template="Namespace_Module::custom-js.phtml" name="customblockname"/>
 </referenceContainer>
 </body>
</page>

Question 6

Hello Rohan, did you add require-config.js for that customscript.js? or add that script in head tag using <link src="vendor_Module::js/customscript.js" />

Mukesh Prajapati 1,89515 silver badges22 bronze badges · Answer 1 · 2017-11-30 08:14:41Z

You have to add custom.js file in your module layout xml file like this:

<head>
 <script src=path/cutom.js"/>
</head>

And put only that which you needed for that module only other code move to default custom.js.

NathanielR 3651 silver badge10 bronze badges · Answer 2 · 2017-11-30 08:15:11Z

I tried editing and overriding this file but was not able to find a proper way. As a workaround I created my extra functionality in another prototype object and called it inside a phtml defined in the sales_order_create_index layout file.

example:

Namespace/Module/view/adminhtml/web/js/customscript.js

define([
 "jquery",
 "Magento_Ui/js/modal/modal",
 "mage/loader",
 "mage/translate",
 "prototype",
], function (jQuery, modal,loader) {
 window.addProduct = Class.create();
 addProduct.prototype = {
 //Custom code
 initialize: function () {
 //Code to run on Object Initialisation
 },
 setPopUpContainer: function (trigger) {
 //Code to pull up a modal 
 },
 reloadAreas: function () {
 // this accesses the order object from the scripts.js file and reloads the various areas in the page
 order.loadArea(['items', 'shipping_method', 'totals', 'billing_method'], true);
 }
 };
});

Namespace/Module/view/adminhtml/templates/custom-js.phtml

<script>
 require(["jquery", "prototype", "Magento_Sales/order/create/form", "Namespace_Module/js/customscript"], function ($) {
 window.CustomAddProduct = new addProduct();
 });
</script>

Namespace/Module/view/adminhtml/layout/

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body> 
 <referenceContainer name="js"> 
 <block class="Namespace\Module\Block\Adminhtml\CustomBlock" template="Namespace_Module::custom-js.phtml" name="customblockname"/>
 </referenceContainer>
 </body>
</page>

Hello Rohan, did you add require-config.js for that customscript.js? or add that script in head tag using <link src="vendor_Module::js/customscript.js" />

Stack Exchange Network

Override Magento 2 core JS file Without affecting core functionilties

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Override Magento 2 core JS file Without affecting core functionilties

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions