Implementing the Javascript Store Locator

This tutorial takes you step-by-step through setting up the JavaScript web client on a simple HTML page. It only takes a few minutes and you can customise them later!

Preparation

Before starting this tutorial, we need to create a simple HTML page to add the web client to. You will firstly require a basic form with a postcode field into which users can drop their postcode:

<form method=post>

	<table>
		<tr>
			<td>Postcode</td>
			<td><input type=text name=postcode size=10></td>
		</tr>
	</table>
</form>

Step 1: Run the setup wizard

The first step is to run the account setup wizard by selecting “Set-up your account” in your account control panel. This should be fairly self explanatory but the choices/steps are:

• “I want to add a store locator to my web site"
• "Website client (recommended)”
• Enter the name for your Store Finder web client
• Select a daily limit for the number of lookups you would like to allow
• Select the Location List you would like to pull down your stores from
• Finally, hit “Create”

This will take you through to the “Almost Finished” page of the wizard. As you will see, the JavaScript has now been generated for you, so select “Copy” to pick it up.

Step 2: Add the code to your page

Now you need to copy the JavaScript onto your page. You should place it immediately to the right of the postcode text box. This is where the button will be placed when you're up and running.

<tr>
	<td>Postcode</td>
	<td>
		<input type=text name=postcode size=10><Add JavaScript here>
	</td>
</tr>

Now you need to upload your page and open it in a browser.

Step 3: Finish setting up the page

When you view your page in a browser, you will see a setup button. You need to click on the button which opens the setup web client window.

Firstly you will need to enter your Postcode Anywhere account password and select “Next”.

Finally you need to associate your postcode field with ours. Just pick your postcode field from the list before finishing the wizard.

You're done! Just refresh your page and you'll see that the button has changed and is ready to use. It's that easy!