0

I am doing some heavy customization on the checkout (pulling billing address to the first position, next to shipping address).

If have added a plugin to view/shipping.js:

define(
    [
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/checkout-data'
    ], function(
    quote,
    selectShippingAddress,
    checkoutData
    ){
    'use strict';
    return function(targetModule){

    var lastSelectedShippingAddress = null;

    return targetModule.extend({
        initObservable: function () {
            this._super()
                .observe({
                    isAddressSameAsBilling: true,
                    isAddressDetailsVisible: false // vs. isAddressFormVisible -- which one to use?
                });
            return this;
        },

        /**
         * @return {Boolean}
         */
        useBillingAddress: function () {
            debugger;
            if (this.isAddressSameAsBilling()) {
                selectShippingAddress(quote.billingAddress());
                this.isAddressDetailsVisible(false);
            } else {
                lastSelectedShippingAddress = quote.shippingAddress();
                quote.shippingAddress(null);
                this.isAddressDetailsVisible(true);
            }
            checkoutData.setSelectedShippingAddress(null);

            return true;
        },
    });
    };
});

And have bount useBillingAddress to a newly created checkox "Use billing address as shipping address".

Now when clicking this checkbox I get the following javascript error:

list.js:60 Uncaught TypeError: Cannot read property 'getType' of null
    at UiClass.createRendererComponent (list.js:60)
    at ko.subscription.callback (list.js:33)
    at Function.notifySubscribers (knockout.js:1103)
    at Function.observable.valueHasMutated (knockout.js:1300)
    at Object.observable [as shippingAddress] (knockout.js:1285)
    at UiClass.useBillingAddress (plugin.js:36)
    at HTMLInputElement.<anonymous> (knockout.js:3863)
    at HTMLInputElement.dispatch (jquery.js:5226)
    at HTMLInputElement.elemData.handle (jquery.js:4878)

But I am unable to track down how this error is caused using the javascript debugger.

I would be happy for any hints.

0

With list.js it means vendor/magento/module-checkout/view/frontend/web/js/view/shipping-information/list.js, the corresponding template is vendor/magento/module-checkout/view/frontend/web/template/shipping-information/list.html.

If I track this tempalte down, I find it is rendered in the sidebar under "Ship To". Making the template empty does help. List.js is still executed. I have to have look closer at list.js and set a breakpoint there.

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

        var self = this;
        quote.shippingAddress.subscribe(function(address) {
            debugger;
            self.createRendererComponent(address);
        });
        return this;
    },

This receives address = null Which is kind of true. In our case we did not yet define the shipping address, it's blank.

   createRendererComponent: function (address) {
        if (address == null) return;

helps but reveals a new place where Magento core assumes, that shipping address has to be there yet.

This is vendor/magento/module-checkout/view/frontend/web/js/model/shipping-rate-service.js where I can add

    quote.shippingAddress.subscribe(function () {
        if (quote.shippingAddress() == null) {
            return;
        }

just have to find a clean way to do this via plugin.

Much easier alternative might be to create an empty shipping-dummy address.

What does not work:

/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/*global define*/
define(
    [
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/new-customer-address'
    ],
    function($, quote, newCustomerAddress) {
    'use strict';
    return function(shippingAddress) {
        // see vendor/magento/module-checkout/view/frontend/web/js/action/select-billing-address.js

        var address = newCustomerAddress;

        if (shippingAddress == null) {
            shippingAddress = $.extend({}, newCustomerAddress); // clone
        }

        if (quote.billingAddress() && shippingAddress.getCacheKey() == quote.billingAddress().getCacheKey()) {
            address = $.extend({}, shippingAddress);
            address.saveInAddressBook = null;
        } else {
            address = shippingAddress;
        }

        quote.shippingAddress(address);
    };
    }
);

Finally I was able to create the empty shipping address like this:

/*global define*/
define(
    [
        'jquery',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/new-customer-address'
    ],
    function($, quote, newCustomerAddress) {
        'use strict';
        return function(shippingAddress) {
            // see vendor/magento/module-checkout/view/frontend/web/js/action/select-billing-address.js

            var address = newCustomerAddress({});

            if (shippingAddress == null) {
                shippingAddress = newCustomerAddress({});
            }

            if (quote.billingAddress() && shippingAddress.getCacheKey() == quote.billingAddress().getCacheKey()) {
                address = $.extend({}, shippingAddress);
                address.saveInAddressBook = null;
            } else {
                address = shippingAddress;
            }

            quote.shippingAddress(address);
        };
    }
);
  • Hi Alex, can you please let me know in which file you added last one code segment? or where and which file I need to create? – Dhara Bhatti Aug 1 at 5:03
  • It was a mixin to view/shipping.js – Alex Aug 1 at 5:06
  • Can you please share a full path of that file? and if possible please share sample code of requirejs-config.js. – Dhara Bhatti Aug 1 at 5:09

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.