Store Finder with 3rd party collection points - front-end guide

Introduction

This article explains how to modify your store's front-end templates to implement a 3rd party collection points into the Store Finder.

📘

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

🚧

Changes for Store Finder with Combined Fascia Results templates are documented in the Store Finder with combined fascia results - front-end guide support article. This article assumes that templates are already modified according to it.

Templates

Depending on your sites 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 3rd Party Collection Point Check Box

You will not need to change your Store Finder template(s) to show the 3rd party collection point check box. It will appear automatically after you will enable MetaPack Options.

Using Customised Map Markers For 3rd Party Collection Points

To display customised map markers for 3rd party collection points you will need:

Change js in the store locator template(s)

In initialize() js function find and change these lines:

1. Find the line 

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

   Change to 

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

2. Find the line

image.appendTo('#marker_{$store.id}');

Change to

image.appendTo('#marker_{$store.type}_{$store.id}');

3. Find the line

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

   Change to

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

Change html in the store locator template(s)

Change markers

In html find a line where the store marker is used:

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

Change marker from:

id="marker_{$store.id}"

to:

id="marker_{$store.type}_{$store.id}"

Change html containing store info

Find the line containing store info:

{if $smarty.session.checkout_store_finder}<p><a href="" title="" rel="{$store.id}" class="storefinder_arrowlink basket_choose_store_link">{site_text page="Store Finder" part="Link: Choose Store for Delivery"}</a></p>{/if}

change it to:

{if $smarty.session.checkout_store_finder}<p><a href="" title="" data-store-id="{$store.id}" data-store-type="{$store.type}" data-store-info="{$store.name}<br/>{$store.address}" class="storefinder_arrowlink basket_choose_store_link">{site_text page="Store Finder" part="Link: Choose Store for Delivery"}</a></p>{/if}