dq804806 2018-10-09 09:43
浏览 334
已采纳

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

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.

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
});

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...

  • 写回答

2条回答 默认 最新

  • douyingyu5573 2018-10-12 09:30
    关注

    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.

    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;
    });
    

    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');
    

    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');
                }
            });
        }
    });
    

    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');
    });
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 怎么实现数组的循环累加,simulink
  • ¥15 51单片机最小开发板系统,想让寻迹小车在全检测到黑线(寻迹模块代码在第一块板子上)时蜂鸣器响(在第二块板子上)
  • ¥15 pbootcms多选调用成列表
  • ¥15 51单片机oled显示时钟
  • ¥15 小规模TSP问题的动态规划求解
  • ¥25 kubelet.service: Failed with result 'exit-code'.
  • ¥15 bitvise黑框内一键部署v2ray提示账户没有root怎么解决
  • ¥15 车型识别以及相似度匹配中细节特征提取以及图像模糊问题
  • ¥15 怎么用鸿蒙的ArkTs写出来啊
  • ¥30 websocket服务端多线程通信
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部