时间戳

首页 > 解决方案 > WooCommerce 根据帐单地址字段更改更新运输方式

php - WooCommerce 根据帐单地址字段更改更新运输方式

问题描述

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

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

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

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

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 的结果，而无需再次单击填充的字段？

标签： phpwordpresswoocommercecheckoutwoocommerce-theming

解决方案

目前，您必须click在billing_address_1字段上触发事件侦听器并更新您的字段，因为您的代码是这样说的！

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

首先，您可以监听 onchange事件。当地址字段的值已更改并且用户单击/选项卡离开该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

  }

}

另一个可能对这里有帮助的事件是 on blurevent。当用户点击/标签离开该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

  }

}

如何编辑代码以便立即看到使用 AJAX 的结果，而无需再次单击填充的字段？

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

推荐阅读