Creating a custom search widget for your store locator

IMPORTANT: You'll need to change the UID value from 2435124 to your unique account id (which is shown on the main menu). Alternatively log in then come back to this page and we'll fill it in for you.

Need a small search form suitable for a homepage or sidebar?
It's simple with a little HTML magic. Below are a few examples to get you started.


Example 1 - custom form opening store locator in its own page

The following example custom search form redirects to your locator page and performs a search. Be sure to fill in the URL of your store locator page in the action attribute.

Copy the following anywhere you want the search box to show:


<form method='get' action='[URL OF YOUR STORE LOCATOR PAGE]'>
<h2>Find your nearest Blipstar demo store...</h2>
Enter a placename or zip code<br/><br/>
<input type='hidden' name='uid' value='2435124'>
<input type='text' name='search' value=''/>
<input type='submit' value='Search'/>
</form>

Why does the above do? Basically it creates a standard HTML form that gets submitted to the page you entered in "action".

Next, paste the following in your store locator page (i.e. the page where you've embedded your store locator). Ideally the Javascript should go in the HEAD element


<script>
function getURLParameter(name){return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,''])[1].replace(/\+/g, '%20'))||null}
var spm=getURLParameter('search');if(spm!=null){var ifms=document.getElementsByTagName('iframe');for(var ii=0;ii<ifms.length;ii++){var ifm=ifms[ii];if(ifm.getAttribute('src').indexOf('blipstar.com')!=-1)ifm.setAttribute('src',ifm.getAttribute('src')+'&search='+spm);}}
</script>

Why does the above do? It "reads in" the search parameter (from the search form) and passes it through to the embedded store locator, so it knows to start a search based on the input text.





Example 2 - custom form opening store locator within the page

Next up is code that opens up the store locator results inside an iframe (which is embedded within the page, but initially hidden). Put the iframe element where you'd like the results to appear within a page.


 <form action='http://www.blipstar.com/show?uid=2435124' onsubmit='return checkLocatorForm();'>
 <input type='text' name='search' id='locatorsearch' value=''/>
 <input type='submit' value='Search'/>
 </form>
 <script type='text/javascript'>
 function checkLocatorForm()
 {
 var searchvalue=document.getElementById('locatorsearch').value;
 var ltool=document.getElementById('locatortool');
 ltool.setAttribute('src','http://www.blipstar.com/show?uid=2435124&search='+escape(searchvalue));
 ltool.style.display='block';
 return false;
 }
 </script>
 <iframe id='locatortool' style='display:none' width='802' height='502' scrolling='no' frameborder='0'></iframe>



Example 3 - Text only results

If space is at a premium on your site and you don't require a map to display search results you can switch over to a Text-only store locator. The results are automatically resized to whatever size iframe or DIV you've defined making it ideal for showing nearest locations in a side bar for example.


<form method='get' action='http://www.blipstar.com/blipstarplus/viewer/maptextonly' target='bsresults' onsubmit='document.getElementById("bsresults").height=400;'>
<h2>Find your nearest Blipstar demo store...</h2>
Enter a placename or zip code<br/><br/>
<input type='hidden' name='uid' value='2435124'>
<input type='text' name='search' value=''/>
<input type='submit' value='Search'/>
</form>
<iframe name='bsresults' id='bsresults' src='' width='100%' height='0' frameborder='no' scrolling='no'></iframe>





Note that in the above example the iframe window height is set to 400 pixels - you can set whatever value you like.


If you need any help in setting it up just contact us.
Providing store locator solutions since 2006.   Share: Linkedin  |  Twitter  |  Google+  |  Facebook  |  Pinterest