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 Commented 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
    Commented 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
  • can you please help me Sir with this scenario??? I used your requirejs-config.js file and I copied all the code of shipping.js file but on checkout page it returns me blank page... magento.stackexchange.com/questions/293270/…
    – Asad Khan
    Commented Oct 21, 2019 at 11:56
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.