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

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);
                }
            },
         });
    }
);
  • Where is the code to save address data ? – Kishan Patadia Dec 27 '17 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 '17 at 10:26
  • how to populate the popup form with default address for logged in user? – Liz Eipe C Oct 21 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 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 at 10:38

Your Answer

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

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