Magento 2.3 : Use a dropdown select for the shipping address on the Onepage Checkout

Question

select the shipping address with a dropdown, similar to how you can if you choose to change the billing address.

I would like it to work similarly to when you change the billing address, with a dropdown:

Answer 1

Have you got any further with this?

You could update checkout/shipping-address/list.html

<div class="field field-select-shipping">
    <label class="label"><span data-bind="i18n: 'Shipping Address'"></span></label>
    <div class="control" data-bind="if: (shippingAddressOptions.length > 1)">
    <select class="select" name="shipping_address_id" data-bind="
        options: shippingAddressOptions,
        optionsText: shippingaddressOptionsText,
        value: selectedShippingAddress,
        event: {change: onShippingAddressChange(selectedShippingAddress())};
    "></select>
    </div>
</div>

Then can have your custom shipping.js Update from 'use strict' of the current

'use strict';

        var popUp = null,

        newShippingAddressOption = {
            getAddressInline: function () {
                return $t('New Address');
            },
            customerAddressId: null
        },

        shippingAddressOptions = addressList().filter(function (address) {
            return address.getType() == 'customer-address';
        });

        shippingAddressOptions.push(newShippingAddressOption);

    return Component.extend(
        {
            defaults: {
                template: 'Magento_Checkout/shipping'
            },
            visible: ko.observable(!quote.isVirtual()),
            errorValidationMessage: ko.observable(false),
            isCustomerLoggedIn: customer.isLoggedIn,
            isFormPopUpVisible: formPopUpState.isVisible,
            isFormInline: addressList().length == 0,
            isNewAddressAdded: ko.observable(false),
            saveInAddressBook: 1,
            quoteIsVirtual: quote.isVirtual(),
            currentShippingAddress: quote.shippingAddress,
            shippingAddressOptions: shippingAddressOptions,
            customerHasShippinhAddresses: shippingAddressOptions.length > 1,

Then add to the file

/**
             * @return {exports.initObservable}
             */
            initObservable: function () {
                this._super()
                    .observe({
                        selectedShippingAddress: null,
                        isShippingAddressDetailsVisible: quote.shippingAddress() != null,
                        isShippingAddressFormVisible: !customer.isLoggedIn() || shippingAddressOptions.length === 1,
                        saveInAddressBook: 1
                    });

                quote.shippingAddress.subscribe(function (newShippingAddress) {
                    if (newShippingAddress != null && newShippingAddress.saveInAddressBook !== undefined) {
                        this.saveInAddressBook(newShippingAddress.saveInAddressBook);
                    } else {
                        this.saveInAddressBook(1);
                    }
                    this.isShippingAddressDetailsVisible(true);
                }, this);

                return this;
            },

            /**
             * @param {Object} address
             * @return {*}
             */
            shippingaddressOptionsText: function (address) {
                return address.getAddressInline();
            },

            /**
             * @param {Object} address
             */
            onShippingAddressChange: function (address) {
                this.isShippingAddressFormVisible(address == newShippingAddressOption); //eslint-disable-line eqeqeq
            },

            /**
             * Update address action
             */
            updateAddress: function () {

                var addressData, newShippingAddress;

                if (this.selectedShippingAddress() && this.selectedShippingAddress() != newShippingAddressOption) { //eslint-disable-line eqeqeq
                    selectShippingAddress(this.selectedShippingAddress());
                    checkoutData.setSelectedShipppingAddress(this.selectedShippingAddress().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;
                        newShippingAddress = createShippingAddress(addressData);

                        // New address must be selected as a billing address
                        selectedShippingAddress(newShippinhAddress);
                        checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
                        checkoutData.setNewCustomerShippingAddress(addressData);
                    }
                }
                this.updateShippingAddresses();
            },

            /**
             * Trigger action to update shipping and billing addresses
             */
            updateShippingAddresses: function () {
                setShippingAddressAction(globalMessageList);
            },

This will get you to where I'm at. Which is - how do we get this to continue onwards

Answer 2

The templates for shipping address section are here :

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

and

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

You can override the same in your theme like this app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-address/list.html

As you wish to list the addresses in select dropdown you need to change the code like this:

<div class="field field-select-shipping">
    <div class="control" >
        <select class="select" name="shipping_address_id" data-bind="
        options: addressOptions,
        optionsText: addressOptionsText,
        optionsValue: addressOptionsValue,
        value: selectedAddress,
        selectedOptions: selectedAddress,
        event: {change: selectAddress(selectedAddress())};
    "></select>
    </div>
</div>

The js files are located here:

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/list.js

and

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js

You can override the same like this: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/shipping-address/list.js

You can refer to this file vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js for writing functions like addressOptions, addressOptionsText etc.