In customer account address book, add or edit address is managed in separate page.
I want to add or edit address in popup modal(same like shipping address popup modal in checkout page)*.
How it can be done ?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityYou should read example from Magento_Checkout module files such as
vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js:138
vendor/magento/module-checkout/view/frontend/web/template/shipping.html:29
vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js:196
These file will show your step by step add Popup address form, then save form data using Ajax.
Sample code.
- html template file
<button type="button"
data-bind="click: showFormPopUp, visible: !isNewAddressAdded()"
class="action action-show-popup">
<span data-bind="i18n: 'New Address'"></span></button>
<div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible()">
<!-- ko template: 'Namespace_ModuleName/shipping-address/form' --><!-- /ko -->
</div>
**- JS ui component file **
define(
[
'jquery',
'underscore',
'Magento_Ui/js/form/form',
'ko'],
function (
$,
_,
Component,
ko){
return Component.extend({
/**
* @return {*}
*/
getPopUp: function () {
var self = this,
buttons;
if (!popUp) {
buttons = this.popUpForm.options.buttons;
this.popUpForm.options.buttons = [
{
text: buttons.save.text ? buttons.save.text : $t('Save Address'),
class: buttons.save.class ? buttons.save.class : 'action primary action-save-address',
click: self.saveNewAddress.bind(self)
},
{
text: buttons.cancel.text ? buttons.cancel.text : $t('Cancel'),
class: buttons.cancel.class ? buttons.cancel.class : 'action secondary action-hide-popup',
/** @inheritdoc */
click: this.onClosePopUp.bind(this)
}
];
this.popUpForm.options.closed = function () {
self.isFormPopUpVisible(false);
};
this.popUpForm.options.modalCloseBtnHandler = this.onClosePopUp.bind(this);
this.popUpForm.options.keyEventHandlers = {
escapeKey: this.onClosePopUp.bind(this)
};
/** @inheritdoc */
this.popUpForm.options.opened = function () {
// Store temporary address for revert action in case when user click cancel action
self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
};
popUp = modal(this.popUpForm.options, $(this.popUpForm.element));
}
return popUp;
},
/**
* Revert address and close modal.
*/
onClosePopUp: function () {
checkoutData.setShippingAddressFromData($.extend(true, {}, this.temporaryAddress));
this.getPopUp().closeModal();
},
/**
* Show address form popup
*/
showFormPopUp: function () {
this.isFormPopUpVisible(true);
},
/**
* Save new shipping address
*/
saveNewAddress: function () {
var addressData,
newShippingAddress;
this.source.set('params.invalid', false);
this.source.trigger('shippingAddress.data.validate');
if (!this.source.get('params.invalid')) {
addressData = this.source.get('shippingAddress');
// if user clicked the checkbox, its value is true or false. Need to convert.
addressData.save_in_address_book = this.saveInAddressBook ? 1 : 0;
console.log(addressData);// This is address data fill by customer
this.getPopUp().closeModal();
this.isNewAddressAdded(true);
}
},
});
}
);