I am completely new to magento ui-components and I don't know how to use them to make frontend changes. I am adding screenshot below to show what I am trying to achieve. enter image description here Recently I have a task in which I need to show new shipping address form of modal(popup) right below all shipping addresses on checkout page.

Upon debugging, I found that the files responsible for handling modal(popup) for new shipping address comes through the use of ui-components.

This is the file that uses shippingFormTemplate to render the template inside modal popup.


And JavaScript module that uses the above template is at below path.


I tried removing visible attribute from #opc-new-shipping-address element to show it on page.

<div id="opc-new-shipping-address"
                 render="shippingFormTemplate" />

and placed my custom button to save new address that is entered.

<div id="opc-new-shipping-address"
                 render="shippingFormTemplate" />
                 <button class="action primary action-save-address" click="saveNewAddress"><span translate="'Save Address'" /></button>

But after that if I change address information inside form, selected-item class is removed from the address that is selected which is due to shipping rates calculation. I don't know how it is disabled for modal.

How do I turn off the modal so that new shipping address form just show below the all list of addresses on checkout shipping step?

Note: I don't want to use ugly css solution to bring fixed position modal form below other addresses anyhow.

Any help would be great.

  • Hi Shashank, Did you get the solution for this. – Sumit Verma Jul 23 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.