Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
integration:craftyclicks [2022/02/15 23:03] – [Fetchify Address Validation] marijaintegration:craftyclicks [2022/03/09 10:16] (current) – [Step 2: Add custom code] adam
Line 22: Line 22:
 This is how it looks in action: This is how it looks in action:
  
-{{:integration:crafty-clicks-cropped-cut-optimized.gif|Animation of the address autocompleting.}}+{{:integration:crafty-clicks-cropped-cut-350w.gif|Animation of the address autocompleting}}
  
 +<note>For U.S. addresses, the +4 zip code will be entered in the Foxy checkout zip code field.</note>
 ===== Requirements ===== ===== Requirements =====
  
Line 33: Line 34:
 ==== Step 1: Signup with Fetchify ==== ==== Step 1: Signup with Fetchify ====
  
-This integration requires an account with Fetchify, which you can sign up for on their website at https://https://fetchify.com+This integration requires an account with Fetchify, which you can sign up for on their website at https://fetchify.com
  
 ==== Step 2: Add custom code ==== ==== Step 2: Add custom code ====
Line 69: Line 70:
  var cc_search_again = 'Search Again';  var cc_search_again = 'Search Again';
    
- // Foxy + CraftyClicks 2018-11-14 + // Foxy + CraftyClicks 2022-03-09 
- var cc_countryList=[];$('[data-fc-id$="_country"]:first option').each(function(){""!=this.value&&cc_countryList.push(this.value)});function cc_Hide_Fields(a,b){$("#"+a+"_address1").closest(".fc-address-entry__address-container").hide(b);$("#"+a+"_postal_code").closest(".fc-form-group--postal-code").hide(b);$("#"+a+"_c2a_retry").hide(b);$("#"+a+"_c2a_manual").show(b);$("#"+a+"_search_bar").show(b)} + var cc_countryList=[];function cc_Hide_Fields(c,e){$("#"+c+"_address1").closest(".fc-address-entry__address-container").hide(e),$("#"+c+"_postal_code").closest(".fc-form-group--postal-code").hide(e),$("#"+c+"_c2a_retry").hide(e),$("#"+c+"_c2a_manual").show(e),$("#"+c+"_search_bar").show(e)}function cc_Reveal_Fields(c,e){$("#"+c+"_address1").closest(".fc-address-entry__address-container").show(e),$("#"+c+"_postal_code").closest(".fc-form-group--postal-code").show(e),$("#"+c+"_c2a_manual").hide(e),cc_Hide_Search(c,e)}function cc_Hide_Search(c,e){$("#"+c+"_c2a_manual").hide(e),$("#"+c+"_search_bar").hide(e),$("#"+c+"_c2a_retry").show(e)}function cc_Reveal_Search(c,e){$("#"+c+"_c2a_retry").hide(e),$("#"+c+"_search_bar").show(e,(function(){$(this).focus()}))}function cc_Add(c){"true"!==$("#"+c+"_address1").attr("cc_applied")&&(cc_Search&&($("#"+c+"_address1").closest(".fc-address-entry__address-container").before('<div class="fc-form-group fc-address-entry__search-container"><div class="fc-container__grid--input--address1 col-xs-12 col-sm-8 col-sm-offset-3"><label for="search-bar" class="fc-form-label fc-form-label--billing-address1">Address Search</label><input type="text" id="'+c+'_search_bar" name="'+c+'_search_bar" value="" placeholder="Address Search" class="fc-form-control" style="width:100%"><p id="'+c+'_c2a_manual" style="cursor: pointer; margin-bottom: 0px; margin-top: 1em; font-size: 0.8125em;">'+cc_enter_address_manually+'</p><p id="'+c+'_c2a_retry" style="cursor: pointer; margin-bottom: 0px; margin-top: 1em; font-size: 0.8125em; display:none;">'+cc_search_again+"</p></div></div>"),$("#"+c+"_c2a_manual").on("click",(function(){cc_Reveal_Fields(c,200)})),$("#"+c+"_c2a_retry").on("click",(function(){cc_Reveal_Search(c,200)}))),cc.attach({search:cc_Search?c+"_search_bar":c+"_address1",line_1:c+"_address1",line_2:c+"_address2",company:c+"_company",town:c+"_city",postcode:c+"_postal_code"},{onResultSelected:function(e,a,_){$('[data-fc-id="'+c+'_country"]').val()!=_.country.iso_3166_1_alpha_2&&$('[data-fc-id="'+c+'_country"]').val(_.country.iso_3166_1_alpha_2).change(),"INPUT"===$('[data-fc-id="'+c+'_region"]')[0].nodeName?$('[data-fc-id="'+c+'_region"]').val(_.province_name).trigger("focusout"):($('[data-fc-id="'+c+'_region"]').val(_.province_code).trigger("focusout"),$('[data-fc-id="'+c+'_region_name"]').val(_.province_name)),$("#"+c+"_postal_code").val(_.postal_code).trigger("focusout"),$("#"+c+"_address1").val(_.line_1).trigger("focusout"),$("#"+c+"_address2").val(_.line_2).trigger("focusout"),$("#"+c+"_city").val(_.locality).trigger("focusout").trigger("change"),cc_Hide&&cc_Search&&cc_Reveal_Fields(c,200)}}),cc_Search&&cc_Hide?""==$("#"+c+"_address1").val()&&""==$("#"+c+"_city").val()?cc_Hide_Fields(c,0):cc_Reveal_Fields(c,0):cc_Search&&($("#"+c+"_c2a_manual").hide(),""==$("#"+c+"_address1").val()&&""==$("#"+c+"_city").val()?cc_Reveal_Search(c,0):cc_Hide_Search(c,0)))}function cc_Init(c){if("enabled"!=FC.json.config.template_config.postal_code_lookup.usage){var e=[];if("customer_shipping"===c||"checkout"===c)if(FC.json.has_multiship)for(var a=0;a<FC.json.multiship_data.length;a++)e.push(FC.json.multiship_data[a].prefix);else FC.json.shipping_address.has_shippable_products&&e.push("shipping");"customer_billing"!==c&&"checkout"!==c||!$("#billing_address1").is(":visible")||e.push("billing");for(a=0;a<e.length;a++)cc_Add(e[a].trim())}}$('[data-fc-id$="_country"]:first option').each((function(){""!=this.value&&cc_countryList.push(this.value)})),FC.client.on("ready.done",(function(){cc=new clickToAddress({accessToken:cc_AccessToken,tag:"foxyCart",enabledCountries:cc_countryList,countryMatchWith:"iso_2",showLogo:cc_showLogo,style:{ambient:cc_ambient,accent:cc_accent},texts:{default_placeholder:cc_Search?cc_search_placeholder:cc_address_placeholder,country_placeholder:cc_country_placeholder,country_button:cc_country_button,generic_error:cc_generic_error,no_results:cc_no_results},domMode:"id"}),cc_Init("checkout")})),FC.client.on("render.done",(function(c){cc_Init(c.block_id)}));
- function cc_Reveal_Fields(a,b){$("#"+a+"_address1").closest(".fc-address-entry__address-container").show(b);$("#"+a+"_postal_code").closest(".fc-form-group--postal-code").show(b);$("#"+a+"_c2a_manual").hide(b);cc_Hide_Search(a,b)}function cc_Hide_Search(a,b){$("#"+a+"_c2a_manual").hide(b);$("#"+a+"_search_bar").hide(b);$("#"+a+"_c2a_retry").show(b)}function cc_Reveal_Search(a,b){$("#"+a+"_c2a_retry").hide(b);$("#"+a+"_search_bar").show(b,function(){$(this).focus()})} +
- function cc_Add(a){"true"!==$("#"+a+"_address1").attr("cc_applied")&&(cc_Search&&($("#"+a+"_address1").closest(".fc-address-entry__address-container").before('<div class="fc-form-group fc-address-entry__search-container"><div class="fc-container__grid--input--address1 col-xs-12 col-sm-8 col-sm-offset-3"><label for="search-bar" class="fc-form-label fc-form-label--billing-address1">Address Search</label><input type="text" id="'+a+'_search_bar" name="'+a+'_search_bar" value="" placeholder="Address Search" class="fc-form-control" style="width:100%"><p id="'+ +
- a+'_c2a_manual" style="cursor: pointer; margin-bottom: 0px; margin-top: 1em; font-size: 0.8125em;">'+cc_enter_address_manually+'</p><p id="'+a+'_c2a_retry" style="cursor: pointer; margin-bottom: 0px; margin-top: 1em; font-size: 0.8125em; display:none;">'+cc_search_again+"</p></div></div>"),$("#"+a+"_c2a_manual").on("click",function(){cc_Reveal_Fields(a,200)}),$("#"+a+"_c2a_retry").on("click",function(){cc_Reveal_Search(a,200)})),cc.attach({search:cc_Search?a+"_search_bar":a+"_address1",line_1:a+"_address1", +
- line_2:a+"_address2",company:a+"_company",town:a+"_city",postcode:a+"_postal_code"},{onResultSelected:function(b,d,c){$('[data-fc-id="'+a+'_country"]').val()!=c.country.iso_3166_1_alpha_2&&$('[data-fc-id="'+a+'_country"]').val(c.country.iso_3166_1_alpha_2).change();"INPUT"===$('[data-fc-id="'+a+'_region"]')[0].nodeName?$('[data-fc-id="'+a+'_region"]').val(c.province_name).trigger("focusout"):($('[data-fc-id="'+a+'_region"]').val(c.province_code).trigger("focusout"),$('[data-fc-id="'+a+'_region_name"]').val(c.province_name))+
- $("#"+a+"_postal_code").val(c.postal_code).trigger("focusout");$("#"+a+"_address1").val(c.line_1).trigger("focusout");$("#"+a+"_address2").val(c.line_2).trigger("focusout");$("#"+a+"_city").val(c.locality).trigger("focusout").trigger("change");cc_Hide&&cc_Search&&cc_Reveal_Fields(a,200)}}),cc_Search&&cc_Hide?""==$("#"+a+"_address1").val()&&""==$("#"+a+"_city").val()?cc_Hide_Fields(a,0):cc_Reveal_Fields(a,0):cc_Search&&($("#"+a+"_c2a_manual").hide(),""==$("#"+a+"_address1").val()&&""==$("#"+a+"_city").val()? +
- cc_Reveal_Search(a,0):cc_Hide_Search(a,0)))}function cc_Init(a){if("enabled"!=FC.json.config.template_config.postal_code_lookup.usage){var b=[];if("customer_shipping"===a||"checkout"===a)if(FC.json.has_multiship)for(var d=0;d<FC.json.multiship_data.length;d++)b.push(FC.json.multiship_data[d].prefix);else b.push("shipping");"customer_billing"!==a&&"checkout"!==a||!$("#billing_address1").is(":visible")||b.push("billing");for(d=0;d<b.length;d++)cc_Add(b[d].trim())}} +
- FC.client.on("ready.done",function(){cc=new clickToAddress({accessToken:cc_AccessToken,tag:"foxyCart",enabledCountries:cc_countryList,countryMatchWith:"iso_2",showLogo:cc_showLogo,style:{ambient:cc_ambient,accent:cc_accent},texts:{default_placeholder:cc_Search?cc_search_placeholder:cc_address_placeholder,country_placeholder:cc_country_placeholder,country_button:cc_country_button,generic_error:cc_generic_error,no_results:cc_no_results},domMode:"id"});cc_Init("checkout")})+
- FC.client.on("render.done",function(a){cc_Init(a.block_id)});+
 })(jQuery, FC);  })(jQuery, FC); 
 </script>  </script> 
Line 102: Line 95:
 To turn that off, within the "configuration" section, uncheck the checkbox for "Enable city and region lookup by postal code" To turn that off, within the "configuration" section, uncheck the checkbox for "Enable city and region lookup by postal code"
  
 +Note that you should have address fields unhidden in the configuration. If your integration isn't working, try reviewing the "Customize which checkout fields are shown and required settings" on the configuration page and ensure that the Address 2 field is set to "Optional".
 ==== Step 5: Review Country/Region Whitelist/Blacklist ==== ==== Step 5: Review Country/Region Whitelist/Blacklist ====
  

Site Tools