Add Geolocation Information to Order Forms

Hi Everyone,

Solution Found
See bottom of thread for modified code, jump to code - click here. Thanks & qudos to @John_Borelli for the pointer.

You place the modified code in the following section of the order form, while editing.

Order Form > HTML Areas Tab > Product Information Section

Changing the way jQuery.AJAX is called allows the script to work, fixing the page refresh/load infinite loop problem. The issue being, the order form has already called jQuery, so calling it again via a script tag caused the page refresh issue to occur.

Goal
Trying to apply my previous solution for capturing geolocation information values for web forms to work with order forms.

The modified code works (9/10ths of the way) and will populate the geolocation fields when an order form is submitted but I have hit a visual page refresh/loading issue that I can’t figure out and am asking for help to solve.

Form Data POST Works
Using the code modifications (shown below in the Modified Code Section) the order form will correctly post the geolocation data values to the selected database tables & fields.

Page Refresh/Loading Issue
The problem seems to lie in calling the AJAX JQuery.min.js needed to make the code work.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Without the script call the code doesn’t function.

The script call somehow is interacting with the existing order form JavaScript to cause a page refresh/loading endless visual loop after you enter the ZipCode. After the ZipCode is entered and you tab down to the Country field then the top form sections of the page blank out and try and refresh but never do so successfully, just infinitely spinning circles.

You can still submit the form (while in endless visual refresh mode) and the order form credit card/address and the geolocation data values will correctly process and populate. So we know the geolocation code is working correctly, the form data values are preseved/updated making the problem is a visual refresh / page reload issue only.

Order Form > HTML Areas Tab > Product Information Section
The modified geolocation code is placed in this section in the order form, while editing.

Modified Code
Note: You don’t need to poll for the TimeZone as the order form already is programmed to capture this value.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'POST',
  dataType: 'jsonp',
  success: function(location) {
    // Update hidden form field variable values
    jQuery('#Contact0City3').val(location.city);
    jQuery('#Contact0State3').val(location.region_code);
    jQuery('#Contact0PostalCode3').val(location.zipcode);
    jQuery('#Contact0Country3').val(location.country_name);
    jQuery('#Contact0_IPAddress').val(location.ip);
	}
} );
</script>

<input name="Contact0City3" id="Contact0City3" type="hidden" value="" />
<input name="Contact0State3" id="Contact0State3" type="hidden" value="" />
<input name="Contact0PostalCode3" id="Contact0PostalCode3" type="hidden" value="" />
<input name="Contact0Country3" id="Contact0Country3" type="hidden" value="" />
<input name="Contact0_IPAddress" id="Contact0_IPAddress" type="hidden" value="" />

Previous - Web Form Code Solution
Here is my previous solution for web forms rather than order forms.

New - Order Form Code Modification
Note the differences in and to correctly reference the database table.field via the order form POST (compared to the previous web form POST solution).

  • You drop the field name prefix inf_field_ for the input name & id
  • You include the table name prefix Contact0
  • You include the underscore character as a prefix for a custom field

Web Form Code (Standard Existing Field)

<input name="inf_field_City3" id="City3" type="hidden" value="" />

Web Form Code (Custom Field)

<input name="inf_custom_IPAddress" id="_IPAddress" type="hidden" value="" />

Order Form Code (Standard Existing Field)

<input name="Contact0City3" id="Contact0City3" type="hidden" value="" />

Order Form Code (Custom Field)

<input name="Contact0_IPAddress" id="Contact0_IPAddress" type="hidden" value="" />

Solutions Tried

JQuery No Conflict
To allow multiple versions of JQuery to run without conflict on the same page.

jQuery.noConflict();
jQuery.noConflict(true);

<script>
  jQuery.noConflict();
  jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'POST',
  dataType: 'jsonp',
  success: function(location) {
    // Update hidden form field variable values
    jQuery('#Contact0City3').val(location.city);
    jQuery('#Contact0State3').val(location.region_code);
    jQuery('#Contact0PostalCode3').val(location.zipcode);
    jQuery('#Contact0Country3').val(location.country_name);
    jQuery('#Contact0_IPAddress').val(location.ip);
	}
} );
</script>

Set timeout for AJAX
To stop AJAX from looping after set time period, in case that was conflicting with the page refresh via an endless loop.

timeout: 3000, // sets timeout to 3 seconds

<script>
  jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'POST',
  dataType: 'jsonp',
  timeout: 3000, // sets timeout to 3 seconds
  success: function(location) {
    // Update hidden form field variable values
    jQuery('#Contact0City3').val(location.city);
    jQuery('#Contact0State3').val(location.region_code);
    jQuery('#Contact0PostalCode3').val(location.zipcode);
    jQuery('#Contact0Country3').val(location.country_name);
    jQuery('#Contact0_IPAddress').val(location.ip);
	}
} );
</script>

The Possible Code Conflict?
Looking at the existing page code, (view source) the conflict seems to lie with the following document ready function call that then fires a RENDER_ORDER_FORM action. This is my best guess for the page refresh issue code conflict with the AJAX call but I could be off base.

Any help in figuring this issue out is much appreciated, thank you.

jQuery(document).ready(function()

jQuery('#addressLine1, #city, #zipCode, #country, #state').change(function() {
        Infusion.Ecomm.OrderForms.submitFormUponChangeOnBilling('orderForm', '807aa4ca-f41c-48be-9b28-5ab1f51730d3', 'RENDER_ORDER_FORM');

I don’t know how much of this will directly apply to what you’re doing but this has been my experience with order forms and jquery.

I found that using a script tag to pull in jquery was actually one of the causes of the ‘endless form load’ you mention as IS already has it present. I also had the $ form used and that doesn’t work either (as you seem to already know).

I had to manage page refresh on the front and back refresh with the following 2 methods:

jQuery(document).ready(modForm);
jQuery(document).ajaxStop(modForm);

Hopefully this will at least give you some ideas?

Hi John,

Thanks so much, a great lead. I will try this out and let you know.

Alastair

Hi John,

Many thanks for the pointer, with your advice it was a simple solution.

You just had to call ajax on page onload / jQuery(document).ready(function() for everything to work and as you said, not calling ajax via a script avoids the infinite page refresh/reload issue.

Now I’m just working on getting the TimeZone field value to populate. For some reason it is not doing so or alternatively the freegeoip.net is not pulling that dataset value during testing. Will update with that final solution when figured out.

Suggested mod by @Pav to drop the lines of code for TimeZone

jQuery('#Contact0TimeZone').val(location.time_zone);
<input name="Contact0TimeZone" id="Contact0TimeZone" type="hidden" value="" />

and use the built-in function already called by Infusionsoft.

The Hidden Element is called “timeZone”, ( jQuery(’#timeZone’).val() ). There is a “/resources/timezone/timezone.js” script that is being loaded by Infusionsoft. 

This mod will likely avoid any possible duplicate field value update conflicts between the built-in code & manually applied code. Have left the code example as it currently is, in case anyone wants the TimeZone value populated by the Free Geo Service.

Here is the working code.

<script>
	jQuery(document).ready(function(){
	jQuery.ajax( {
		url: '//freegeoip.net/json/',
		type: 'POST',
		dataType: 'jsonp',
		success: function(location) {
			// Update hidden form field variable values
			jQuery('#Contact0City3').val(location.city);
			jQuery('#Contact0State3').val(location.region_code);
			jQuery('#Contact0PostalCode3').val(location.zipcode);
			jQuery('#Contact0Country3').val(location.country_name);
			jQuery('#Contact0TimeZone').val(location.time_zone);
			jQuery('#Contact0_IPAddress').val(location.ip);
			}
	} );
});
</script>

<input name="Contact0City3" id="Contact0City3" type="hidden" value="" />
<input name="Contact0State3" id="Contact0State3" type="hidden" value="" />
<input name="Contact0PostalCode3" id="Contact0PostalCode3" type="hidden" value="" />
<input name="Contact0Country3" id="Contact0Country3" type="hidden" value="" />
<input name="Contact0TimeZone" id="Contact0TimeZone" type="hidden" value="" />
<input name="Contact0_IPAddress" id="Contact0_IPAddress" type="hidden" value="" />

Glad it worked out for you! :wink:

Hi @Alastair_Greenstreet, I took a look at the Order Form, and noticed that Infusionsoft are already tracking the Time Zone. So you do not necessary have to fill this via the Free Geo IP service, unless the Geo IP site is more accurate.

The Hidden Element is called “timeZone”, ( jQuery(’#timeZone’).val() ). There is a “/resources/timezone/timezone.js” script that is being loaded by Infusionsoft. This is inserting the element into the page.

Well done in this code that you submitted.

Hi @Pav,

You are quite right, likely better to go with the built-in provided code and drop the input field value from Free Geo IP service, to avoid any possible conflicts in updating the field value.

Alastair

Hi Everyone,

Please see the updated solution (see end of the thread) referenced for Contact records.

The need is to use ALL custom created fields due to occassional validation failures on Country and any other field that might have different validation values Infusionsoft versus IPStack.

Alastair