skip to Main Content

I have updated Magento2.3.1 to Magento2.3.2. When proceed to checkout I am getting the data-bind error –

knockout-3.4.1.js:72 Uncaught ReferenceError: Unable to process binding “if: function(){return (addressOptions.length > 1) }”
Message: addressOptions is not defined

When I searched the keyword addressOptions in my magento folder the file path is:
/vendor/magento/module-checkout/view/frontend/web/template/billing-address/list.html
and the code in the html file is:

<div class="field field-select-billing">
    <label class="label"><span data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
    <div class="control" data-bind="if: (addressOptions.length > 1)">
        <select class="select" name="billing_address_id" data-bind="
        options: addressOptions,
        optionsText: addressOptionsText,
        value: selectedAddress,
        event: {change: onAddressChange(selectedAddress())};
    "></select>
    </div>
</div>

The error is attached as belowknockout.js
If anybody knows please help me. Thanks in advance.

3

Answers


  1. You have

    vendor/magento/module-checkout/view/frontend/web/template/billing-address.html

    rewritten in your custom theme.

    Bring it up to date, recompile and see if it solves your problem.

    Login or Signup to reply.
  2. I was able to solve rewriting the billing-address.html template of a custom plugin which I bought.
    In this template there was the inclusion of the billing address list template in this way:

    <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
    

    while in the core of magento the template was included in this way instead:

    <each args="getRegion('billing-address-list')" render="" />
    

    so I made this change in my template and I receive no more errors.
    Maybe something changend in the latest Magento2.3 versions regarding the inclusions of this kind of templates?

    Login or Signup to reply.
  3. /**
     * Magento 2.3.2 Fix checkout address issue.
    */
    
    define([
        'ko',
        'underscore',
        'Magento_Ui/js/form/form',
        'Magento_Customer/js/model/customer',
        'Magento_Customer/js/model/address-list',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/action/create-billing-address',
        'Magento_Checkout/js/action/select-billing-address',
        'Magento_Checkout/js/checkout-data',
        'Magento_Checkout/js/model/checkout-data-resolver',
        'Magento_Customer/js/customer-data',
        'Magento_Checkout/js/action/set-billing-address',
        'Magento_Ui/js/model/messageList',
        'mage/translate'
    ],
    function (
        ko,
        _,
        Component,
        customer,
        addressList,
        quote,
        createBillingAddress,
        selectBillingAddress,
        checkoutData,
        checkoutDataResolver,
        customerData,
        setBillingAddressAction,
        globalMessageList,
        $t
    ) {
    'use strict';
    
    var lastSelectedBillingAddress = null,
    newAddressOption = {
        /**
         * Get new address label
         * @returns {String}
         */
        getAddressInline: function () {
            return $t('New Address');
        },
        customerAddressId: null
    },
    countryData = customerData.get('directory-data'),
    addressOptions = addressList().filter(function (address) {
        return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
    });
    
    addressOptions.push(newAddressOption);
    
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/billing-address',
            actionsTemplate: 'Magento_Checkout/billing-address/actions',
            formTemplate: 'Magento_Checkout/billing-address/form',
            detailsTemplate: 'Magento_Checkout/billing-address/details',
            links: {
                isAddressFormVisible: '${$.billingAddressListProvider}:isNewAddressSelected'
            }
        },
        currentBillingAddress: quote.billingAddress,
        addressOptions: addressOptions,
        customerHasAddresses: addressOptions.length > 0,
    
        /**
         * Init component
         */
        initialize: function () {
            this._super();
            quote.paymentMethod.subscribe(function () {
                checkoutDataResolver.resolveBillingAddress();
            }, this);
        },
    
        /**
         * @return {exports.initObservable}
         */
        initObservable: function () {
            this._super()
                .observe({
                    selectedAddress: null,
                    isAddressDetailsVisible: quote.billingAddress() != null,
                    isAddressFormVisible: !customer.isLoggedIn() || !addressOptions.length,
                    isAddressSameAsShipping: false,
                    saveInAddressBook: 1
                });
    
            quote.billingAddress.subscribe(function (newAddress) {
                if (quote.isVirtual()) {
                    this.isAddressSameAsShipping(false);
                } else {
                    this.isAddressSameAsShipping(
                        newAddress != null &&
                        newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
                    );
                }
    
                if (newAddress != null && newAddress.saveInAddressBook !== undefined) {
                    this.saveInAddressBook(newAddress.saveInAddressBook);
                } else {
                    this.saveInAddressBook(1);
                }
                this.isAddressDetailsVisible(true);
            }, this);
    
            return this;
        },
    
        /**
        * @param {Object} address
        */
        onAddressChange: function (address) {
            (address === newAddressOption) ? this.isAddressFormVisible(false) : this.isAddressFormVisible(true);
        },
    
    
        canUseShippingAddress: ko.computed(function () {
            return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
        }),
    
        /**
         * @param {Object} address
         * @return {*}
         */
        addressOptionsText: function (address) {
            return address.getAddressInline();
        },
    
        /**
         * @return {Boolean}
         */
        useShippingAddress: function () {
            if (this.isAddressSameAsShipping()) {
                selectBillingAddress(quote.shippingAddress());
    
                this.updateAddresses();
                this.isAddressDetailsVisible(true);
            } else {
                lastSelectedBillingAddress = quote.billingAddress();
                quote.billingAddress(null);
                this.isAddressDetailsVisible(false);
            }
            checkoutData.setSelectedBillingAddress(null);
    
            return true;
        },
    
        /**
         * Update address action
         */
        updateAddress: function () {
            var addressData, newBillingAddress;
    
            // if (this.selectedAddress() && !this.isAddressFormVisible()) {
            if (this.selectedAddress() && this.selectedAddress() != newAddressOption) { //eslint-disable-line eqeqeq
                selectBillingAddress(this.selectedAddress());
                checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
            } else {
                this.source.set('params.invalid', false);
                this.source.trigger(this.dataScopePrefix + '.data.validate');
    
                if (this.source.get(this.dataScopePrefix + '.custom_attributes')) {
                    this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
                }
    
                if (!this.source.get('params.invalid')) {
                    addressData = this.source.get(this.dataScopePrefix);
    
                    if (customer.isLoggedIn() && !this.customerHasAddresses) { //eslint-disable-line max-depth
                        this.saveInAddressBook(1);
                    }
                    addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
                    newBillingAddress = createBillingAddress(addressData);
    
                    // New address must be selected as a billing address
                    selectBillingAddress(newBillingAddress);
                    checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
                    checkoutData.setNewCustomerBillingAddress(addressData);
                }
            }
            this.updateAddresses();
        },
    
        /**
         * Edit address action
         */
        editAddress: function () {
            lastSelectedBillingAddress = quote.billingAddress();
            quote.billingAddress(null);
            this.isAddressDetailsVisible(false);
        },
    
        /**
         * Cancel address edit action
         */
        cancelAddressEdit: function () {
            this.restoreBillingAddress();
    
            if (quote.billingAddress()) {
                // restore 'Same As Shipping' checkbox state
                this.isAddressSameAsShipping(
                    quote.billingAddress() != null &&
                        quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
                        !quote.isVirtual()
                );
                this.isAddressDetailsVisible(true);
            }
        },
    
        /**
         * Manage cancel button visibility
         */
        canUseCancelBillingAddress: ko.computed(function () {
            return quote.billingAddress() || lastSelectedBillingAddress;
        }),
    
        /**
         * Restore billing address
         */
        restoreBillingAddress: function () {
            if (lastSelectedBillingAddress != null) {
                selectBillingAddress(lastSelectedBillingAddress);
            }
        },
    
        /**
         * @param {Number} countryId
         * @return {*}
         */
        getCountryName: function (countryId) {
            return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
        },
    
        /**
         * Trigger action to update shipping and billing addresses
         */
        updateAddresses: function () {
            if (window.checkoutConfig.reloadOnBillingAddress ||
                !window.checkoutConfig.displayBillingOnPaymentMethod
            ) {
                setBillingAddressAction(globalMessageList);
            }
        },
    
        /**
         * Get code
         * @param {Object} parent
         * @returns {String}
         */
        getCode: function (parent) {
            return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
        }
    });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search