1

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:

enter image description here

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.

Improve this question
0

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.

Improve this answer
3
  • Nah thats not the problem either, I executed grunt clean. And one should never ever develop in production mode btw – Black Oct 20 '20 at 12:00
  • 1
    If you manually inspect Magento's requirejs-config.js from the browser's Network tab, does it include the Company_Shipping mixin anywhere? – snez Oct 21 '20 at 12:06
  • Yes It does, just checked it. I solved the problem an hour ago and posted the answer. – Black Oct 22 '20 at 10:39
0

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);
    };
});
Improve this answer

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.