WooCommerce - Declanșare Validare Formular Checkout

Am întâlnit această situație de câteva ori, încă nu am găsit o metodă simplă și directă de a o gestiona. Dar iată ce am făcut în trecut.

Puteți declanșa validarea checkout-ului ușor prin forțarea unui click pe butonul de trimitere.

    $('#myButton').on('click', function(){
        $('#place_order').click();
    });

Cu toate acestea, acest lucru nu este foarte util pentru dvs. deoarece va trimite pur și simplu comanda dacă nu există erori.

Există și callback-ul checkout_error, dar acesta este declanșat doar dacă există o eroare.

    $(document.body).on('checkout_error', function () {
        // A apărut o eroare de validare
    });

Iată ce trebuie să facem.

• Detectați când butonul de trimitere este apăsat
• Verificați dacă există erori
• Dacă există erori, lăsați Woo să le gestioneze în mod normal
• Dacă nu există erori, opriți finalizarea comenzii
• Afișați iframe-ul dvs.
• ... Re-validați / Retrimiteți comanda

Imediat ce butonul de trimitere este apăsat, putem adăuga un câmp ascuns și seta valoarea la 1. Putem detecta evenimentul de trimitere folosind checkout_place_order. Acest cod ar trebui să fie în fișierul dvs. 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;
});

Acum, adăugați o funcție în functions.php care va verifica acel input ascuns și va opri comanda dacă valoarea == 1. Opresc comanda prin adăugarea unei erori.

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

Înapoi în fișierul nostru JS, putem folosi callback-ul checkout_error, dacă are 1 eroare, știm că a fost eroarea falsă pe care am creat-o, așa că putem afișa iframe-ul. Dacă are mai mult de 1 eroare, înseamnă că există alte erori reale pe pagină.

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

    if (error_count == 1) { // Validarea a trecut (Doar Eroarea Falsă Există)
        // Afișați iFrame
    }else{ // Validarea a eșuat (Există Erori Reale, Eliminați-o pe cea Falsă)
        $('.woocommerce-error li').each(function(){
            var error_text = $(this).text();
            if (error_text == 'custom_notice'){
                $(this).css('display', 'none');
            }
        });
    }
});

În secțiunea comentată, // Afișați iFrame, probabil aș deschide-o într-un lightbox. La un moment dat, veți avea nevoie de un alt buton de trimitere care declanșează trimiterea formularului și setează input-ul ascuns.

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

Am luat o decizie rapidă și simplă în JavaScript pentru acest caz (existau formulare WooCommerce și Stripe). Aceasta se bazează pe prevenirea trimiterii butonului de finalizare comandă, dar totuși efectuează verificările formularului.

// crearea evenimentului de click pe elementul dinamic

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

    // intervalul principal unde se vor întâmpla toate acțiunile

    var validatoins = setInterval(function(){ 

        // verificarea erorilor

        if(no_errors==0){ 

        // crearea funcției setTimeout() cu timp limitat, de exemplu 200ms 
        // pentru a limita funcția de finalizare la doar verificare

        setTimeout(function(){ 

            // declanșarea butonului original

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

            // dacă există erori, oprește intervalul, returnează 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){    

            // aceeași verificare a erorilor

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

                // dacă există erori, oprește intervalul, returnează false

                clearInterval(validatoins);
                return false; 
            }


            setTimeout(function(){

                // dacă nu există erori

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

                    // fă ceva, marchează ca finalizat

                    return false;
                }
            }, 1000);


            // dacă ceva s-a finalizat

            if() {

                setTimeout(function(){

                    // declanșează click-ul original de finalizare

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

            }

        }

    }, 1000);
}