Magento 2 - How does getShippingMethodTitle know the method title in module-tax/view/frontend/web/js/view/checkout/cart/totals/shipping.js

Question

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?

Answer 1

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:

1. Edit the file and add the line debugger:

2. Open chrome and inspect and go to the page which will trigger the debugger, it will then open like this:

3. 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.

Answer 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'];
        },