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

Improve this question
2

1 Answer 1

Reset to default
3

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.

Improve this answer
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, 2017 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, 2017 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, 2017 at 5:06
  • Is any one can got the output
    – Ramesh
    Aug 1, 2017 at 6:50
  • @SejalShah what change js file please suggest me.
    – HIren Kadivar
    Mar 26, 2019 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.