WooCommerce updating the shipping method depending on the billing address field changes - php

Question

In my online store, there are two standard shipping methods - Flat Rate and Free Delivery. I added a plugin for distance delivery.
Thus, when a customer fills in the City and Address fields when placing an order, new shipping methods must be added. But new deliveries are not visible until I select Flat Rate or Free Delivery.
As I understand it, I do not have automatic updating of shipping methods depending on the filling of the fields.
I found and edited this code:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout() {
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$('#billing_address_1').click(function(){
jQuery('body').trigger('update_checkout', { update_shipping_method: true });
});
});
</script>
<?php
}
}
But until I click on the filled field a second time, the delivery method is not updated.
I want to connect with AJAX. How can I edit the code so that the result of using AJAX is visible immediately without clicking on the filled field again?

Answer 1

Currently you have to click on the billing_address_1 field in order to trigger the event listener and update your fields, because your code says so!
There are multiple ways to solve the issue. For example, instead of listening for a click event, you could add a different event listener.
To start off, you could listen for an on change event. This will happen when the value of the address field has been changed and the user clicked/tabbed out of the billing_address_1 field:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('change', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
Another event listener you could use here is input event listener. This will happen every time the value of billing_address_1 field is being changed. This will fire off even with a press of the space key, backspace key etc.
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('input', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
Another event that could be helpful here is on blur event. This event will fire off when the user clicks/tabs out of the billing_address_1 field. The difference between this event and on change event is that when you listen for this event, update will happen even when the value of the billing_address_1 field has not been changed.
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('blur', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
Now depending on how you'd like to structure your code and the logic behind it, you could use these events at the same time:
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('#billing_address_1').on('change input blur', () => {
$('body').trigger('update_checkout', {
update_shipping_method: true
});
});
});
</script>
<?php
}
}
How can I edit the code so that the result of using AJAX is visible immediately without clicking on the filled field again?
I think the last solution is what you're looking for! Using all of those event listeners together will make sure that your shipping method is getting updated constantly.