Magento – Magento 2 checkout: How to trigger shipping methods block update programmatically

checkoutjavascriptmagento-2.1.7magento2

I've seen the What Programmatically Triggers Magento 2's Shipping Rates to Update question, and also read related @AlanStorm's post on his website, but I still don't understand, what I need to add into my custom JS code so that the shipping rates block is updated.

i.e. it automatically updates when postcode field is changed. But even if I manually fire jQuery $(postcode_field).change() trigger, it works only if postcode really changed.

Best Answer

To force shipping method reloading try,

define(
    [
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/shipping-rate-processor/new-address',
        'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
        'Magento_Checkout/js/model/shipping-rate-registry'

    ],
    function (quote, defaultProcessor, customerAddressProcessor, rateRegistry) {
       'use strict';

       var processors = [];

       rateRegistry.set(quote.shippingAddress().getCacheKey(), null);

       processors.default =  defaultProcessor;
       processors['customer-address'] = customerAddressProcessor;

       var type = quote.shippingAddress().getType();

       if (processors[type]) {
          processors[type].getRates(quote.shippingAddress());
       } else {
          processors.default.getRates(quote.shippingAddress());
       }

    }
);

Related Solutions

Magento 2 – How to Trigger Code After KnockoutJS Render in Adminhtml

You can use the afterRender custom binding provided by the Magento core.

Here is an example from the core. The template adds afterRender="setStickyNode" which calls the setStickyNode function on the ViewModel.

Here is another basic example:

My template:

<div afterRender="doSomething" id="example1">
    <h1>This is a test</h1>
</div>

My ViewModel:

return {
    doSomething: function () {
        // Code that will run after id="example1" element is rendered on the page.
    }
}

Magento 2 – Refresh Quote Data in Checkout Frontend

I believe I have solved this. Here is what I did:

I added Magento_Checkout/js/action/get-totals to the define section of my JS file. This allowed me to call getTotals([]) to get the sidebar to update after the callback posts occur (I happen to have JS events that fire letting me know the callbacks have been triggered)

After all this, I was able to remove all of my other JS updates to set billing/shipping addresses and shipping method as these were no longer needed.

Best Answer

Related Solutions

Magento 2 – How to Trigger Code After KnockoutJS Render in Adminhtml

Magento 2 – Refresh Quote Data in Checkout Frontend

Related Topic