Introduction

The Store Locator (also referred to as the "Store Finder") allows visitors to your store to find their nearest store and (if the related services are enabled) select stores and/or collection points for delivery from the basket and the checkout.

This article describes how to include the various Store Locator/Finder features in your Aurora Front-end, and describes what they do.

Templates

This store finder (i.e. /google/store-locator) can be displayed using three different formats, each using an independent template:

• The main browser window
  • Template: content/store-finder.tpl.html
• Inline HTML popup element (no header or footer)
  • Template: content/store-finder-popup.tpl.html
• Independent browser window (no header or footer)
  • Template: content/store-finder-window.tpl.html

👍

Please note that the Store Locator AJAX endpoint and their templates are separate and are described in more detail in the Ajax Stock Store Locator article.

Template Variables

This section describes some of the variables available to these templates.

Searching for Stores

To search for stores, submit a POST request to the store locator with the following values:

• search = the value to be used when querying the Google Maps API
  • Coordinates are also supported as decimal degrees latitude and longitude such as 53.5745365,-2.2773156. When such values are submitted, the Google Maps API will not be queried.
• postcode = an alias for search. Both fields have the same functionality and are present for backwards compatibility.
• country = limit search to a given country (default: United Kingdom)
• radius = the radius in miles to display stores within the established search location (default: 50)
• window = display store finder using the window template 
• popup = display store finder using the popup template
• collect_in_store = only show stores that are marked with Collect In Store
• checkout_store_finder = flag passed to the template to allow checkout specific operations, such as updating page delivery detail

Search Form

<form method="post" action="/google/store-locator">
	<input type="hidden" name="radius" value="100" />
	<input type="hidden" name="window" value="{$window}" />
	<input type="hidden" name="dont_check_stock" value="{$dont_check_stock}" />
	{if $collect_in_store}
		<input type="hidden" name="collect_in_store" value="1" />
	{/if}
	{if $checkout_store_finder}
		<input type="hidden" name="checkout_store_finder" value="1" />
	{/if}
	<label>Search:</label>
	<input type="text" name="search" value="{$search}" />
	<input type="submit" value="SUBMIT" />
	<label>Country</label>
	<select name="country">
		<option value="United Kingdom">United Kingdom</option>
		{foreach from=$activeCountries item="activeCountry"}
			<option value="{$activeCountry.name}" {if $country == $activeCountry.name}selected="true"{/if}>{$activeCountry.name}</option>
		{/foreach}
	</select>
	<input type="submit" value="Search" />
</form>

Listing Search Results

<strong>10 RESULTS FOR STORES NEAR {$search}</strong>
<table>
	<thead>
		<tr>
			<td>STORE</td>
			<td>DISTANCE (MILES)</td>
		</tr>
	</thead>
	<tbody>
    {foreach from=$stores item="store" name="stores"}
    	{if $smarty.foreach.stores.index < 10}
			<tr>
				<td><a href="{$store.url}?radius=0&search={$search}{if $window}&window={$window}{/if}" rel="{$store.id}">{$store.name}</a></td>
				<td>{$store.distance}</td>
			</tr>
		{/if}
	{/foreach}
	</tbody>
</table>
 

👍

Displaying a store page using the $store.url will still return the closest stores within the default radius, you can limit this search to return a single store by specifying a radius of zero within the store URL i.e. radius=0

3rd Party Collection Points

If MetaPack Options is enabled, it will be possible to find available 3rd Party Collection Points. For more details, please see MetaPack Options

Displaying Store Details 

{if $store_id}
	{foreach from=$stores item="store" name="stores"}
		{if $smarty.foreach.stores.index < 1}
  			<h1>{$store.name}</h1>
			{if $search && $search != $store.postcode} 
				<p>{$store.distance} MILES</p>
			{/if}
			<h2>Address</h2>
			<p>{$store.address}</p>
			{if $store.telephone}
				<h2>Telephone Number</h2>
				<p>{$store.telephone}</p>
			{/if}
			{if $store.opening_hours}
				<h2>Opening and Closing Times</h2>
				<p>{$store.opening_hours}</p>
			{/if}
			{if $store.collect_in_store}
				<h3>Services</h3>
				<img src="/templates/{$templates_dir}/_images/collect-in-store.png" width="30" height="20" alt="Collect In Store">
			{/if}
			{if $search && $search != $store.postcode}
  				<a href="https://maps.google.co.uk/maps?daddr={$store.postcode|@urlencode}&saddr={$search|@urlencode}">GET DIRECTIONS</a>
			{/if}
		{/if}
	{/foreach}
{/if}

Listing All Stores

The store finder can also be used to display ALL client stores within Aurora.

Link to the A-Z Stores Listing

<a href="{$az_url}{if $window}?window={$window}{/if}">A-Z Store List</a>

Listing A-Z Stores

{if $azStores}
	{foreach from=$azStores key="letter" item="stores"}
		{if $stores|@count > 0}
			<a id="Letter{$letter}">{$letter}</a>
			<ul>
				{foreach from=$stores item="store"}
					<li><a href="{$store.url}?radius=0{if $window}&window={$window}{/if}" rel="{$store.id}">{$store.name}, {$store.country}</a></li>
				{/foreach}
			</ul>
		{/if}
	{/foreach}
{/if}

Google Maps Testing

You are able to test what the call being made to Google Maps is using this:

https://maps.googleapis.com/maps/api/geocode/json?address=<<Test Address Here>>&sensor=false&sensor=<<ISO 2 Country Code Here>>&key=<<API Key Here>>

Additional Fields

You are able to access Store Additional Fields on the front-end, providing they are setup as checkboxes and therefore allowing a value of 1 or 0.  This is currently in beta and only allows the checkboxes to be manually set by Aurora.  

    {foreach from = $additional_fields item=field}
          <input type="checkbox" name="additional_fields[{$field.id}]" value="1">{$field.field_name}&nbsp;&nbsp;
    {/foreach}

Displaying Errors

If an error occurs while retrieving a-z list of stores or while searching for stores, an errors variable will contain the error messages which could be displayed to the user:

{if !empty($errors)}
    <div class="errorbox">
        <h2>Unfortunately an error has occurred</h2>
        {foreach from=$errors item="error"}
            <div>{$error}</div>
        {/foreach}
    </div>
{/if}

Displaying searched post code

After search has been performed to the searchByProduct endpoint with postcode parameter in the request session store_locator_post_code will be available to visualise it.

{if isset($smarty.session.store_locator_post_code)}
	{assign var="postcode" value=$smarty.session.store_locator_post_code}
{/if}