【问题标题】:WooCommerce updating the shipping method depending on the billing address field changesWooCommerce 根据帐单地址字段更改更新运输方式
【发布时间】:2021-08-26 11:27:30
【问题描述】:

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

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

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

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

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 的结果立即可见,而无需再次单击填充的字段?

【问题讨论】:

  • 您使用哪个插件进行远程递送?
  • 感谢您的评论。但是问题已经解决了。我们通过 Draw for WooCommerce 插件购买了运输区的专业版。这不是广告。

标签: php wordpress woocommerce checkout woocommerce-theming


【解决方案1】:

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

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

首先,您可以监听 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('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 事件上可能有帮助的另一个事件。 当用户点击/标签离开billing_address_1 字段时,此事件将触发。这个事件和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 的结果立即可见,而无需再次单击填充的字段?

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

【讨论】:

  • 非常感谢您的回答和帮助!代码的最后一个版本运行良好。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-11-28
  • 2018-04-27
  • 2018-08-13
  • 2016-12-08
  • 2016-08-07
  • 2017-11-09
  • 1970-01-01
相关资源
最近更新 更多