Magento 2 - How does getShippingMethodTitle know the method title in module-tax/view/frontend/web/js/view/checkout/cart/totals/shipping.js
-
14-04-2021 - |
题
I try to understand knockoutjs and requirejs more but I fail to understand the following case.
In checkout the shipping method title is showing in the summary
This is the template:
vendor/magento/module-tax/view/frontend/web/template/checkout/summary/shipping.html
...
<span class="value" data-bind="text: getShippingMethodTitle()"></span>
...
The method getShippingMethodTitle()
seems to be defined here:
vendor/magento/module-tax/view/frontend/web/js/view/checkout/cart/totals/shipping.js (Script A)
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* @api
*/
define([
'Magento_Tax/js/view/checkout/summary/shipping',
'Magento_Checkout/js/model/quote'
], function (Component, quote) {
'use strict';
return Component.extend({
/**
* @override
*/
isCalculated: function () {
return !!quote.shippingMethod();
},
/**
* @override
*/
getShippingMethodTitle: function () {
return '(' + this._super() + ')';
}
});
});
It just returns this._super()
so it means it tries to access the parent method _super,
but where is the parent? I think Component
is the parent, but there is no method called _super
in 'Magento_Tax/js/view/checkout/summary/shipping'
So how does it know the method name?
解决方案 2
Now I understand. The script vendor/magento/module-tax/view/frontend/web/js/view/checkout/cart/totals/shipping.js (Script A) is not the script where the method is defined.
The template is using the script under the similar path as the template. The template path is:
view/frontend/web/template/checkout/summary/shipping.html
so the script path is at
view/frontend/js/view/checkout/summary/shipping.js (Script B)
In view/frontend/js/view/checkout/summary/shipping.js (Script B) there is
Magento_Checkout/js/view/summary/shipping
defined as Component.
define([
'jquery',
'Magento_Checkout/js/view/summary/shipping', // <-- it uses this as Component
'Magento_Checkout/js/model/quote'
], function ($, Component, quote) {
'use strict';
var displayMode = window.checkoutConfig.reviewShippingDisplayMode;
return Component.extend({
...
If we look at vendor/magento/module-checkout/view/frontend/web/js/view/summary/shipping.js then we will see, that the method is defined there:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote',
'Magento_SalesRule/js/view/summary/discount'
], function ($, Component, quote, discountView) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/summary/shipping'
},
quoteIsVirtual: quote.isVirtual(),
totals: quote.getTotals(),
/**
* @return {*}
*/
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 :
shippingMethod['carrier_title'];
},
其他提示
It’s a good question. You can use the debugger in chrome to go step by step in cases like this:
The file it goes to when super is called is:
Magento_Checkout/js/view/summary/shipping.js
How to do:
- Edit the file and add the line debugger:
- Open chrome and inspect and go to the page which will trigger the debugger, it will then open like this:
- You can then press the arrow down and go line by line until you hit the super class, it will go around about in native knockout classes but you will get to the super class eventually.