WooCommerce-触发结账表单验证

时间:2018-12-19 作者:Omer

我一直在四处寻找答案,但没有找到任何答案。

我正在创建iframe 当iframe加载到签出页面内时,支付网关。我的目标是,一旦客户单击某个按钮,就会触发验证客户已填写所有必需输入的功能,如果返回true iframe加载。

否则,将触发验证功能的通知。

我发现该函数是一个名为update_checkout_action 内部wc_checkout_form

希望这是足够的信息,如果需要更多,请让我知道,我会提供。

谢谢

2 个回复
SO网友:RiddleMeThis

我遇到过几次这种情况,我还没有找到一种直接的处理方法。但这是我过去所做的。

您可以通过强制单击提交按钮轻松触发签出验证。

    $(\'#myButton\').on(\'click\', function(){
        $(\'#place_order\').click();
    });
然而,这对您来说并不是很有用,因为如果没有错误,它只会提交订单。

还有checkout\\u error回调,但它仅在出现错误时才会触发。

    $(document.body).on(\'checkout_error\', function () {
        // There was a validation error
    });
这是我们需要做的。

单击提交按钮时检测是否有错误如果有错误,让Woo正常处理如果没有错误,停止完成订单显示iframe。。。重新验证/重新提交订单单击提交按钮后,我们可以添加一个隐藏字段并将值设置为1。我们可以使用checkout\\u place\\u order检测提交事件。这应该放在JS文件中。

var checkout_form = $(\'form.woocommerce-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;
});
现在,向函数添加一个函数。php,它将检查隐藏的输入,并在值==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\');
回到JS文件中,我们可以使用checkout\\u错误回调,如果它有1个错误,我们知道这是我们创建的伪错误,因此我们可以显示iframe。如果有超过1个错误,则表示页面上还有其他实际错误。

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

    if (error_count == 1) { // Validation Passed (Just the Fake Error Exists)
        // Show iFrame
    }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\');
            }
        });
    }
});
在注释掉的部分中,//Show iFrame,我可能会在lightbox中打开它。有时,您需要另一个提交按钮来触发表单提交并设置隐藏输入。

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

SO网友:Zak the Gear

在这个案例中,我自己得到了一个快速而简单的JS决策(有woocommerce和stripe表单)。这是基于阻止签出按钮提交,但仍然进行表单验证。

// making the wrap click event on dinamic element

$(\'body\').on(\'click\', \'button#place_order_wrap\', function(event) { 

    // main interval where all things will be 

    var validatoins = setInterval(function(){ happen

        // checking for errors

        if(no_errors==0){ 

        // making the setTimeout() function with limited time like 200ms 
        // to limit checkout function for just make verification

        setTimeout(function(){ 

            // triggering original button

            $(\'button#place_order\').click(); 

            // if there some errors, stop the interval, return false

            if(($(\'element\').find(\'ul.woocommerce_error\').length!==0)||($(\'element\').find(\'.woocommerce-invalid-required-field\').length!==0)){ 

                    clearInterval(validatoins);
                    return false;

                }else{

                    no_errors=1;

                }
            }, 200);
        }


        if(no_errors==1){    

            // same error checking

            if($(\'#step5\').find(\'ul.woocommerce_error\').length!=0||($(\'#step5\').find(\'.woocommerce-invalid-required-field\').length!==0)){ 

                // if there some errors, stop the interval, return false

                clearInterval(validatoins);
                return false; 
            }


            setTimeout(function(){

                // if no errors

                if(($(\'#step5\').find(\'ul.woocommerce_error\').length==0)&&($(\'#step5\').find(\'.woocommerce-invalid-required-field\').length==0)){ 

                    // do something, mark that finished

                    return false;
                }
            }, 1000);


            // if something finished

            if() {

                setTimeout(function(){

                    // trigger original checkout click

                    $(\'button#place_order\').click(); 
                    clearInterval(validatoins);
                }, 1000);

            }

        }

    }, 1000);
}

相关推荐