在验证之后但在 Woocommerce Checkout 中创建订单之前挂钩

Question

我正在尝试创建一个结帐步骤以确认您的订单。点击Place Order按钮时，我想和结账的字段都有效，我可以运行一些JS来显示一个模式或什么的。

是否有类似于 checkout_place_order 的 JS 触发器/事件在验证后运行？例如，我可以使用以下内容，但它发生在验证之前。也许有一种方法可以从内部触发验证并基于此显示我的模态？

var checkout_form = $('form.checkout');

checkout_form.on('checkout_place_order', function () {

    // do your custom stuff

    return true; // continue to validation and place order
    return false; // doesn't validate or place order
});

还有woocommerce_after_checkout_validation挂钩，但我不确定如何利用它来实现我所追求的目标。

我对想法持开放态度...

Answer 1

我终于能够弄清楚这一点，这更多是一种解决方法，因为我认为没有明确的方法可以做到这一点。

单击“下订单”按钮后，我们使用 checkout_place_order 事件放置一个值设置为 1 的隐藏字段。

var checkout_form = $('form.checkout');

checkout_form.on('checkout_place_order', function () {
    if ($('#confirm-order-flag').length == 0) {
        checkout_form.append('<input type="hidden" id="confirm-order-flag" name="confirm-order-flag" value="1">');
    }
    return true;
});

接下来，我们使用钩子 woocommerce_after_checkout_validation 来检查我们的隐藏输入，如果值为 1，则添加错误（这会阻止订单通过）。

function add_fake_error($posted) {
    if ($_POST['confirm-order-flag'] == "1") {
        wc_add_notice( __( "custom_notice", 'fake_error' ), 'error');
    } 
}

add_action('woocommerce_after_checkout_validation', 'add_fake_error');

最后，我们使用 checkout_error 事件来确定是否存在真正的验证，或者是否只有 1 个错误，即我们添加的错误。如果只有 1 个错误，则表示验证通过，因此我们可以显示我们的模态（或您需要做的任何事情）。

$(document.body).on('checkout_error', function () {
    var error_count = $('.woocommerce-error li').length;

    if (error_count == 1) { // Validation Passed (Just the Fake Error I Created Exists)
        // Show Confirmation Modal or Whatever
    }else{ // Validation Failed (Real Errors Exists, Remove the Fake One)
        $('.woocommerce-error li').each(function(){
            var error_text = $(this).text();
            if (error_text == 'custom_notice'){
                $(this).css('display', 'none');
            }
        });
    }
});

在我的模态中，我有一个确认按钮，它将我们的隐藏字段值设置为空，然后再次单击下订单按钮。这次订单将通过，因为我们正在检查隐藏的输入值 1。

$('#confirm-order-button').click(function () {
    $('#confirm-order-flag').val('');
    $('#place_order').trigger('click');
});