On country change ajax update checkout for shipping in Woocommerce

Question

I'm looking for a way to update order review (shipping price) when client change country on checkout page. I want to use jQuery. but wc_checkout_params wc_checkout_params is deprecated.

function custom_checkbox_checker() {

    if (is_checkout()) {

        wp_enqueue_script('jquery');
        ?>

        <script type="text/javascript">

            jQuery(document).ready(function (e) {

                var $ = jQuery;

        // wc_checkout_params is required to continue, ensure the object exists

                if (typeof wc_checkout_params === 'undefined')
                    return false;

                var updateTimer,
                        dirtyInput = false,
                        xhr;



                function update_shipping(billingstate, billingcountry) {

                    if (xhr)
                        xhr.abort();

                    $('#order_methods, #order_review').block({message: null, overlayCSS: {background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6}});

                    var data = {
                        action: 'woocommerce_update_order_review',
                        security: wc_checkout_params.update_order_review_nonce,
                        billing_state: billingstate,
                        billing_country: billingcountry,
                        post_data: $('form.checkout').serialize()

                    };



                    xhr = $.ajax({
                        type: 'POST',
                        url: wc_checkout_params.ajax_url,
                        data: data,
                        success: function (response) {

                            var order_output = $(response);

                            $('#order_review').html(response['fragments']['.woocommerce-checkout-review-order-table'] + response['fragments']['.woocommerce-checkout-payment']);

                            $('body').trigger('updated_checkout');

                        },
                        error: function (code) {

                            console.log('ERROR');

                        }

                    });

                }



                jQuery('.state_select').change(function (e, params) {

                    update_shipping(jQuery(this).val(), jQuery('#billing_country').val());

                });



            });

        </script>

    <?php

    }
}

add_action('wp_footer', 'custom_checkbox_checker', 50);

any clue?

All solutions related to AJAX for WC like this are useless since wc_checkout_params removed on 3.x version.

Nothing useful found in woocommerce documentations. nothing in stack overflow!

wondering why no one answered questions like this for 2 years+

Solution

Normally woocommerce do it itself, and nothing is needed…

But you can try the following instead, that should work in Woocommerce 3+ versions:

add_action('wp_footer', 'billing_country_update_checkout', 50);
function billing_country_update_checkout() {
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($){
        $('select#billing_country, select#shipping_country').on( 'change', function (){
            var t = { updateTimer: !1,  dirtyInput: !1,
                reset_update_checkout_timer: function() {
                    clearTimeout(t.updateTimer)
                },
                trigger_update_checkout: function() {
                    t.reset_update_checkout_timer(), t.dirtyInput = !1,
                    $(document.body).trigger("update_checkout")
                }
            };
            $(document.body).trigger('update_checkout');
            console.log('Event: update_checkout');
        });
    });
    </script>
    <?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Comments

[Nadia]

I want to filter cities base on selected state but woocommerce ajax run after my ajax and fill the drop down city and rouin my filteratin, is there any way to do that ?