Methods described in documentation which shows how to overwrite JS methods are not working when trying to override getShippingMethodTitle #30569
Description
Summary (*)
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:
Examples (*)
I tried to override it by using a mixing like this:
Attempt 1 / 3:
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/3 - 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/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 mixins?
I've asked the question on stackoverflow and on slack, but no one knows how it works.
Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.
- Severity: S0 - Affects critical data or functionality and leaves users with no workaround.
- Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
- Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
- Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
- Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.