3

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

enter image description here

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

It’s a good question. You can use the debugger in chrome to go step by step in cases like this:

enter image description here

The file it goes to when super is called is:

Magento_Checkout/js/view/summary/shipping.js

enter image description here

How to do:

  1. Edit the file and add the line debugger:

enter image description here

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

enter image description here

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

enter image description here

| improve this answer | |
  • I totally forgot about debugger, thank you for the detailed explanation :) – Black Oct 20 at 10:43
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'];
        },
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.