How To Override Javascript Files In Magento 2

Sometimes you want to modify Magento JS files. But you can’t modify directly in Magento source code. So you should override Magento JS. The following steps will show you how to override Magento Js files in Magento 2.

Override Javascript files in custom module

 

Step 1:

 

For example, If you want to override /Magento_Checkout/js/model/shipping-save-processor/default/ Magento 2 Javascript file in your own custom module

 

Create Requires configuration file requirejs-config.js

 


var config = {
     map: {
         '*' : {
             "Magento_Checkout/js/model/shipping-save-processor/default" :
                   "Magepow_Overridejs/js/shipping-save-processor-default-override"
         }
     }
};

Step 2:

 

Add shipping-save-processor-default-override.js file under /app/code/Magepow/Overridejs/view/frontend/web/js/ folder with following content:

 


/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

            if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
                selectBillingAddressAction(quote.shippingAddress());
            }

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});

Step 3:

Now install the custom module and refresh Magento cache

 

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento cache:flush

Override Javascript files in the theme

With the theme, everything becomes simpler

 

Add default.js file under /app/design/frontend/Your_theme/Magento_Checkout/web/js/model/shipping-save-processor/

 

And now, you can customize this file. Hope this article will help you in some way.