Introduzione
Lo so, sembra incredibile ma alle soglie del 2023 WooCommerce non ha ancora implementato uno dei campi più utili in un e-commerce che si rispetti, ossia il campo per la conferma dell’indirizzo E-mail. Uno degli errori più comuni in fase d’ordine negli e-commerce infatti è proprio l’errato inserimento del contatto E-mail, e quando succede la cosa che spesso ci viene chiesta come sviluppatori è di integrare un campo specifico per sopperire a tale mancanza.
A complicare le cose, oltre ai diecimila (per sparare una cifra che renda l’idea) Hooks di WC, spesso ci si mette anche la logica con cui alcuni plugin di terze parti sono stati sviluppati.
Il problema
Recentemente mi è successo di dover assolvere a tale compito su un E-commerce già avviato che sfruttava il plugin Fluid Checkout for WooCommerce, il quale non incorpora tale possibilità nemmeno nella sua versione PRO. La documentazione dice di sfruttare “Checkout Field Editor” by ThemeHigh, ma poi il problema è che quest’ultimo non era più compatibile con altri plugin (nel mio caso con WooCommerce Fattureincloud Premium).
Analizzando la necessità che cosa serviva? Un semplice campo clone del classico “billing_email” che potesse essere confrontato e richiamasse l’attenzione dell’utente obbligandolo a non sbagliare per poter proseguire. Visto che tramite codice PHP i tentativi di ottenere un risultato soddisfacente sono andati a vuoto, ho pensato di aggirare il problema con molta ignoranza forzando il tutto con un po’ di codice jQuery.
La soluzione
La prima cosa da fare è creare un file tipo “wc_checkout.js” nel vostro tema child, ad esempio nella cartella /js/.
All’interno del file wc_checkout.js incolliamo il codice sottostante:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | jQuery.noConflict()(function($) { "use strict"; function email_invalid() { $('.fc-step__substep-save').attr('disabled', true); $('.invalid-email-confirmation').show(); $('.billing_email_ver').removeClass('woocommerce-validated'); $('.billing_email_ver').addClass('woocommerce-invalid-email woocommerce-invalid'); $('.billing_email_ver input').css('border-color', '#cc1818'); } function email_valid() { $('.invalid-email-confirmation').hide(); $('.fc-step__substep-save').attr('disabled', false); $('.billing_email_ver').removeClass('woocommerce-invalid-email woocommerce-invalid'); $('.billing_email_ver').addClass('woocommerce-validated'); $('.billing_email_ver input').css('border-color', '#007a3d'); } function email_check() { let billing_email = $('#billing_email').val(); let billing_email_ver = $('#billing_email_ver').val(); if (billing_email_ver != billing_email) { //console.log('mismatch email'); email_invalid(); } else { email_valid(); } } $(document).ready(function() { /* construct element */ let billing_email = $('#billing_email').val(); $('#billing_email').after('<p class="form-row form-row-wide has-description woocommerce-validated validate-required validate-email billing_email_ver" id="billing_email_ver_field" data-priority="6" style="padding-top:20px;"><label for="billing_email_ver" class="">Conferma indirizzo email <abbr class="required" aria-label="(Obbligatorio)" title="obbligatorio">*</abbr></label><span class="woocommerce-input-wrapper"><input required="" aria-required="true" type="email" class="input-text " name="billing_email_ver" id="billing_email_ver" placeholder="" value="' + billing_email + '" data-autocomplete="contact email" data-mailcheck="1" autocomplete="contact email" aria-describedby="billing_email-description"><span class="woocommerce-error invalid-email-confirmation" style="display:none;">L\'indirizzo e-mail non corrisponde.</span></span></p>'); //then check it email_check(); $('#billing_email_ver').keyup(function() { email_check(); }); $('#billing_email_ver').blur(function() { email_check(); }); $('#billing_email_ver').change(function() { email_check(); }); }); }); |
Nel nostro style.css aggiungiamo questa regola:
1 2 3 | div.woocommerce form .form-row.billing_email_ver.woocommerce-invalid:not([class*=woocommerce-validated]):not(.fc-no-validation-icon):not(.fc-select2-field) .woocommerce-input-wrapper:after { display:none!important; } |
E infine richiamiamo il file .js nel nostro functions.php aggiungendo in questo file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | add_action('wp_enqueue_scripts', 'hw_load_wc_custom_checkout_functions', 99); function hw_load_wc_custom_checkout_functions() {</pre> //GLOBALS THEME $hw_theme_object = wp_get_theme(); #DEFINE CONSTANTS define('THEME_PATH', get_bloginfo('stylesheet_directory')); define('THEME_VERSION', $hw_theme_object->get( 'Version' )); $jquery = array('jquery-core'); if (is_checkout()) { wp_enqueue_script('my-wc-custom-checkout-script', THEME_PATH . '/js/wc_checkout.js', $jquery, THEME_VERSION, $footer); } } |
Il risultato
Il risultato finale con Fluid Checkout è questo:
