Prepare your lists
To begin with you will need to set up separate location lists for each category you want your customers to be able to select from. If you are unsure how to do this, this tutorial will help you set up a location list.
In this example we will create a list for hammer stockists and a list for nail stockists - it might be desirable to create a list for both, but we're not doing that here. Once you have created your location lists you will need to know their unique IDs. These can be found by selecting the All Services link from the menu on the left of the account section - the ID of each list is given as the key of the service in the table shown. In this example our IDs are:
- Hammers: 4148
- Nails: 4150
Next you will need to generate an API Key. In your account click New Service in the menu on the left and choose to create an API key.
Putting the lists together
However, before we come to this we need a form in which to place our search:
<form> <input type="Text" id="Postcode" /> <select id="Stock"> <option value="4148">Hammers</option> <option value="4150">Nails</option> </select> <input type="button" id="Go" value="Click to find" /> <br /> <br /> <label id="label1"></label> </form>
As you can see we have a textbox for the postcode to be entered into, a selection box for the stockist options, and a button to trigger the search. (The label will be used to return the closest store data).
Notice that the drop down menu values are set to the IDs of the location lists.
Now we need an on-click event to trigger the search, so we add this in to the button tag in the form:
This will trigger the function shown above, inputting the postcode, and the location list ID from the form. Don't forget to replace the key with your own web service key.
Finally we need to do something with the returned data, so we add the following into the "//Put your code here" section of the function:
document.getElementById('label1').innerHTML = "Closest Store: <br /><br />" + response.Name + ",<br />" + response.Description + ",<br />" + response.Distance + " KM.";
This will return the address and details of the store closest to the entered postcode, selected from the list of stockists specified by the drop down menu. Now all you need to do is customise it so that it works exactly how you want it to.
Don't forget, if you get stuck and need a hand you can contact our support team and we'll be happy to help.
Can't find what you're looking for?
0800 047 0493