Improved compatibility with Elementor and other builders

@carlosblazquez4global
Thank you first of all for your solution, plugin devs didn’t do it even till now…

I will try to do it on my websites

• This reply was modified 11 months, 2 weeks ago by bashiachuki.

1. I added 1st code in plugin index.php (replaced old code)
2. I added 2nd code in Elementor -> Custom code like this: https://i.imgur.com/qve2pfD.png

But unfortunately, it doesn’t work, flags disappeared at all from the elementor contact form

• This reply was modified 11 months, 2 weeks ago by bashiachuki.

Hello, @bakoline .

I had to retake this modification in a new project, so I took the opportunity to improve and correct the proposed refactoring:

	public function footer()
	{
		if ( isset( $this->options['enable'] ) && esc_attr( $this->options['enable'] ) == 'on' )
		{
			$itioptions = [

				'excludeCountries' => empty( $this->options['excludeCountries'] ) ? [] : $this->options['excludeCountries'],

				'initialCountry' => '',
				
				'onlyCountries' => empty( $this->options['onlyCountries'] ) ? [] : $this->options['onlyCountries'],

				'preferredCountries' => empty( $this->options['preferredCountries'] ) ? [] : $this->options['preferredCountries'],

			];

			if ( isset( $this->options['enable_geoip_loopup'] ) && $this->options['enable_geoip_loopup'] == 'on' )
			{
				require_once WPITFDC_ROOT_DIR . '/includes/vendor/autoload.php';

				// This creates the Reader object, 
				$reader = new Reader( WPITFDC_ROOT_DIR . '/assets/vendor/GeoLite2-Country/GeoLite2-Country.mmdb' );

				try
				{	
					$VisitorGeo = $reader->country( $this->get_visitor_ip() );

					$itioptions['initialCountry'] = $VisitorGeo->country->isoCode;
				}
				catch ( Exception $e )
				{
					$itioptions['initialCountry'] = '';
				}
			}
			
?>
				<script>
					<!--//
					window.wpitfdc = {
						options:
						{
							excludeCountries: <?php echo json_encode( $itioptions['excludeCountries'] ); ?>,
							initialCountry: '<?php echo strtolower( $itioptions['initialCountry'] ); ?>',
							onlyCountries: <?php echo json_encode( $itioptions['onlyCountries'] ); ?>,
							preferredCountries: <?php echo json_encode( $itioptions['preferredCountries'] ); ?>,
							separateDialCode: true
						},
						interval: null,
						init: function ( scope )
						{
							jQuery( 'input[type="tel"]:not(.iti__tel)', scope ).each( function( index, element )
							{
								var name = jQuery( element ).attr( 'name' ) || 'phoneNumber';
								jQuery( element ).removeAttr( 'name' ).after( '<input class="iti__tel" name="' + name + '" type="hidden">' ).intlTelInput(
								{
									excludeCountries: window.wpitfdc.options.excludeCountries,
									initialCountry: window.wpitfdc.options.initialCountry,
									onlyCountries: window.wpitfdc.options.onlyCountries,
									preferredCountries: window.wpitfdc.options.preferredCountries,
									separateDialCode: window.wpitfdc.options.separateDialCode
								} ).addClass( 'iti__tel' );
							} );
							window.wpitfdc.interval = window.wpitfdc.interval || setInterval( function()
							{
								jQuery( 'input[type="hidden"].iti__tel' ).each( function( index, element )
								{
									var iti = jQuery( element ).prev( '.iti' ), prefix = iti.find( '.iti__selected-dial-code' ).text(), phone = iti.find( 'input[type="tel"].iti__tel' ).val(), newVal = phone === '' ? '' : prefix + phone;
									jQuery( element ).val( newVal );
	
								} );
							}, 500 );
						}
					};
					jQuery( document ).ready( function()
					{
<?php

			if ( isset( $this->options['enable_geoip_loopup_ajax'] ) && $this->options['enable_geoip_loopup_ajax'] == 'on' )
			{
?>
						jQuery.get( '<?php echo admin_url( 'admin-ajax.php' ); ?>', { action: 'wpitfdc_get_visitor_country' }, function( data )
						{
							window.wpitfdc.options.initialCountry = data;
							window.wpitfdc.init( document );
						} );
<?php
			}
			else
			{
?>
						window.wpitfdc.init( document );
<?php
			}
?>
					} );
				</script>
<?php
		}
	}

Then, the Elementor code snippet will look like this:

<script>
jQuery( document ).ready( function() {
	jQuery( document ).on( 'elementor/popup/show', function( event, id, instance ) {
		//International Telephone Input With Flags And Dial Codes
		if( jQuery( 'input[type="tel"]:not(.iti__tel)', instance.$element ).length && typeof( window.wpitfdc.init ) === 'function' ) {
			window.wpitfdc.init( instance.$element );
		}
	} );
} );
</script>

Tested and working in pop-up windows. I hope it helps you.

@carlosblazquez4global I did everything as you wrote

1. I added 1st code in plugin index.php (replaced old code) here: /wp-content/plugins/international-telephone-input-with-flags-and-dial-codes
2. Then I added javascript code like this: https://imgur.com/a/jURG3PD

But unfortunately, in the popup, it still flags can not be changed

Link: https://adproduction.ge/

Here’s video as well: https://www.loom.com/share/7c6fcf55e24f4e88a44f1eddd757dab7

And without your modifications, it works everywhere, except popups with mobile view

Hi, @bakoline .

It’s working now, isn’t it? I have tested the selector in the popup of your website and it shows the international codes.

@carlosblazquez4global No Carlos, its now different plugin active on the website. I couldn’t make your solution work

I see that this add-on is designed specifically for Elementor Pro:

Country Code For Elementor Form Telephone Field By Cool Plugins

So problem solved, don’t you think? And let this other add-on abandoned by its author fall into oblivion.

Yeah… totally agree, finally someone did other same functionality plugins…