WooCommerce提交订单无法等待用户确认问题求助

• 需求：WooCommerce店铺中，用户点击「提交订单」按钮时，先调用地址验证API，等待API响应后弹出模态框，用户确认地址后再提交订单。
• 现状：订单不等待API响应和用户确认，API调用完成弹窗显示后，页面直接跳转提交订单；尝试event.preventDefault()无法阻止表单提交，解绑woocommerce_review_order_after_submit与woocommerce_checkout_process钩子也无效。

async function validateAddress() {
    // 构造请求体
    const requestBody = JSON.stringify({
        address: {
            regionCode: 'us',
            postalCode: 01234,
            administrativeArea: 'someState',
            locality: 'someCity',
            addressLines: ['someAddress']
        },
    });
    try {
        const response = await fetch('/wp-content/themes/almadelic-theme/google_maps_proxy.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(requestBody)
        });

        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        } else {
            jQuery('#addressModal').show();
        }

    } catch (error) {
        return false; // 表示验证失败
    }
}

jQuery(document).ready(function($) {

    // 添加弹窗模态框
    $('body').append(`
        <div id="addressModal" class="modal">
            <div class="modal-content">
                <p id="modalMessage">${message}</p>
                <br>
                <div id="buttonContainer">
                        <button id="confirmButton">Yes, this address is correct</button>
                        <button id="changeButton">No, let me change the address</button>
                    </div>
            </div>
        </div>
    `);
    

    if (typeof validateAddress === 'function') {
        $(document).on('click', '.wc-block-components-checkout-place-order-button', async function(event) {
            
            event.preventDefault();             // 本应阻止订单提交，但未生效
            var isValid = await validateAddress();      // 函数已执行，模态框显示，但订单在用户确认前已提交

            // 验证失败则阻止提交
            if (!isValid) {
                alert('Please correct the address errors before placing your order.');
            } else {
                document.getElementById('checkout_form').submit();
            }
        });
    } else {
        console.log('validateAddress function is not found. Please verify the function name and scope.');
    }
});

1. event.preventDefault()失效原因
   你绑定的是块编辑器版结账按钮（.wc-block-components-checkout-place-order-button），这个按钮内置了WooCommerce的异步提交逻辑，单纯的preventDefault()无法阻断默认行为。需要添加event.stopImmediatePropagation()阻止后续绑定的事件执行，同时确保你的事件绑定时机早于WooCommerce的默认事件。

2. validateAddress未等待用户确认
   当前函数在显示模态框后直接结束，await validateAddress()会立即得到undefined（成功分支无return），导致代码直接进入提交分支。需要将模态框的用户交互包装成Promise，让函数等待用户点击按钮后再返回结果。

3. 表单提交方式错误
   直接调用document.getElementById('checkout_form').submit()会绕过WooCommerce的内置验证和钩子逻辑，应该触发表单的原生提交事件，确保所有流程钩子正常执行。

// 重构validateAddress，返回Promise等待用户确认
function validateAddress() {
    return new Promise(async (resolve) => {
        const requestBody = JSON.stringify({
            address: {
                regionCode: 'us',
                postalCode: 01234,
                administrativeArea: 'someState',
                locality: 'someCity',
                addressLines: ['someAddress']
            },
        });
        try {
            const response = await fetch('/wp-content/themes/almadelic-theme/google_maps_proxy.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: requestBody // 修正原代码重复JSON.stringify的问题
            });

            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            } else {
                jQuery('#addressModal').show();
                // 绑定模态框按钮事件（先解绑避免重复绑定）
                jQuery('#confirmButton').off('click').on('click', () => {
                    jQuery('#addressModal').hide();
                    resolve(true); // 用户确认，返回验证通过
                });
                jQuery('#changeButton').off('click').on('click', () => {
                    jQuery('#addressModal').hide();
                    resolve(false); // 用户取消，返回验证失败
                });
            }
        } catch (error) {
            console.error(error);
            resolve(false); // API调用失败，返回验证失败
        }
    });
}

jQuery(document).ready(function($) {

    // 添加弹窗模态框
    $('body').append(`
        <div id="addressModal" class="modal">
            <div class="modal-content">
                <p id="modalMessage">${message}</p>
                <br>
                <div id="buttonContainer">
                        <button id="confirmButton">是的，地址正确</button>
                        <button id="changeButton">不，我要修改地址</button>
                    </div>
            </div>
        </div>
    `);
    
    if (typeof validateAddress === 'function') {
        $(document).on('click', '.wc-block-components-checkout-place-order-button', async function(event) {
            // 彻底阻断默认行为和后续事件
            event.preventDefault();
            event.stopImmediatePropagation();
            event.stopPropagation();

            const isValid = await validateAddress();

            if (!isValid) {
                alert('请修正地址错误后再提交订单。');
                return;
            }

            // 触发WooCommerce原生提交逻辑
            $(this).closest('form').trigger('submit');
        });
    } else {
        console.log('未找到validateAddress函数，请检查函数名称和作用域。');
    }
});

• 给模态框添加半透明背景和点击空白处关闭的逻辑，提升用户体验。
• 在API调用过程中给提交按钮添加加载状态（禁用按钮+加载动画），防止用户重复点击。
• 后端添加双重验证：使用WooCommerce的woocommerce_checkout_process钩子，在用户未确认地址时拦截提交：

  add_action('woocommerce_checkout_process', 'temp_block_checkout_until_address_confirmed');
  function temp_block_checkout_until_address_confirmed() {
      session_start();
      if (!isset($_SESSION['address_confirmed']) || $_SESSION['address_confirmed'] !== true) {
          wc_add_notice('请确认您的地址信息', 'error');
      }
  }
  

  然后在用户点击确认按钮时，通过AJAX设置$_SESSION['address_confirmed'] = true，确保后端也能拦截未确认的提交。

内容的提问来源于stack exchange，提问作者jon P