Magento2 - Override Magento/Checkout/view/frontend/web/js/view/shipping.js

Question

How can we override Magento/Checkout/view/frontend/web/js/view/shipping.js file?

I need to add some custom code to selectShippingMethod function so i can hide/show a block if a specific shipping method is selected.

Is there a better way to do this?

Thank you!

Answer 1

Just found a way to override that function using 'mixins'.

On requirejs-config.js file I had to add:

  config: {
            mixins: {
                'Magento_Checkout/js/view/shipping': {
                    'Mynamespace_Mymodule/js/view/shipping': true
                }
            }
        }

Create a file Mynamespace/Mymodule/view/frontend/web/js/view/shipping.js

define(
    [
        'jquery',
        'underscore',
        'Magento_Ui/js/form/form',
        'ko',
        'Magento_Customer/js/model/customer',
        'Magento_Customer/js/model/address-list',
        'Magento_Checkout/js/model/address-converter',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/action/create-shipping-address',
        'Magento_Checkout/js/action/select-shipping-address',
        'Magento_Checkout/js/model/shipping-rates-validator',
        'Magento_Checkout/js/model/shipping-address/form-popup-state',
        'Magento_Checkout/js/model/shipping-service',
        'Magento_Checkout/js/action/select-shipping-method',
        'Magento_Checkout/js/model/shipping-rate-registry',
        'Magento_Checkout/js/action/set-shipping-information',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Ui/js/modal/modal',
        'Magento_Checkout/js/model/checkout-data-resolver',
        'Magento_Checkout/js/checkout-data',
        'uiRegistry',
        'mage/translate',
        'Magento_Checkout/js/model/shipping-rate-service'
    ],function (
        $,
        _,
        Component,
        ko,
        customer,
        addressList,
        addressConverter,
        quote,
        createShippingAddress,
        selectShippingAddress,
        shippingRatesValidator,
        formPopUpState,
        shippingService,
        selectShippingMethodAction,
        rateRegistry,
        setShippingInformationAction,
        stepNavigator,
        modal,
        checkoutDataResolver,
        checkoutData,
        registry,
        $t) {
    'use strict';

    var mixin = {

        selectShippingMethod: function (shippingMethod) {
            console.log("method overriden");
            selectShippingMethodAction(shippingMethod);
            checkoutData.setSelectedShippingRate(shippingMethod.carrier_code + '_' + shippingMethod.method_code);

            return true;
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../default returns.
    return target.extend(mixin); // new result that all other modules receive 
};
});

Helpful info:

https://github.com/magento/magento2/issues/1864 Magento2 - Override Magento/Checkout/view/frontend/web/js/view/shipping.js

Answer 2

Just in case the requirejs-config.js file should look like this:

var config = {
     config:
       {
         mixins:
           {'Magento_Checkout/js/view/shipping':
               {'Namespace_Module/js/view/shipping': true }
           }
       }
   };

This worked for me

Answer 3

You can override core module js by using custom theme.

You have to copy js file from

Magento/Checkout/view/frontend/web/js/view/shipping.js

and put it given path

/app/design/frontend/Theme/Packadge/Magento_Checkout/web/js/view/shipping-information.js

modify by your changes in the file.

Run below command for deploy static content

php bin/magento setup:static-content:deploy

Now check your changes and let me know if you have any query.