Customize your store locator search results
Using CSS to style your store locator
Tags and search filtering
Guide to using icons
Setting up sales territories/regions
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.
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='text' name='search' value=''/> <input type='submit' value='Search'/> </form> |
What 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 at the bottom of the page.
<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.
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='https://viewer.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','https://viewer.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>
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. |
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='https://viewer.blipstar.com/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>
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. |
