6

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!

18

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

  • 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 – Idham Choudry Jan 25 '17 at 8:28
  • You only need to define the sources you're using, not every single one shipping is using. – Ryre Feb 19 at 21:38
2

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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