8

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?

3 Answers 3

21

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

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

var config = {
      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

2
  • frontend/Magento/luma/en_US/Namespace_Module/js/view/shipping.js 404 (Not Found) req.load @ require.js:1895 load @ require.js:1639 load @ require.js:820 fetch @ require.js:810 check @ require.js:840 enable @ require.js:1143 enable @ require.js:1511 (anonymous) @ require.js:1128 (anonymous) @ require.js:132 each @ require.js:57 enable @ require.js:1090 init @ require.js:774 (anonymous) @ require.js:1416 Jan 25, 2017 at 8:28
  • 1
    You only need to define the sources you're using, not every single one shipping is using.
    – Ryre
    Feb 19, 2019 at 21:38
4

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

1
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.