Fetchify Documentation

BigCommerce Integration Guide

Integration with BigCommerce address forms made simple

A step-by-step guide to integration with BigCommerce address forms.

Preparation

Download

Download our BigCommerce plugin for the UK Postcode Lookup from the plugins page or in case of the Address Auto-Complete head over to the Installation section.

Visit the download pageopen in new window

Installation

Select the plugin you would like to install.

Install Address Auto-Complete

TIP

We recommend using v2 if you are integrating for the first time. This newer version will receive updates and includes optional support for phone and email validation. If you are using v1 then consider upgrading soon.

Step 1

We use the "Site Verification Tags" setting in BigCommerce to add our javascript code to your store.

Login to your BigCommerce store, then go to Advanced Settings > Data Solutions > Site Verification Tags.

Copy the following code block into the input box. If there was already some code saved in Site Verification Tags then paste our code below it.

v2

<script type='text/javascript'>
var c2a_config = {
	access_token: 'xxxxx-xxxxx-xxxxx-xxxxx',
	mode: '1',
	ambient: 'light',
	accent: 'default',
	hide_fields: true,
	show_logo: true,
	use_addressline_1: false,
	texts: {
		default_placeholder: 'Start with post/zip code or street',
		generic_error: 'An error occurred. Please enter your address manually',
		no_results: 'No results found',
		search_label: 'Address Search',
		reveal_button: 'Enter Address Manually',
		hide_button: 'Search For Address',
		country_button: 'Change Country',
	},
	excludeAreas: [],
	transliterate: false,
	limitToMaxLength: {
		enabled: false,
		useEllipsis: false, // Note: This feature may not be compatible with certain database systems
	},
	phone: {
		enabled: false,
		can_correct: false,
		allowed_type: 'all',
	},
	email: {
		enabled: false,
		allow_high_risk: false,
	},
};

var fetchifyBigCommerceScript = document.createElement('script');
fetchifyBigCommerceScript.src = 'https://cc-cdn.com/bigcommerce/scripts/v2/fetchify.loader.js';
fetchifyBigCommerceScript.type = 'text/javascript';
document.querySelector('head').appendChild(fetchifyBigCommerceScript);
</script>

v1

<script type="text/javascript">
var c2a_config = {
	access_token: 'xxxxx-xxxxx-xxxxx-xxxxx',
	mode: '1',
	ambient: 'light',
	accent: 'default',
	hide_fields: true,
	show_logo: true,
	use_addressline_1: false,
	texts: {
		default_placeholder: 'Start with post/zip code or street',
		generic_error: 'An error occurred. Please enter your address manually',
		no_results: 'No results found',
		search_label: 'Address Search',
		reveal_button: 'Enter Address Manually',
		hide_button: 'Search For Address',
		country_button: 'Change Country',
	},
	excludeAreas: [],
	limitToMaxLength: {
		enabled: false,
		useEllipsis: false // Note: This feature may not be compatible with certain database systems
	},
	transliterate: false,
	countryLanguage: 'en',
};

var _craftyclicks_headID = document.getElementsByTagName("head")[0];
var _craftyclicks_mobileScript;
_craftyclicks_mobileScript = document.createElement('script');
_craftyclicks_mobileScript.type = 'text/javascript';
_craftyclicks_mobileScript.src = 'https://cc-cdn.com/bigcommerce/scripts/v1/cc_c2a_bigcommerce.js';
_craftyclicks_headID.appendChild(_craftyclicks_mobileScript);

</script>

Step 2

Replace xxxxx-xxxxx-xxxxx-xxxxx with your access token. You can also change any of the other configuration options to customise the look and feel of the module. Click save when you're ready.

Install UK Postcode Lookup

Step 1

  • Upload these files to your server:
    • fetchify_bigcommerce.js
    • fetchify_postcode_busy.gif

In BigCommerce they should be placed in the /content/ directory if you follow the BigCommerce WebDav upload instructions.

Get help with WebDav hereopen in new window.

Step 2

We use the "Site Verification Tags" setting in BigCommerce to add our javascript code to your store.

Login to your BigCommerce store, then go to Advanced Settings > Data Solutions > Site Verification Tags.

Copy the following code block into the input box. If there was already some code in the box then paste our code below it.

Note: You will need to replace *INSERT_YOUR_SHOP_PATH* with your shop path.

<script type="text/javascript">
	// CONFIGURATION
	var _cp_config = {
		access_token:			"xxxxx-xxxxx-xxxxx-xxxxx",
		postcode: {
			enable_for_uk_only:		true, // if true, lookup functionality is only shown if country selected is UK
			button_text:			'Find Address',
			button_class:			'btn',
			result_box_width:		'',
			busy_img_url:			'content/fetchify_postcode_busy.gif',
			clear_result:			true, // hide result box once a selection is made
			hide_fields:			true, // hides address lines for UK until postcode lookup is completed
			hide_county:			true, // hides state/county field for UK
			update_county_select:	true,
			first_res_line:			'--- please select your address ---',
			err_msg1:				'This postcode could not be found, please try again or enter your address manually',
			err_msg2:				'This postcode is not valid, please try again or enter your address manually',
			err_msg3:				'Unable to connect to address lookup server, please enter your address manually',
			err_msg4:				'An unexpected error occurred, please enter your address manually',
			error_class:			'error',
			put_company_on_line1:	true,
			move_postcode_field: 	true, // Move postcode before address line 1 if the selected country is UK
			manual_entry_enable:	true,
			manual_entry_text:		'Enter Address Manually',
			postcode_search_text:	'Postcode Search', // only in Optimised One-Page Checkout
		},
		phone: {
			enabled: false, // enable phone validation on the checkout
			can_correct: true,		// auto-correct mistakes in the phone number
			allowed_type: 'all'		// accepts 'all', 'mobile', or 'landline'
		},
		email: {
			enabled: false, // enable email validation on the checkout
			allow_high_risk: false	// if false the library will reject disposable email addresses
		}
	};
	// END CONFIGURATION

	// INJECT SCRIPTS
	var cc_script_urls = [
		'https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js',
		'https://cc-cdn.com/legacy/scripts/v4.9.2/crafty_clicks.class.min.js',
		'https://*INSERT_YOUR_SHOP_PATH*/content/fetchify_bigcommerce.js'
	]
	var _craftyclicks_headID = document.getElementsByTagName("head")[0]
	cc_script_urls.forEach(function(url) {
		var script = document.createElement('script')
		script.type = 'text/javascript'
		script.src = url
		_craftyclicks_headID.appendChild(script)
	})
	// END INJECT SCRIPTS
</script>

Step 3

Replace xxxxx-xxxxx-xxxxx-xxxxx with your access token. You can also change any of the other configuration options to customise the look and feel of the module.

Step 4

If you want to use phone or email validation on the checkout, you can enable them by setting the enabled options to true near the end of the configuration block. Click save when you're ready.

Events

You can add event handlers which are executed at certain times and can be used to override basic functionality.

Examples

Implementing beforePopulate() and onResult() for Address Auto-Complete and Phone Validation using the BigCommerce v2 JavaScript code.

<script type='text/javascript'>
var c2a_config = {
	access_token: 'xxxxx-xxxxx-xxxxx-xxxxx',
	...,
	beforePopulate: function(c2a, elements, parameters) {
		// Perform any action here with the available data
		// For example, you may want to alter part of the address before the address fields are filled
	}
	phone: {
		enabled: false,
		...,
		onResult: function (element, result) {
			// Code to run on result of API call
		}
	}
};

var fetchifyBigCommerceScript = document.createElement('script');
fetchifyBigCommerceScript.src = 'https://cc-cdn.com/bigcommerce/scripts/v2/fetchify.loader.js';
fetchifyBigCommerceScript.type = 'text/javascript';
document.querySelector('head').appendChild(fetchifyBigCommerceScript);
</script>

Troubleshooting

Why does my integration work on mobile but not desktop?

BigCommerce have recently introduced a privacy feature where the code used in the Google Analytics section will not be run unless the user accepts cookies. To solve this problem, follow the steps on this page to integrate using"Site Verification Tags" instead of the Google Analytics section.

Why does my integration not work on the customer sign up and address book pages?

If you have used the BigCommerce Script Manager to integrate our module, it will not load on these pages. To solve this problem, follow the steps on this page to integrate using"Site Verification Tags" instead of the Google Analytics section.

Questions

  • Do you offer support? Yes, we do offer support during normal business hours in the UK. If you run into any issues, let us know and we will be happy to help.
  • Is this free? The extension is free to download and try, but to use it on a live site you will need a paid account with us.
  • Do I need to sign up for an account to try it? Yes, you’ll need a trial account, at least. You can easily sign up for a free trial account.