无法让 WooCommerce 提交订单等待用户确认

Question

当我的用户在我的 WooCommerce 商店中点击“提交订单”按钮时，我正在尝试调用 API。订单应等待 API 响应并等待用户在提交之前在弹出模式中确认。

相反，它似乎也没有等待。 API 调用首先完成，然后显示用户确认弹出窗口，但在用户与模式交互之前，订单已提交，我们将被重定向到另一个页面。

我尝试过“event.preventDefault()”，但这似乎并没有阻止表单提交和页面重定向。我还尝试取消附加到 woocommerce_review_order_after_submit 和 woocommerce_checkout_process 挂钩的所有内容，试图阻止提交按钮工作。任何见解都会成为传奇

下面是我的代码的简化版本

async function validateAddress() {
    // Construct the request body
    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; // Indicating validation failed
    }
}

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

    //Add the popup modal
    $('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();             //SHOULD prevent the order from submitting
            var isValid = await validateAddress();      //This function does fire, and its modal displays, but the order submits before the user can confirm the details in the popup modal

            // Prevent form submission if validation fails
            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.');
    }
});

Answer 1

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

    //Add the popup modal
    $('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>
    `);
    
    // Function to validate address
    async function validateAddress() {
        // Construct the request body
        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 {
                return true; // Address is valid
            }
        } catch (error) {
            return false; // Indicating validation failed
        }
    }

    // Event listener for place order button
    $(document).on('click', '.wc-block-components-checkout-place-order-button', async function(event) {
        event.preventDefault(); // Prevent default form submission
        
        // Validate address
        var isValid = await validateAddress();
        
        // Display modal if address is valid
        if (isValid) {
            $('#addressModal').show();
        } else {
            alert('Please correct the address errors before placing your order.');
        }
    });

    // Event listener for confirm button in modal
    $(document).on('click', '#confirmButton', function(event) {
        event.preventDefault(); // Prevent default button behavior
        
        // Submit order form
        document.getElementById('checkout_form').submit();
    });

    // Event listener for change button in modal
    $(document).on('click', '#changeButton', function(event) {
        event.preventDefault(); // Prevent default button behavior
        
        // Hide modal or perform any other action
        $('#addressModal').hide();
    });
});