Magento 2 - How to override Method getShippingMethodTitle in Magento_Checkout/view/frontend/web/js/view/summary/shipping.js

Question

I need to override the method getShippingMethodTitle which is defined in vendor/magento/module-checkout/view/frontend/web/js/view/summary/shipping.js.

The Method gets the shipping method title in the checkout in the summary:

I tried to override it by using a mixing like this:

Company/Shipping/view/frontend/requirejs-config.js:

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

I also tried this:

var config = {
    config: {
        mixins: {
            'Magento_Tax/js/view/checkout/summary/shipping': {
                'Company_Shipping/js/view/summary/shipping-mixin': true
            },
        }
    }
};

Company/Shipping/view/frontend/web/js/view/summary/shipping-mixin.js:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
], function (wrapper, quote) {
    'use strict';

    var mixin = {
        getShippingMethodTitle: function () {
            var shippingMethod = '',
                shippingMethodTitle = '';

            if (!this.isCalculated()) {
                return '';
            }
            shippingMethod = quote.shippingMethod();

            if (typeof shippingMethod['method_title'] !== 'undefined') {
                shippingMethodTitle = ' - ' + shippingMethod['method_title'];
            }

            return shippingMethod ?
                shippingMethod['carrier_title'] + shippingMethodTitle + " foo" :
                shippingMethod['carrier_title'];
        },
    };

    /**
     * Override default getShippingMethodTitle
     */
    return function (target) {
        return wrapper.extend(target, mixin);
    };
});

Attempt 2 - Extend JS Function:

requirejs-config.js

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

shipping-mixin.js:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
], function (wrapper, quote) {
    'use strict';

    return function (getShippingMethodTitle) {
        return wrapper.wrap(getShippingMethodTitle, function (originalGetShippingMethodTitle, config, element) {

            var shippingMethod = '',
                shippingMethodTitle = '';

            if (!this.isCalculated()) {
                return '';
            }
            shippingMethod = quote.shippingMethod();

            if (typeof shippingMethod['method_title'] !== 'undefined') {
                shippingMethodTitle = ' - ' + shippingMethod['method_title'];
            }

            return shippingMethod ?
                shippingMethod['carrier_title'] + shippingMethodTitle + " foo" :
                shippingMethod['carrier_title'];
        });
    };
});

Attempt 3 - Extend JS Object:

requirejs-config.js

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

shipping-mixin.js

define([
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
], function (wrapper, quote) {
    'use strict';

    return function (shipping) {
        shipping.getShippingMethodTitle = wrapper.wrapSuper(shipping.getShippingMethodTitle, function () {
            this._super();
            // add extended functionality here or modify method logic altogether
            var shippingMethod = '',
                shippingMethodTitle = '';

            if (!this.isCalculated()) {
                return '';
            }
            shippingMethod = quote.shippingMethod();

            if (typeof shippingMethod['method_title'] !== 'undefined') {
                shippingMethodTitle = ' - ' + shippingMethod['method_title'];
            }

            return shippingMethod ?
                shippingMethod['carrier_title'] + shippingMethodTitle + " foo" :
                shippingMethod['carrier_title'];
        });

        return shipping;
    };
});

But it does not work and still loads the old method. I added foo to the title but it is not showing. Of course I flushed the cache with bin/magento c:f. What is wrong with my mixin?

Please only show solutions which show how to override that method, I don't want to override the whole file.

Answer 1

I applied the code from the documentation wrong. To make it work I have to use the code showed in the chapter Extend UI Component. I think I copied the code from somewhere from the internet and thought it is from the documentation. So it was my fault.

I was using the wrong return statement as pointed out by @mrtuvn here

I used this (wrong):

return function (target) {
    return wrapper.extend(target, mixin);
};

instead of this (correct):

return function (target) { // target == Result that Magento_Ui/.../columns returns.
    return target.extend(mixin); // new result that all other modules receive
};

Working Code:

Company/Shipping/view/frontend/requirejs-config.js:

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

Company/Shipping/view/frontend/web/js/view/summary/shipping-mixin.js:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
], function (wrapper, quote) {
    'use strict';

    var mixin = {
        getShippingMethodTitle: function () {
            var shippingMethod = '',
                shippingMethodTitle = '';

            if (!this.isCalculated()) {
                return '';
            }
            shippingMethod = quote.shippingMethod();

            if (typeof shippingMethod['method_title'] !== 'undefined') {
                shippingMethodTitle = ' - ' + shippingMethod['method_title'];
            }

            return shippingMethod ?
                shippingMethod['carrier_title'] + shippingMethodTitle + " foo" :
                shippingMethod['carrier_title'];
        },
    };

    /**
     * Override default getShippingMethodTitle
     */
    return function (OriginShipping) {
        return OriginShipping.extend(mixin);
    };
});

Answer 2

Looks like you are on the right path. Perhaps you need to manually find and delete Magento's requirejs-config.js from your Magento static assets directory, so that it is regenerated to include the new mixin. You can do this using the following command:

find pub | grep requirejs-config.js
rm path/to/requirejs-config.js

Once deleted, if you are running in production mode, redeploy static assets and clear your browser cache before testing again.