Support > Advanced Topics > How to link an address search field to your store locator

How to link an address search field to your store locator

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.

In this article 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 text in bold to the URL of your store locator.

<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" placeholder="Enter an address" name='slwaddress'/> <button value='Seach'>Search</button>
</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 between the <head> and </head> tags on your page:

<!-- Latest version of jQuery -->
<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>

In this case, you'll need to change the bold text to the name of your address search input field. For example, the above code will work with an input field with an ID of 'slwaddress' and defined as follows:

<input type="text" autofocus="autofocus" placeholder="Enter an address" id='slwaddress'/>

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.