Magento 2 : From where (PHP) is the checkout billing address options drop down being populated?

by

The question:

From where is the checkout billing address options drop down being populated? How can I control the options?

EDIT:
Found
root/vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js

   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
        });

addressList then is ‘Magento_Customer/js/model/address-list’

Found the template as well root/vendor/magento/module-checkout/view/frontend/web/template/billing-address/list.html

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

This is database information so php has to bring it.
Where in php are these values passed to knockout?

enter image description here

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

I tracked down where the info is passed from php , I started at your file – 

Magento_Customer/js/model/address-list

define([
    'ko',
    './customer-addresses'
], function (ko, defaultProvider) {
    'use strict';

    return ko.observableArray(defaultProvider.getAddressItems());
});

the defaultProvider here is /vendor/magento/module-customer/view/frontend/web/js/model/customer-addresses.js it returns the addresses by fetching it from customerData which it gets like this

customerData = window.customerData;

@line 24 . A quick search for “window.customerData” shows it is being assigned from window.checkoutConfig.customerData (vendor/magento/module-checkout/view/frontend/templates/onepage.phtml @line 29)

the window.checkoutConfig is in turn assigned as following

 window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;

in vendor/magento/module-checkout/view/frontend/templates/onepage.phtml @line 26

so this is the point where the php passes the customerData and hence address info along with it to knockout , specifically window.customerData which is accessible to ko.

You can further extend the trace by following vendor/magento/module-checkout/Block/Onepage.php‘s getSerializedCheckoutConfig() function.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment