CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommercecheckout
Anurag
Anurag

Reputation: 33

How can I update my cart using js/ajax when the billing state or country is changed in woocommerce checkout?

I have a single page checkout and used this code but the cart is not getting updated. I am also having ajax auto update cart plugin and according to its docs. if I add the qty class to the select field it should update cart automatically.But it didnt. Can anyone help??

I used this code in the child themes function.php

add_action('wp_footer', 'billing_country_update_checkout', 50);
function billing_country_update_checkout() {
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
       
          jQuery('select#billing_state, select#billing_country').change(function() {
        var element = document.getElementById("billing_country");
        element.classList.add("qty");
         console.log('Event: Page is reloaded');
  });
    </script>
    <?php
}

Upvotes: 0

Views: 2441

Answers (1)

Valerii Vasyliev
Valerii Vasyliev

Reputation: 469

Woocommerce have some js triggers for this situation :

Woocommerce Checkout JS events :

$( document.body ).trigger( 'init_checkout' );
$( document.body ).trigger( 'payment_method_selected' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_checkout' );
$( document.body ).trigger( 'checkout_error' );
$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );

For your task need use event $( document.body ).trigger( 'update_checkout' );

Changed code :

add_action('wp_footer', 'billing_country_update_checkout', 50);
function billing_country_update_checkout() {
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
       
          jQuery('select#billing_state, select#billing_country').change(function() {
                    var element = document.getElementById("billing_country");
                    element.classList.add("qty");
                    console.log('Event: Page is reloaded');
                    
                    jQuery('body').trigger('update_checkout');
            });
    </script>
    <?php
}

If you wanna use the result:

jQuery('body').on('updated_checkout', function(event, json, string){
            
     console.log(json.fragments);
});

json.fragments consist the checkout page after update

Upvotes: 3

Related Questions