1

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

This is how it currently works:

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

enter image description here

0

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

-1

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.

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.