2

override both shipping.html and shipping.js

I am trying to override shipping.js file in magento 2 but can not working.

requirejs-config.js

var config = {
paths: {
    'Magento_Checkout/template/shipping': 'VendorName_Namespace/template/shipping',
    'Magento_Checkout/js/shipping': 'VendorName_Namespace/js/shipping'
    }
};
8
  • Location of requirejs-config.js file ? Commented May 22, 2019 at 9:49
  • You can check this link, it can help magento.stackexchange.com/questions/60276/…
    – surbhi agr
    Commented May 22, 2019 at 9:50
  • where you can override shipping.js ? in module or theme? Commented May 22, 2019 at 9:53
  • @SavanPatel I want to override shipping.js file in my custom module. location is VendorName/Namespace/view/frontend/requirejs-config.js Commented May 22, 2019 at 10:09
  • @Pratikojha Try to do Below Answer Commented May 22, 2019 at 10:33

4 Answers 4

6

Try to use mixin:

app/code/SR/Checkout/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'SR_Checkout/js/mixin/shipping-mixin': true
            }
        }
    }
};

app/code/SR/Checkout/view/frontend/web/js/mixin/shipping-mixin.js

define(
    [
        'jquery',
        'ko'
    ], function (
        $,
        ko
    ) {
        'use strict';

        return function (target) {
            return target.extend({
                /**
                 * Show address form popup
                 */
                showFormPopUp: function () {

                    this._super();
                }
            });
        }
    }
);

Clear browser js cache, remove pub/static if your magento mode is not developer. Clear cache.

3

I got the solution of my question.

How to override both shipping.html and shipping.js.

requirejs-config.js

var config = {
    paths: {
         'Magento_Checkout/template/shipping': 'VendorName_Namespace/template/shipping',
         'Magento_Checkout/js/view/shipping': 'VendorName_Namespace/js/view/shipping'
      }
};
0

You can override using map and the shipping js is inside js/view directory:

    var config = {
        map: {
            '*': {
                "Magento_Checkout/template/shipping.html": "VendorName_Namespace/template/shipping.html",
                "Magento_Checkout/js/view/shipping": "VendorName_Namespace/js/shipping"
            }
        }
    };
4
  • i want to override both html and js will it work? Commented May 22, 2019 at 10:11
  • Yes, The same way you can override html. Commented May 22, 2019 at 10:13
  • I have updated code for you. Commented May 22, 2019 at 10:17
  • not working bro Commented May 22, 2019 at 10:20
0

Try following code:

  1. app/code/[VendorName]/[ModuleName]/view/frontend/requirejs-config.js
    var config = {
paths: {
    'Magento_Checkout/template/shipping': '[VendorName]_[ModuleName]/template/shipping',
    'Magento_Checkout/js/view/shipping': {
                        '[VendorName]_[ModuleName]/js/view/shipping'
    }
};

2.app/code/[VendorName]/[ModuleName]/view/frontend/web/js/view/shipping.js

3.app/code/[VendorName]/[ModuleName]/view/frontend/web/template/shipping.html

After run the upgrade and static-conent:deploy

1
  • in this how to override shipping.js file Commented May 22, 2019 at 10:33

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.