wordpress intl-tel-input intlTelInput.js ultimate code

functions-intl-tel-input.php

<?php

/*
regexp format for woocommerce checkout form editor, in case we wish to add validator there: 
/^(\+?[0-9]{1,3})?([0-9]{3})?([0-9]{3})([0-9]{4})(\/[0-9]{4})?$/
*/
// lets define our regexp php validtor if we need it somewhere else
define( 'PHONE_VALIDATION_REGEXP', '/^(\+?[0-9]{1,3})?([0-9]{3})?([0-9]{3})([0-9]{4})(\/[0-9]{4})?$/' );

// selectors of fields that could appear anywhere in the the website
// what we do it take the phone number and assign the full with country code phone number into it directly into the _REQUEST
$iti_fields = [ '#billing_phone', '#shipping_phone' ];
foreach( $iti_fields as $key ) {
	$key = str_replace( '#', '', $key );
	if ( isset( $_REQUEST[ $key ] ) && isset( $_REQUEST[ $key . '_hidden' ] ) && $_REQUEST[ $key . '_hidden' ] ) $_REQUEST[ $key ] = $_REQUEST[ $key . '_hidden' ];
}


add_action( 'wp_enqueue_scripts', function() {
  global $iti_fields;
	$iti_version = '19.5.3';
	wp_enqueue_style( 'intl-tel-input', 'https://cdn.jsdelivr.net/npm/intl-tel-input@' . $iti_version . '/build/css/intlTelInput.css', $iti_version, [ 'jquery' ], 'all');
	wp_enqueue_script( 
		'intl-tel-input', 
		'https://cdn.jsdelivr.net/npm/intl-tel-input@' . $iti_version . '/build/js/intlTelInput.min.js', false, $iti_version, 
		[ 
			'strategy'  => 'defer',
			'in_footer' => true
		] 
	);
  
  // lets define initial paramters.
	wp_localize_script( 'intl-tel-input', 'iti', [
		'selectors' => $iti_fields,
		'utilsScript' => 'https://cdn.jsdelivr.net/npm/intl-tel-input@' . $iti_version . '/build/js/utils.js',
		'initialCountry' => function_exists( 'wc_get_customer_default_location' ) ? strtolower( wc_get_customer_default_location()[ 'country' ] ) : 'us',
		'nationalMode' => false,
		'autoInsertDialCode' => true,
		'showSelectedDialCode' => true,
		'countrySearch' => false,
		'preferredCountries' => [ 'us', 'jp' ]
	] );
  // the script we use to handle all inputs
	wp_add_inline_script( 'intl-tel-input', "
		iti.selectors.forEach( ( input ) => { 
			var defaults = { hiddenInput: function( name ) { return( name + '_hidden' ); } }; 
			window.intlTelInput( 
				document.querySelector( input ), { ...defaults, ...iti } ); 
				document.querySelector( input ).addEventListener( 'countrychange', function( e, i ) {
					var itinput = intlTelInputGlobals.getInstance( e.target );
					console.log( 'countrychange', itinput.getNumber(), itinput.getSelectedCountryData(), e );
				} );
			} );
		function _iti_sync( e ) {
			if ( typeof( intlTelInputGlobals ) == 'undefined' ) return;
			var itinput = intlTelInputGlobals.getInstance( typeof( e.target ) != 'undefined' ? e.target : e  );
			if ( typeof( itinput ) == 'undefined' ) return;
			if ( itinput.hiddenInput )  itinput.hiddenInput.value = itinput.getNumber();
     		if ( itinput.hiddenInputCountry ) itinput.hiddenInputCountry.value = itinput.getSelectedCountryData().iso2;
		}
		function _iti_syncs() {
			iti.selectors.forEach( ( input ) => {
		  		if ( document.querySelector( input ) ) _iti_sync( document.querySelector( input ) );
			} );
		}
    // we might need to add here depending on plugin support the events to
		jQuery( document.body ).on( 'init_checkout updated_checkout checkout_place_order wpmc_after_switching_tab', _iti_syncs ); // country_to_state_changed
		jQuery.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
			_iti_syncs();
		} );
		" );
} );