WooCommerce conditional custom checkout fields

2019-01-20 18:27发布

问题:

In WooCommerce, I'm currently trying to add a conditional custom field in the Checkout that shows a checkbox which if is checked displays an input field to insert an italian fiscal code (Codice Fiscale).

Thanks to various guides and plugin codes I was able to show it in the checkout but i'm doing something wrong with the code and having several issues:

  1. By default i would like it to be NON required field, only if its checked it must become required.
  2. If i try to proceed to cart inserting a valid or non codice fiscale i get this error "SyntaxError: Unexpected token < in JSON at position 0" where my theme usually shows checkout errors.
  3. Display all this only in Italian Language (with WPML)
  4. I can't know further errors while i can't solve the first two points.

Note: The Italian law requires that if a private customer asks for an invoice he must insert also his (valid) "codice fiscale" (fiscal code).

To avoid complications, I didn't insert any advanced checking tools (that would require more fields, such as birthday). Instead I've set this short control via pattern tag:

jQuery('#cf_in').prop('pattern', "^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$");

I've found it on internet but don't really know if it can work. I have alslo this one too:

function isCodiceFiscaleValid($valore,$codice_fiscale = true){
    $espressione = "^[a-z]{6}[0-9]{2}[a-z][0-9]{2}[a-z][0-9]{3}[a-z]$";
    if(!$codice_fiscale){
        $espressione = "^[0-9]{11}$";
    }
    if ( eregi($espressione, $valore) )
    {
        return true;
    }
    return false;
}

After checking, once the inserted "Codice fiscale" (fiscal code) is good, we can proceed to checkout, displaying for customer and admin this "codice fiscale".

I would need additionally to print this on a PDF invoice using WooCommerce PDF Invoices & Packing Slips Pro plugin (commercial version).

References here (unfortunately can only post 2):

  • Link1 (custom plugin),
  • Link2 (JS check, note there's also php check in the same website)

Here the code (added in my theme's functions.php file):

add_filter( 'woocommerce_checkout_fields' , 'cbi_cf_chkbox' );

function cbi_cf_chkbox ( $fields ) {
    if ( ICL_LANGUAGE_CODE=='it' )
    $fields['billing']['checkbox_trigger'] = array(
    'type'      => 'checkbox',
    'label'     => __('Voui la fattura? (solo per privati)', 'cbi-custom-parts'),
    'class'     => array('form-row-wide'),
    'clear'     => true
     ); 

    $fields['billing']['cf_in'] = array(
    'label'     => __('Inserisci il codice fiscale', 'cbi-custom-parts'),
    'placeholder'   => _x('RSSMRA85T10A562S', 'placeholder', 'cbi-custom-parts'),
    'class'     => array('display-none form-row-wide'),
    'clear'     => true
     );
    return $fields;
}

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);

function cbi_cf_conditionally_hide_show() {
   if ( ICL_LANGUAGE_CODE=='it' )
  ?>
    <script type="text/javascript">
        jQuery('input#checkbox_trigger').change(function(){           
            if (this.checked) {
                jQuery('#cf_in_field').fadeIn();
                jQuery('#cf_in_field').attr('required', true);
                jQuery('#cf_in').prop('pattern', "^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$");
            } else {
                jQuery('#cf_in_field').fadeOut();
                jQuery('#cf_in_field input').val('');
                jQuery('#cf_in_field').attr('required', false);
            }
        });
    </script>
    <?php
}
function isCodiceFiscaleValid($valore,$codice_fiscale = true){
    $espressione = "^[a-z]{6}[0-9]{2}[a-z][0-9]{2}[a-z][0-9]{3}[a-z]$";
    if(!$codice_fiscale){
        $espressione = "^[0-9]{11}$";
    }
    if ( eregi($espressione, $valore) )
    {
        return true;
    }
    return false;
}

/*
 * This method processes fields of checkout form
 */
add_action('woocommerce_checkout_process', 'cbi_cf_process');
function cbi_cf_process() {
    if (! empty($_POST['cf_in']) ){
        $valid_codice_fiscale = isCodiceFiscaleValid($_POST['cf_in'],true);

        if( (!$valid_codice_fiscale) ){
            wc_add_notice( 'Wrong data in Codice Fiscale/Partita Iva field', 'error' );
        }
    }
}

/*
 * This method saves codice fiscale data in order meta and in user meta
 */
add_action( 'woocommerce_checkout_update_order_meta', 'cbi_cf_in_update_order_meta' );
function cbi_cf_in_update_order_meta ( $order_id ) {
    if ( ! empty( $_POST['cf_in'] ) ) {
        update_post_meta( $order_id, 'cf_in', sanitize_text_field( $_POST['cf_in'] ) );
        $order = new WC_Order($order_id);
        update_user_meta($order->user_id, 'cf_in', sanitize_text_field( $_POST['cf_in'] ) );
    }
}

/*
 * This method shows the value of Partita Iva field after billing address
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'cbi_cf_admin_order_data_after_billing_address', 10, 1 );
function cbi_cf_admin_order_data_after_billing_address($order){
    echo '<p><strong>'.__('Codice Fiscale', 'cbi-cf-invoice').':</strong> ' . get_post_meta( $order->id, 'cf_in', true ) . '</p>';
}

I will really appreciate if you could help me here.

回答1:

In this answer I can't treat PDF invoice, so you will get here:

  • Solving the problem of conditional "required" field (point 1)
  • Solving the problem of the json error (point 2)
  • Displayed only for italian language (point 3)

Additionally I have:

  • Revisited all your code and corrected many little errors.
  • Added code to display and edit the backend user profile custom field value "codice fiscale":

Here is the code:

add_filter( 'woocommerce_checkout_fields' , 'cbi_cf_chkbox' );
function cbi_cf_chkbox ( $fields ) {
    if ( ICL_LANGUAGE_CODE !='it' ) return $fields; // Only for Italy

    $fields['billing']['checkbox_cf'] = array(
        'type'      => 'checkbox',
        'label'     => __('Voui la fattura? (solo per privati)', 'cbi-custom-parts'),
        'class'     => array('form-row-wide'),
        'clear'     => true
     );

    $fields['billing']['cf_in'] = array(
        'label'     => __('Inserisci il codice fiscale', 'cbi-custom-parts'),
        'placeholder'   => _x('RSSMRA85T10A562S', 'placeholder', 'cbi-custom-parts'),
        'class'     => array('form-row-wide'),
        'clear'     => true
     );

    return $fields;
}

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#cf_in_field > #cf_in').prop('pattern', "^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$"); // Doesn't seem to do something
            $('#cf_in_field').hide();

            $('input#checkbox_cf').change(function(){
                if (this.checked) {
                    $('#cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#cf_in_field > label').append(required);
                    });
                } else {
                    $('#cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#cf_in_field > label > .required').remove();
                    });
                }
                $('#cf_in_field').val('');
                $('#cf_in_field').removeClass("woocommerce-validated");
                $('#cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

// Utility function checking "codice fiscale" validity
function is_cf_valid( $valore, $codice_fiscale = true ){
    $espressione = "^[a-z]{6}[0-9]{2}[a-z][0-9]{2}[a-z][0-9]{3}[a-z]$";
    if( ! $codice_fiscale ) $espressione = "^[0-9]{11}$";
    return eregi( $espressione, $valore ) ? true : false;
}

// Check custom fields value "codice fiscale" when submit and return error notices (if needed)
add_action('woocommerce_checkout_process', 'cbi_cf_process');
function cbi_cf_process() {
    if ( isset($_POST['checkbox_cf']) && $_POST['checkbox_cf'] == 1 ) {
        if( empty( $_POST['cf_in'] ) ) {
            wc_add_notice( __( "Please don't forget to enter your Codice Fiscale/Partita Iva", "cbi-custom-parts" ), "error" );
        } else {
            $valid_codice_fiscale = is_cf_valid( $_POST['cf_in'] );
            if( ( ! $valid_codice_fiscale ) )
                wc_add_notice( __( "Wrong data in Codice Fiscale/Partita Iva field", "cbi-custom-parts" ), "error" );
        }
    }
}

// Save the custom field value "codice fiscale" in order meta and in user meta
add_action( 'woocommerce_checkout_update_order_meta', 'cbi_cf_in_update_order_meta' );
function cbi_cf_in_update_order_meta ( $order_id ) {
    if ( empty( $_POST['cf_in'] ) ) return;

    $customer_id = get_post_meta( $order_id, '_customer_user', true );
    $user_codice_fiscale = get_user_meta( $order_id, 'codice_fiscale', true );

    if( ! empty( $user_codice_fiscale ) )
        update_user_meta($order->user_id, 'codice_fiscale', sanitize_text_field( $_POST['cf_in'] ) );

    update_post_meta( $order_id, '_codice_fiscale', sanitize_text_field( $_POST['cf_in'] ) );
}

// Backend : Display in Order edit pages, after billing address, the custom field value "codice fiscale"
add_action( 'woocommerce_admin_order_data_after_billing_address', 'cbi_cf_admin_order_data_after_billing_address', 10, 1 );
function cbi_cf_admin_order_data_after_billing_address( $order ){
    $codice_fiscale = get_post_meta( $order->get_id(), '_codice_fiscale', true );
    if( ! empty( $codice_fiscale ) )
        echo '<p><strong>'.__('Codice Fiscale', 'cbi-cf-invoice').':</strong> ' . $codice_fiscale . '</p>';
}

// Backend: Display and edit user profile custom field value "codice fiscale" Only for Italy
add_action( 'show_user_profile', 'add_extra_user_codice_fiscale', 1, 1 );
add_action( 'edit_user_profile', 'add_extra_user_codice_fiscale', 1, 1 );
function add_extra_user_codice_fiscale( $user )
{

    //if( get_user_meta( $user->ID, 'billing_country', true ) != 'IT' ) return;  // Only for Italy
    $codice_fiscale = get_user_meta( $user->ID, 'codice_fiscale', true );
    if( empty( $codice_fiscale ) ) $codice_fiscale = '';
    ?>
        <h3><?php _e( "Codice fiscale", "cbi-custom-parts" ); ?></h3>
        <table class="form-table"><tr>
            <th><label for="codice_fiscale"><?php _e( "Codice fiscale", "cbi-custom-parts" ); ?></label></th>
            <td><input type="text" name="codice_fiscale" value="<?php echo esc_attr($codice_fiscale); ?>" class="regular-text" /></td>
        </tr></table><br />
    <?php
}

// Backend: Save edited user profile custom field value "codice fiscale" Only for Italy
add_action( 'personal_options_update', 'save_extra_user_codice_fiscale' );
add_action( 'edit_user_profile_update', 'save_extra_user_codice_fiscale' );
function save_extra_user_codice_fiscale( $user_id )
{
    if( ! empty( $_POST['codice_fiscale'] ) )
        update_user_meta( $user_id, 'codice_fiscale', sanitize_text_field( $_POST['codice_fiscale'] ) );
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

All code is tested on Woocommerce 3+ and works.