Implementing a Selectable Store Finder

Quite, a few of you have been in touch with us regarding store locators that can be narrowed down by categories.

For example, you might have several items that your stores stock, let’s say hammers and nails. You want your customers to be able to enter their postcode and then select either stores that stock hammers, or stores that stock nails.

The good news is that this is a service Postcode Anywhere can provide, and the following guide will take you step by step through setting this up.

Step 1: Preparation

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. In this example we would create a list for Hammer stockists, a list for nail stockists, and possibly a list for both. We have a guide on creating location lists. Once you have created your location lists you will need to learn their unique ID’s. These can be found by selecting the location list from the location list menu, the ID of the list will be visible at the top of the 'General Settings' section. In this example our ID’s are:

• Hammers: 4148
• Nails: 4150

Secondly you will need to generate a web service key; this can be done through the Setup My Account wizard.

Step 2: Putting it all together

Now you have all your bits and pieces for you selective store locator, you are ready to put them together. The glue that holds these together will be a JavaScript function:

function StoreFinder_Interactive_RetrieveNearest_v1_00Begin(Key, Origin, MaximumItems, MaximumRadius, MaximumTime, DistanceType, LocationLists)
   {
      var scriptTag = document.getElementById("PCA4a21c5fbe054461c888b23d07e65fe87");
      var headTag = document.getElementsByTagName("head").item(0);
      var strUrl = "";

      //Build the url
      strUrl = "http://services.postcodeanywhere.co.uk/StoreFinder/Interactive/RetrieveNearest/v1.00/json.ws?";
      strUrl += "&Key=" + escape(Key);
      strUrl += "&Origin=" + escape(Origin);
      strUrl += "&MaximumItems=" + escape(MaximumItems);
      strUrl += "&MaximumRadius=" + escape(MaximumRadius);
      strUrl += "&MaximumTime=" + escape(MaximumTime);
      strUrl += "&DistanceType=" + escape(DistanceType);
      strUrl += "&LocationLists=" + escape(LocationLists);
      strUrl += "&CallbackFunction=StoreFinder_Interactive_RetrieveNearest_v1_00End";

      //Make the request
      if (scriptTag) 
         {
            try
              {
                  headTag.removeChild(scriptTag);
              }
            catch (e)
              {
                  //Ignore
              }
         }
      scriptTag = document.createElement("script");
      scriptTag.src = strUrl
      scriptTag.type = "text/javascript";
      scriptTag.id = "PCA4a21c5fbe054461c888b23d07e65fe87";
      headTag.appendChild(scriptTag);
   }

function StoreFinder_Interactive_RetrieveNearest_v1_00End(response)
   {
      //Test for an error
      if (response.length==1 && typeof(response[0].Error) != 'undefined')
         {
            //Show the error message
            alert(response[0].Description);
         }
      else
         {
            //Check if there were any items found
            if (response.length==0)
               {
                  alert("Sorry, no matching items found");
               }
            else
               {
                  //Put your code here
                  //FYI: The output is an array of key value pairs (e.g. response[0].YourId), the keys being:
                  //YourId
                  //Name
                  //Description
                  //Distance
                  //Time
                  //Easting
                  //Northing
                  //Latitude
                  //Longitude
               }
         }
   }

However, before we come to this we need a form in which to place our lookup:

<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 ID’s 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:

<input type="button" id="Go" value="Click to find" onclick="Javascript:StoreFinder_Interactive_RetrieveNearest_v1_00Begin
                         (
                         'AA11-AA11-AA11-AA11', 
                           document.getElementById('Postcode').value,'','','','',
                          document.getElementById('Stock').value)">

This will trigger the function shown above, inputting the postcode, and the location list ID from the form. (Remember 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[0].Name + ",<br />" + response[0].Description + ",<br />" + response[0].Distance + " KM.";

This will return the address and details of the closest store to the entered postcode, selected from the list of stockists specified by the drop down menu.