4

As checkout page layout is mostly build in knockout.js and I have zero knowledge of knockout.js.

I want to show shipping address in select box <select> instead of Box (ref to image - section 1) on the checkout page.

In Billing address it is showing as select box (ref to image - section 2), but I want same display for shipping address.

any help is appreciable.

enter image description here

1
  • Are you found any solution Jun 15, 2017 at 11:22

1 Answer 1

0

You have to override

module_checkout/view/frontend/web/template/shipping-address/list.html

or

module_checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

list.html

<!-- ko if: (visible)-->
<div class="field addresses">
  <div class="control">
    <select>
        <!-- ko foreach: { data: elems, as: 'element' } -->
        <!-- ko template: element.getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </select>
  </div>
</div>
<!-- /ko -->

or default.html

<option>
  <!-- ko text: address().firstname --><!-- /ko --> <!-- ko text: address().lastname --><!-- /ko --><br/>
  <!-- ko text: address().street --><!-- /ko --><br/>
  <!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
  <!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
  <!-- ko text: address().telephone --><!-- /ko --><br/>
</option>

this will display you an shipping address in dropdown, but i don't about how to set selection event for shipping address as of billing address, for that may be you have to look at module-checkout/view/frontend/web/template/billing-address/list.html or module-checkout/view/frontend/web/js/view/billing-address.js

1
  • Are you found any solution Jun 15, 2017 at 11:22

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.