WooCommerce 根据账单地址字段的变化更新送货方式

Question

在我的在线商店中，有两种标准的送货方式 - 统一邮资和免费送货。我添加了一个远程交付插件。

因此，当客户在下订单时填写城市和地址字段时，必须添加新的运输方式。但是在我 select 固定费率或免费送货之前，新的送货是不可见的。

据我了解，我没有根据字段的填写自动更新送货方式。

我找到并编辑了这段代码：

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
    }
}

但是直到我第二次点击填写的字段，交付方式才更新。

我想联系 AJAX。如何编辑代码，以便在不再次单击填充字段的情况下立即看到使用 AJAX 的结果？

Answer 1

目前您必须在 billing_address_1 字段上 click 才能触发事件侦听器并更新您的字段，因为您的代码如此规定！

有多种方法可以解决这个问题。例如，您可以添加不同的事件侦听器，而不是侦听 click 事件。

首先，您可以监听 on change 事件。当地址字段的值已更改并且用户 clicked/tabbed 不在 billing_address_1 字段:

时，将发生这种情况
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 } }

您可以在此处使用的另一个事件侦听器是 input 事件侦听器。每次更改 billing_address_1 字段的值时都会发生这种情况。即使按下 space 键、backspace 键等也会触发

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 } }

另一个可能对这里有帮助的活动是 blur 活动。当用户 clicks/tabs 离开 billing_address_1 字段 时，此事件将触发 。此事件与 on change 事件的区别在于，当您侦听此事件时，即使 billing_address_1 字段的值未更改，也会进行更新。

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 } }

现在，根据您希望如何构建代码及其背后的逻辑，您可以同时使用这些事件：

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?

我认为最后一个解决方案就是您要找的！一起使用所有这些事件侦听器将确保您的送货方式不断更新。

WooCommerce 根据账单地址字段的变化更新送货方式

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

php

wordpress

woocommerce

checkout

woocommerce-theming