How to link an address search field to your store locator software

One useful piece of functionality that you might want to add to your website or online store is the ability to link an address search field to your store locator so that when customers enter an address into the search field, an address lookup is automatically performed in the store locator. For example, you might have a small search box on your home page which allows customers to enter a zip code or post code to search for which will immediately open up your store locator.

As of October 2024 we have launched a built in built in widget which can be used to automatically add a search bar to your website. You can find our Blog post here or you can find the new Search Bar Preview, Settings and setup instructions here: https://www.storelocatorwidgets.com/admin/SearchBar.

Otherwise, if you prefer to add the search bar manually, below we describe how to set this up for both search fields located on the same page as the locator and also triggering an address lookup in the locator from another page.

Address search field on different page to store locator

The first scenario we will cover is if you'd like to link an address search field on one page such as your home page so that when a customer enters an address in the search field it redirects to the page which holds your store locator and immediately searches for that address. Here's the HTML that should be used in this scenario. The only change you should need to make is to change the URL "https://www.storelocatorwidgets.com/demo" to the URL of your store locator. The Filter selection is optional and only applies if you want to allow customers to select a Filter as well; if you don't need this just delete it:

<form method='get' action='https://www.storelocatorwidgets.com/demo'>
	<h2>Search for an address...h2>
	Enter a place name or zip code<br/><br/>
	<input type="text" autofocus="autofocus" placeholder="Enter an address" name='slwaddress'/>
	<select name="slwfilters">
		<option value="Filter 1">Filter 1option>
		<option value="Filter 3">Filter 2option>
		<option value="Filter 3">Filter 3option>
	select>
	<button class='btn btn-sm btn-primary' value='Seach'>Searchbutton>
form>

  

That's all that is needed to link a search field to your locator. If you'd like to see this in action, here's a link to our demo page.

Address search field on the same page as your store locator

The second scenario is where you would like to link an address search field to a store locator on the same page as the address search field. In this case we use Javascript to directly link the address search to your store locator. To get this working, you'll need to add the following to your web page inside the head tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">script>
<script>
	$(document).ready(function(){
		$('#myForm').submit(function(event) {
			event.preventDefault();
			var address = $('#slwaddress').val();
			$('#storelocator-search_address').val(address);
			storeLocatorSetUserAddress(address);
		});
	});
script>

Next, add the following section where you want the search field to appear:

<form id="myForm">
	<div>
		<input type="text" autofocus="autofocus" style="width: 250px;" placeholder="Please enter an address" name='slwaddress' id='slwaddress'/>
	div>
	<button type="submit">Searchbuttonbutton>
form>

If you'd like to see a demo of the above, here's a link to our demo page.

As always, if you run into any problems do get in touch so we can help out as we have a number of other ways to support linking an address search field to our locator which might work in different usage scenarios.