3

I'm having trouble receiving the return value from a function in the parent file.

As you can see in Magento_Tax/js/view/checkout/summary/shipping.js, it's calling functions in the (grand)parent file (Magento_Checkout/js/view/summary/abstract-total.js - getFormattedPrice() ) but I'm receiving a JS error when I try to call this.getValue() in the parent file (this.getValue() is not a function).

Can anyone spot why I can't call this.getValue()?

Magento_Checkout/js/view/summary/shipping.js (Parent file – I haven't touched this file apart from adding in the string return value for demo purposes).

define(
[
'ko',
'jquery',
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote'
],
function (ko, $, Component, quote) {
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/shipping'
        },
        quoteIsVirtual: quote.isVirtual(),
        totals: quote.getTotals(),

        getShippingMethodTitle: function() {
            if (!this.isCalculated()) {
                return '';
            }
            var shippingMethod = quote.shippingMethod();
            return shippingMethod ? shippingMethod.carrier_title + " - " + shippingMethod.method_title : '';
        },

        isCalculated: function() {
            return this.totals() && this.isFullMode() && null != quote.shippingMethod();
        },

        getValue: function() {

            return 'this is the value I want to see in the #Magento_Tax/checkout/summary/shipping.html';

        }

    });
  }
);

Magento_Tax/js/view/checkout/summary/shipping.js
( I added just the newVar: ko.observable(this.getValue()) )

define(
[   
'ko',
'jquery',
'Magento_Checkout/js/view/summary/shipping',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/step-navigator'
],
function (ko, $, Component, quote, stepNavigator ) {
    var displayMode = window.checkoutConfig.reviewShippingDisplayMode;

    return Component.extend({
        defaults: {
            displayMode: displayMode,
            template: 'Magento_Tax/checkout/summary/shipping'
        },


        newVar: ko.observable(this.getValue()),


        isBothPricesDisplayed: function() {
            return 'both' == this.displayMode
        },
        isIncludingDisplayed: function() {
            return 'including' == this.displayMode;
        },
        isExcludingDisplayed: function() {
            return 'excluding' == this.displayMode;
        },
        isCalculated: function() {
            return this.totals() && this.isFullMode() && null != quote.shippingMethod();
        },
        getIncludingValue: function() {
            if (!this.isCalculated()) {
                return this.notCalculatedMessage;
            }
            var price =  this.totals().shipping_incl_tax;
            return this.getFormattedPrice(price);
        },
        getExcludingValue: function() {
            if (!this.isCalculated()) {
                return this.notCalculatedMessage;
            }
            var price =  this.totals().shipping_amount;
            return this.getFormattedPrice(price);
        }
    });
}
);

Magento_Tax/checkout/summary/shipping

// This is what I want to update with the return value from getValue()

<span data-bind="text: newVar() "></span>

...
4

From my understanding, to set the observable the way Magento uses knockout you would have to create an initialize function starting with this._super(); which will allow to call the parents.

define(
[   
'ko',
'jquery',
'Magento_Checkout/js/view/summary/shipping',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/step-navigator'
],
function (ko, $, Component, quote, stepNavigator ) {
    var displayMode = window.checkoutConfig.reviewShippingDisplayMode;

    return Component.extend({
        defaults: {
            displayMode: displayMode,
            template: 'Magento_Tax/checkout/summary/shipping'
        },

        initialize: function () {
            this._super();

            this.newVar = ko.observable(this.getValue());
        },


        ...


    });
}
);

You should then be able to call the parents from anywhere in the code after the initialize function.

Also data-bind should be:

<span data-bind="text: newVar"></span>

Useful tips for using this:

If the need comes to access this from inside computed observables or keeping track of it using function overriding the this variable, you may simply use the appoach below.

self = this;
self.firstName = ko.observable('Some');
self.lastName = ko.observable('One');
self.fullName = ko.computed(function() {
    return self.firstName() + " " + self.lastName();
});

To pass this or any variable inside of a computed observable:

this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
}, this); //PASSED VARIABLE
  • Thank you for your reply. I agreed with most of what you've said but, the Magento_Tax/js/view/checkout/summary/shipping.js doesn't have an initialize function with this._super(); and yet, it's able to call its parent functions. For example, this.getFormattedPrice(price); – Mitch7663 Nov 27 '16 at 20:57
  • Indeed I had noticed it while I wrote my answer and unfortunately I don't understand it enough yet to tell why this.getFormattedPrice(price); is working without the initialize function. Have you tried to call this.getValue() directly outside of the ko.observable() function? You may try initialize: function () { alert(this.getValue()); }, without this._super() to see if it is giving the output or undefined. If it works then it may mean that the problem reside with using ko.observable() outside of the initialize function only. – ElGatito Nov 28 '16 at 1:19

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.