0

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 ?

1 Answer 1

1

You 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);
                }
            },
         });
    }
);
6
  • Where is the code to save address data ? Dec 27, 2017 at 10:26
  • console.log(addressData);// This is address data fill by customer this line, you can post addressData to your ajax controller to save that.
    – HoangHieu
    Dec 27, 2017 at 10:26
  • how to populate the popup form with default address for logged in user?
    – Liz Eipe C
    Oct 21, 2019 at 10:56
  • Hi @LizEipeC you can add default data for the popup. or auto-fill data using javascript after popup opened.
    – HoangHieu
    Oct 21, 2019 at 16:03
  • Thanks for the reply.Can you please advise how to get the stored address for auto filling the form? Which file I need to edit for making this change? Thanks in advance
    – Liz Eipe C
    Oct 22, 2019 at 10:38

Your Answer

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

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