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:
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityselect 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:
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
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.