Magento 2 - How to override Method getShippingMethodTitle in Magento_Checkout/view/frontend/web/js/view/summary/shipping.js
-
14-04-2021 - |
문제
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.
해결책 2
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);
};
});
다른 팁
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.