1

Hi guys, i want to refresh shipping and billing address after checkout page load using Knockout Js magento 2.

If you guys have any idea please guide me.

Please check the code i tried below

app\code\Vendor\Module\view\frontend\web\js\view\shipping-address\address-renderer\default.js

 /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */

    define([
        'jquery',
        'ko',
        'uiComponent',
        'Magento_Checkout/js/action/select-shipping-address',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/shipping-address/form-popup-state',
        'Magento_Checkout/js/checkout-data',
        'Magento_Customer/js/customer-data',
        'Magento_Checkout/js/model/shipping-rate-registry'

    ], function ($, ko, Component, selectShippingAddressAction, quote, formPopUpState, checkoutData, customerData,rateRegistry) {
        'use strict';

        var countryData = customerData.get('directory-data');

        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping-address/address-renderer/default'
            },

            /** @inheritdoc */
            initObservable: function () {
                this._super();
                this.isSelected = ko.computed(function () {
                    var isSelected = false,
                        shippingAddress = quote.shippingAddress();

                    if (shippingAddress) {
                        isSelected = shippingAddress.getKey() == this.address().getKey(); //eslint-disable-line eqeqeq
                    }

                    return isSelected;
                }, this);

//My code start here
                var address = quote.shippingAddress();

                address.trigger_reload = new Date().getTime();

                rateRegistry.set(address.getKey(), null);
                rateRegistry.set(address.getCacheKey(), null);

                quote.shippingAddress(address); 
                console.log("shipping address renderer");
//My code end here
                return this;
            },

            /**
             * @param {String} countryId
             * @return {String}
             */
            getCountryName: function (countryId) {
                return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
            },

            /** Set selected customer shipping address  */
            selectAddress: function () {
                selectShippingAddressAction(this.address());
                checkoutData.setSelectedShippingAddress(this.address().getKey());
            },

            /**
             * Edit address.
             */
            editAddress: function () {
                //formPopUpState.isVisible(true);
                //this.showPopup();
                this.redirectUrl();
            },

            /**
             * redirect to Cpp address edit page click on addredd edit button.
             */
            redirectUrl: function () {
                window.location.href = '';
            },

            /**
             * Show popup.
             */
            showPopup: function () {
                $('[data-open-modal="opc-new-shipping-address"]').trigger('click');
            }
        });
    });
0

I am facing similar issue and did not able to solve it. I guess you can try to update the address renderer's data:elems.

update and data: elems in shipping-address/list.html

I am not able to understand it. If you solved, you may post your updated code here. The link you try is not working because the address is not saving to quote at that step. Guessing it will save when you go to payment step. Please correct me if i am wrong.

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.