0

Is there any knockout method which is triggering after update/edit shipping address on checkout ?

to be in details what I want to achieve is based on city enter, I want to show custom content. All this working fine when customer has saved address in account but not when customer placing an order first time.

Layout code looks like:

<item name="shippingAdditional" xsi:type="array">
      <item name="component" xsi:type="string">uiComponent</item>
            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                  <item name="children" xsi:type="array">
                        <item name="additional_block" xsi:type="array">
                              <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/additional-block</item>
                        </item>
            </item>
     </item>

Here's JS file:

define([
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'mage/url',
    'knockout',
    'jquery'

], function (Component, quote, url, ko, $) {
    'use strict';

    var content = window.checkoutConfig.shipping_method_promotion;
    var status = ko.observable(window.checkoutConfig.dd_status);
    var earliestDeliveryCityLIst = window.checkoutConfig.dd_earliest_city_list;
    var earliestDeliveryCityTime = ko.observable(window.checkoutConfig.dd_earliest_city_time);
    var longetDeliveryCityList = window.checkoutConfig.dd_longer_city_list;
    var longerDeliveryCityTime = window.checkoutConfig.dd_longer_city_time;

    return Component.extend({
       defaults: {
           template: 'Vendor_Module/checkout/shipping/additional-block'
       },
       getCityName: function () {
       var deliveryDays = '';
       $(document).on('change',".city_dropdown",function(){
            console.log('change event listened');
        });
      return deliveryDays;
    },
     getDeliveryDate: function () {
           var cities = earliestDeliveryCityLIst.split(",");
            if ($.inArray(this.getCityName().toLowerCase(),cities) != -1) {
               return earliestDeliveryCityTime;
            } else {
                return content;
            }
        }
    });
});

Template:

Above attempt is working as expected in case of saved address for customer not for new order.

I know that I can write one more method in JS to listen on change method but how can i pass the value to ko template whenver change happened!?

My bad if you expert noticed any silly mistake i feel approch i used in somewhere incorrect. Any suggestions !?

0

You can listen to the whole shippingAddress, check if city has changed, then do your work. This is from Magento_Checkout/js/view/shipping.js component enter image description here

Or, I haven't tried this, but maybe you could use imports. You import the city field from checkout into your component, then you can do whatever you want with it. https://devdocs.magento.com/guides/v2.4/ui_comp_guide/concepts/ui_comp_linking_concept.html (the imports section and how to get component from its name)

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.