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 '19 at 9:49
  • You can check this link, it can help magento.stackexchange.com/questions/60276/… – surbhi agr May 22 '19 at 9:50
  • where you can override shipping.js ? in module or theme? – Savan Patel May 22 '19 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 '19 at 10:09
  • @Pratikojha Try to do Below Answer – Savan Patel May 22 '19 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 '19 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 '19 at 10:11
  • Yes, The same way you can override html. – Jignesh Khunt May 22 '19 at 10:13
  • I have updated code for you. – Jignesh Khunt May 22 '19 at 10:17
  • not working bro – Pratik ojha May 22 '19 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.