在验证之后但在Woocommerce Checkout中创建订单之前进行挂钩 [英] Hooking After Validation but Before Order Create in Woocommerce Checkout

问题描述

我正在尝试在结帐中创建一个步骤，以确认您的订单.我在想，当单击 AND 的下单按钮时，结帐字段有效，我可以运行一些JS来显示模式或其他内容.

I am trying to create a step in checkout to confirm your order. I'm thinking when the place order button is clicked AND the checkout fields are valid I could run some JS to show a modal or whatever.

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

Is there a JS trigger/event similar to checkout_place_order that runs after validation? For example, I can use the following but it happens before validation. Maybe there is a way to trigger validation from inside there and display my modal based off that?

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 钩子，但是我不确定如何利用它来实现我的目标.

There is also the woocommerce_after_checkout_validation hook but I am not sure how to utilize it to achieve what I'm after.

我愿意接受想法...

I am open to ideas...

推荐答案

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

I was able to figure this out finally, Its more of a workaround since I don't think there is a clear way to do this.

点击下订单"按钮后，我们将使用checkout_place_order事件放置一个值为1的隐藏字段.

As soon as the "Place Order" button is clicked, we use the checkout_place_order event to place a hidden field with a value set to 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，则添加错误(这将阻止订单执行).

Next, we use the hook woocommerce_after_checkout_validation to check our hidden input and if the value is 1 add in error (This stops the order from going through).

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个错误，则表示已通过验证，因此我们可以显示模态(或您需要执行的任何操作).

Last, we use the checkout_error event to determine if there was a real validation or if if there is only 1 error, the error we added. If there is only 1 error it means validation passed so we can show our modal (or whatever you need to do).

$(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的隐藏输入值.

Inside my modal I have a confirm button that sets our hidden field value to nothing and clicks the place order button again. This time the order will go through because we are checking for the hidden input value of 1.

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

这篇关于在验证之后但在Woocommerce Checkout中创建订单之前进行挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！