We are having an increasing number of customers accidentally enter in bogus / inaccurate addresses in the address 1 field, which is causing headaches. What are our options for in-checkout address validation? Is this a feature that will available through foxycart? Of do you have a recommendation of a service or way to implement this?
Thank you for taking the time to get in touch! You can integrate your Foxy checkout with Crafty Clicks for address autocompletion and validation: https://www.foxy.io/blog/new-integration-address-autocompletion-and-validation-with-crafty-clicks/
Let us know if you have any follow up questions.
Thanks,
Josh
Thanks for this! I installed the code from the snippet on the footer of our checkout page, but it is not working. When I ran the identical code manually in the console on the checkout page (when the code was not installed in the footer and not including the FC.client.on("ready.done") ), it functioned and I was able to look up addresses, so the code itself seems to be good.
The error I get is "cc is not defined" and the error shows up in the console after the page is loaded and before any interaction with the page. I'm thinking that it has to due with the CraftyClicks library not loading? Any other ideas? Can you confirm that this snippet is still functional? Here is the error I get:
checkout.php?ThisAction=customer_info&fcsid=1uphfndon0m4klb76qop07eft4&:3018 Uncaught ReferenceError: cc is not defined
at cc_Add (checkout.php?ThisAction=customer_info&fcsid=1uphfndon0m4klb76qop07eft4&:3018)
at cc_Init (checkout.php?ThisAction=customer_info&fcsid=1uphfndon0m4klb76qop07eft4&:3022)
at checkout.php?ThisAction=customer_info&fcsid=1uphfndon0m4klb76qop07eft4&:3024
at Object. (foxycart.jsonp.with-jquery.min.1555107070.js:1)
at Object. (foxycart.jsonp.with-jquery.min.1555107070.js:1)
at j (foxycart.jsonp.with-jquery.min.1555107070.js:1)
at Object.add [as done] (foxycart.jsonp.with-jquery.min.1555107070.js:1)
at Array. (foxycart.jsonp.with-jquery.min.1555107070.js:1)
at Function.each (foxycart.jsonp.with-jquery.min.1555107070.js:1)
at Object. (foxycart.jsonp.with-jquery.min.1555107070.js:1)
Sorry to hear you're running into issues. That snippet is still functional. We'll take a look and follow up.
Thanks,
Josh
I'm assuming you're trying this out on your test store? I see you have the code added there, but in trying your checkout, I'm not seeing any errors myself. The postcode lookup feature was enabled though, which blocks the craftyclicks integration from initialising. After turning that off, it began working as expected.
Could you give it a try on your test store now?
I do see it working on the test store now but it was not working yesterday. I just tried the identical code from the test store on our live store and I am getting the same error that I was getting yesterday "cc is not defined". I have taken the code off the live store now so it would not throw errors on our customers.
That's really strange. When you apply to code, is the CraftyClicks javascript file being loaded? You can review all loaded assets from the "Network" tab of the browser console.
Yes, the craftyclicks code is being loaded. I'm not sure why the cc variable is continuing to be undefined. When I call the snippet code manually in the javascript console of the browser, it functions correctly. However, on page load the "cc is undefined" error is thrown and the address lookup is not functional. Any other ideas why cc would be undefined?
Without seeing the code active, I'm not really sure what else it could be unfortunately. Do you have another test store you could add it to to see if you can replicate the same error that we could then look at?
Ah - actually, I may have an idea. When you added the CraftyClicks code - did you by chance add it to the end of your footer code? If so, could you try adding it as the first thing in the footer configuration instead? I think some of your other custom code may be causing a render to happen before the ready.done call happens for CraftyClicks code, and so it's trying to reference itself before it's initialised.
I have loaded the identical footer code onto our testing environment carpe-test.foxycart.com and it threw the same code.
After removing code, I found that the CraftyClicks code works when I remove the below function that we use to prevent international customers from ordering free samples. We got that code from https://wiki.foxycart.com/v/2.0/snippets/locations_modfication
We could potentially remove this code since our sample shipments are limited, but we would rather leave it in place. Any way we can fix this bug and keep this code?
Here is the code:
{% if context == 'cart' or context == 'checkout' %}
<script type="text/javascript" charset="utf-8">
FC.locations.logic = function() {
/* BEGIN CUSTOM LOCATION LOGIC */
var itemSkus = [];
FC.json.items.forEach(function(item) { itemSkus.push(item.code); });
if (itemSkus.indexOf("CP-FB") != -1) { FC.locations.limitCountriesTo(['US'], 'shipping'); }
/* END CUSTOM LOCATION LOGIC */
};
/* Country/State Helper Functions v2.0 */
FC.locations.removeCountries=function(a,b){if("undefined"==typeof a)return!1;"string"==typeof a&&(a=[a]);b=FC.locations.validateLocationArrayNames(b);for(l in b){0===FC.json.config["locations_"+b[l]].length&&(FC.json.config["locations_"+b[l]]={});for(var c in a)FC.json.config["locations_"+b[l]][a[c]]="*"}return!0};
FC.locations.limitCountriesTo=function(a,b){if("undefined"==typeof a)return!1;"string"==typeof a&&(a=[a]);b=FC.locations.validateLocationArrayNames(b);for(l in b){var c=FC.json.config.locations;FC.json.config["locations_"+b[l]]={};for(var d in c)-1==a.indexOf(d)&&(FC.json.config["locations_"+b[l]][d]="*")}return!0};
FC.locations.removeStates=function(a,b,c){if("undefined"==typeof a||"undefined"==typeof b)return!1;"string"==typeof b&&(b=[b]);c=FC.locations.validateLocationArrayNames(c);for(l in c){if("undefined"==typeof FC.json.config.locations[a])return!1;FC.json.config["locations_"+c[l]].hasOwnProperty(a)||(FC.json.config["locations_"+c[l]][a]=[]);for(var d in b)FC.json.config["locations_"+c[l]][a].push(b[d])}return!0};
FC.locations.limitStatesTo=function(a,b,c){if("undefined"==typeof a||"undefined"==typeof b)return!1;"string"==typeof b&&(b=[b]);c=FC.locations.validateLocationArrayNames(c);for(l in c){var d=FC.json.config.locations;if("undefined"==typeof d[a])return!1;FC.json.config["locations_"+c[l]][a]=[];for(var e in d[a].r.options)-1==jQuery.inArray(e,b)&&FC.json.config["locations_"+c[l]][a].push(e)}return!0};
FC.locations.validateLocationArrayNames=function(a){if("undefined"==typeof a||""==a||"both"==a)a=["billing","shipping"];"string"==typeof a&&(a=[a]);for(var b=0;b<a.length;b++)"customer"==a[b]&&(a[b]="billing");return a};function customLocationsHandler(){FC.locations.logic();FC.Template(FC.json.context).clearOutput();"cart"==FC.json.context?FC.cart.renderAddressEntry():(FC.checkout.renderCustomerBilling(),FC.checkout.renderCustomerShipping())};
{% if cart_is_fullpage or context == 'checkout' %}FC.client.on('ready', customLocationsHandler);{% else %}customLocationsHandler();{% endif %}
</script>
{% endif %}
Thanks for the additional details - could you try changing the last section to be
ready.doneinstead ofready, and ensure that the CraftyClicks code is pasted above that script in your custom footer too?Hopefully that should get it working for you, and still allow you to maintain the dynamic location filtering.