Store Finder with combined fascia results - front-end guide

Introduction

This article explains how to modify your store's front-end templates to implement a Store Finder with a combined fascia results.

📘

Generic Store Finder templates are documented in the Store Locator/Finder support article.

Templates

Depending on your site's customisation, you will need to modify one more store finder template. Store finder templates are stored in your templates/{your_domain}/content/ directory.
Typically, there will be these templates:

• store-finder.tpl.html
• store-finder-popup.tpl.html
• store-finder-window.tpl.html

In this guide, we will relate to these templates as store finder templates.

Displaying Fascia Check Boxes

You will need to change you Store Finder template(s) to show the fascia check boxes. To do that please add this code into your store finder, which can be found in store finder template(s):

{if $fascias}
    <span>Show: </span>
    <div>
        {foreach from=$fascias item="fascia"}
            <input type="checkbox" name="fascias[]" value="{$fascia.code}" {if $fascia.selected}checked="checked"{/if}>{$fascia.name}&nbsp;&nbsp;
        {/foreach}
    </div>
{/if}

Using Customised Map Markers For Different Fascias

To display customised map markers for different fascias you will need:

Add MapIconMaker js class

To add the MapIconMaker js class direct link or GitHub to your templates directory as templates/{your_domain}/_js/mapiconmaker.js . This class allows to create custom map mappers for different fascias.

Include MapIconMaker js class

To include MapIconMaker js class you will need to modify your store finder template(s). There should be 2 places in a store finder template you will need to change.

You should have:

{include file="_includes/header.tpl.html" metaTitle=$metaTitle page_css_template="storefinder"} 

Please modify it to include the MapIconMaker js class:

{include file="_includes/header.tpl.html" metaTitle=$metaTitle page_css_template="storefinder" page_js_template="mapiconmaker"} 

Also you should have in the same template:

{include_js files="jquery.min,jquery-ui.min,r:jquery.livequery,r:config,r:basket"}

Please modify it to include MapIconMaker js class:

{include_js files="jquery.min,jquery-ui.min,r:jquery.livequery,r:config,r:basket,mapiconmaker"}

Define getIcon() js function

In your store finder template(s) you will need to define a new getIcon() js function:

function getIcon(fascia_code, label){
		
	var color = '#ffbaba';
		
	switch(fascia_code) {
		case 'F1': // Fascia One code
			color = '#ff0000';
			break;
		case 'F2': // Fascia Two code
			color = '#00ff00';
			break;
		case 'F3': // Fascia Three code
			color = '#0000ff';
			break;
		case 'F4': // Fascia Four code
			color = '#ffff00';
			break;
		case 'F5': // Fascia Five code
			color = '#ff00ff';
			break;
		case 'F6': // Fascia Six code
			color = '#00ffff';
			break;
		default:
			color = '#ffbaba';
			break;
	}
		
	return MapIconMaker.createLabeledMarkerIcon({primaryColor: color, label: label, labelSize: 5});
}

getIcon() function will create a map marker by using MapIconMaker js class. You must modify this function and provide your fascia codes with a selected colour codes. If you are using customised map markers, you will need to adjust the function to use them.

❗️

Please make sure that the function is wrapped by $(document).ready(function() ... ) like all other js functions in the template(s).

Modify createMarker() js function

The signature of default createMarker() js function is:

/**
 * Creates a marker
 * @param point - google maps pointer coordinates
 * @param content - text description
 * @return marker
 */
function createMarker(point, content)

Please change it to accept additional icon parameter:

/**
 * Creates a marker
 * @param point - google maps pointer coordinates
 * @param content - text description
 * @param icon - icon for marker
 * @return marker
 */
function createMarker(point, content, icon)

Default createMarker() js function has these lines of code:

var marker_options = {	map: map,
						position: point};

Please change them to set the custom icon:

var marker_options = {	map: map,
						position: point};
			
if(typeof icon !== 'undefined'){
	marker_options['icon'] = icon;				
}

Change a call to createMarker() js function

In your store finder template(s) should be a call to the createMarker() js function. It should be inside {foreach from=$stores name="stores" item="store"} loop and should look like:

markers[{$store.id}] = createMarker(point, content);

Please change it to:

{if $fascias}
	var fascia_code = '{$store.fascia_store_code}';
	{if $search}
		var label = ({$smarty.foreach.stores.iteration}).toString();
	{else}
		var label = '*'; // no labels
	{/if}
	
	var icon = getIcon(fascia_code, label).icon;
	markers[{$store.id}] = createMarker(point, content, icon);
		
	// setting image to store list
	var image = $('<img>');
	image.attr('src', icon.url);
	image.appendTo('#marker_{$store.id}');
{else}
	markers[{$store.id}] = createMarker(point, content);
{/if}

❗️

Please be aware that for {$smarty.foreach.stores.iteration} to work in a loop where you iterate over stores, a name must be provided:

{foreach from=$stores item=store name="stores"}

Change Store Listing to Display Customised Map Marker Next to Store Details

Your store listing displays a store address, contact phone number, distance from selected post code and other information. To additionally display the customised map marker, you will need to modify your store finder template(s) and add this line:

<h2><span class="marker" id="marker_{$store.id}"></span><a href="{$store.url}{$store_url_suffix}" class="store_finder_name">{$store.name}</a></h2>

You should have:

...
{elseif $search}
	{if $stores}
	<h2>{site_text page="Store Finder" part="Title: Closest Stores Near You"}</h2>
		<ul>
			{foreach from=$stores name="stores" item="store"}
				{if $smarty.foreach.stores.index < 10}
				<li>
					<span class="km" {if !$store.distance}style="display:none;"{/if}><span id="store_distance_{$store.id}">{$store.distance}</span><br /><span class="km_text">({site_text page="Store Finder" part="Text: Miles"})</span></span>
					<p>{$store.address}</p>
					...
				</li>
				{/if}
			{/foreach}
		</ul>
		<div class="clear"></div>
	{else}
		<h2>{site_text page="Store Finder" part="Title: No Stores Found"}</h2>
	{/if}
{/if}

Lastly, you will have to add the above mentioned line below this line:

<span class="km" {if !$store.distance}style="display:none;"{/if}><span id="store_distance_{$store.id}">{$store.distance}</span><br /><span class="km_text">({site_text page="Store Finder" part="Text: Miles"})</span></span>