4

In Magento 2, I would like to be able to 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:

enter image description here

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

enter image description here

I can see the dropdown for the billing address is set in: app/code/Magento/Checkout/view/frontend/web/template/billing-address/list.html

But I can't find the knockout template for the shipping address section, I thought it would be on of the files in:
app/code/Magento/Checkout/view/frontend/web/template/shipping-information/
or
app/code/Magento/Checkout/view/frontend/web/template/shipping-information/

But I couldn't find any here which worked.

Any ide

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

7
  • That's what I thought at first too, those were the template files I mentioned in my question. But when I override them in my theme and clear the cache, nothing changes
    – Holly
    May 12 '17 at 13:54
  • actually, got it working. It was just the cache, but when I add your code I just get an empty select box
    – Holly
    May 12 '17 at 14:15
  • Yes, as I mentioned you also need to write those functions called in the list.hyml file to get the values. You said you got it working. How did you do ?
    – Sejal Shah
    May 14 '17 at 5:06
  • Is any one can got the output
    – Ramesh
    Aug 1 '17 at 6:50
  • @SejalShah what change js file please suggest me. Mar 26 '19 at 11:14

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.