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?

Answer 1

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

• Idham Choudry: 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
• Ryre: You only need to define the sources you're using, not every single one shipping is using.

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

• Asad Khan: 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/…

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.