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.

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.