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

2 Answers 2

Reset to default
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 Commented Oct 20, 2020 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? Commented Oct 21, 2020 at 12:06
  • Yes It does, just checked it. I solved the problem an hour ago and posted the answer. Commented Oct 22, 2020 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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.