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'
    }
};
  • Location of requirejs-config.js file ? – Savan Patel May 22 at 9:49
  • You can check this link, it can help magento.stackexchange.com/questions/60276/… – surbhi agr May 22 at 9:50
  • where you can override shipping.js ? in module or theme? – Savan Patel May 22 at 9:53
  • @SavanPatel I want to override shipping.js file in my custom module. location is VendorName/Namespace/view/frontend/requirejs-config.js – Pratik ojha May 22 at 10:09
  • @Pratikojha Try to do Below Answer – Savan Patel May 22 at 10:33
1

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.

1

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'
      }
};
1

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

  • in this how to override shipping.js file – Pratik ojha May 22 at 10:33
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"
            }
        }
    };
  • i want to override both html and js will it work? – Pratik ojha May 22 at 10:11
  • Yes, The same way you can override html. – Jignesh Khunt May 22 at 10:13
  • I have updated code for you. – Jignesh Khunt May 22 at 10:17
  • not working bro – Pratik ojha May 22 at 10:20

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.