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 page  

Sign Up

Next, you need to sign up for a Crafty Clicks account.

When you sign up, you will receive an access token by email. There is no obligation to buy anything and you automatically get 100 trial lookups. If you need more lookups to test the integration, please get in touch (support@craftyclicks.co.uk) and we will try to accommodate you.

Installation

Select the plugin you would like to install.

Install Address Auto-Complete

Step 1

Essentially we use the Google Analytics facility to inject the JavaScript into the templates.

Go to “Advanced Settings Web Analytics”. Make sure “Google Analytics” is enabled, then select the “Google Analytics” tab.

You will see a box where you can enter HTML code. We need to add our two scripts. Copy the contents of analytics.js and paste into the ‘Tracking Code” box. Please note that if you have a Google Analytics tracker set, you shouldn’t overwrite its code; just add the new code after Google’s.

<script type="text/javascript">
// CONFIGURATION
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"
 }
};
// END OF CONFIGURATION
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); //load bigcommerce specific js

</script>

Step 2

Paste your access token on line 4 in the Analytics code in place of xxxxx-xxxxx-xxxxx-xxxxx.

Configuration (optional)

In the Analytics code you will find some configuration options that will allow you to customise the look and feel of the module.

Install Postcode Lookup

Step 1

  • Upload these files to your server:
    • craftyclicks_bigcommerce.js
    • crafty_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 here.

Step 2

Essentially we use the Google Analytics facility to inject the JavaScript into the templates.

Go to “Advanced Settings -> Web Analytics”. Make sure “Google Analytics” is enabled, then select the “Google Analytics” tab.

You will see a box where you can enter HTML code. We need to add our two scripts. Copy the contents of analytics.js and paste into the ‘Tracking Code” box. Please note that if you have a Google Analytics tracker set, you shouldn’t overwrite its code; just add the new code after Google’s.

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

<script type="text/javascript">// <![CDATA[
	// CONFIGURATION
	var _cp_config = {
		access_token:			"xxxxx-xxxxx-xxxxx-xxxxx",
		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/crafty_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
	};
	// END OF CONFIGURATION
	var _craftyclicks_headID = document.getElementsByTagName("head")[0];
	var _craftyclicks_mobileScript;
	_craftyclicks_mobileScript = document.createElement('script');
	_craftyclicks_mobileScript.type = 'text/javascript';
	_craftyclicks_mobileScript.src = 'https://*INSERT_YOUR_SHOP_PATH*/content/craftyclicks_bigcommerce.js';
	_craftyclicks_headID.appendChild(_craftyclicks_mobileScript); //load bigcommerce specific js
// ]]></script>

Step 3

Paste your access token on line 4 in the Analytics code in place of xxxxx-xxxxx-xxxxx-xxxxx.

Configuration (optional)

You will find some configuration options at the start of the analytics code encapsulated within the //Configuration and //End of configuration tags that will allow you to customise the look and feel of the plugin.

FAQ

Test

Before you go live, test the integration to make sure it is working properly.

For the Postcode Lookup integration only, we have the following free postcodes for testing: AA1 1AA, AA1 1AB, AA1 1AD and AA1 1AE.

If you need assistance, drop us an email on support@craftyclicks.co.uk – we will help!

Go Live

Once your trial lookups run out, you will need to decide on the best purchasing option based on the volume of usage you expect on your site. If you would like us to advise you then please get in touch.

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.
Last Updated: 4/1/2019, 2:39:28 PM