Store Locator By Twin Dots

Store Locator

$60.00

Added: January, 24, 2013
Category: Merchandising
Version: 1.0 - view changes
Purchases: 11

Please log in to purchase this product.

The Store Locator module allows customers to search for stores/stockists in a certain geographical area using Postcode/ZIP, town/city, county, coordinates... or anything else Google Maps will accept!

 

Alternatively, customers can use the FIND ME button to detect their current location using the Geolocation API with the option to narrow the search between 5 and 200 miles - Ideal for mobile devices!

 

 

Module settings

Once you install the module, proceed to the backend System > Settings and select the Store locator settings:

 

 

The module settings allows you to customize the following:

  • Unit of distance: Miles or Kilometers
  • Default country - please note, this does not limit the search to a certain country, but rather influences the search for that country
  • Maximum number of results to display per search
  • The hex colour of the marker (eg FFFFFF)
  • The hex colour of the marker's border (eg CCCCCC)

 

 

 

Stores management

To manage stores, from the dashboard select Stores and you will be presented with the following stores management screen:

 

 

Selecting a store from the list, you can edit its name and description which will be displayed in the map bubble - as seen in the attached screenshot:

 

 

From the Address tab, input the store address and click Calculate coordinates:

 

 

The longitude and latitude will be automatically calculated and populate their respective fields as displayed in the screenshot above. However, to ensure Google has found the right location, you can click on Check on Google which will open the location map in an overlay. You can always enter the coordinates manually if the pin is not in the desired location.

 

 

Module Installation

Installing the Store Locator module requires a basic understanding of HTML/CSS/JS to integrate the module in your current LemonStand website.

Create a page (we use "/store-locator") and give it the action: tdstorelocator:stores

The main content of the page requires the 4 following containers (please note the ID's - these must be the same):

 

<form id="td-store-locator-form"></form>
<ol id="td-store-locator-results"></ol>
<div id="td-store-locator-map"></div>
<div id="td-store-locator-no-results"></div>

 

The site uses various javascript libraries including Underscore, Backbone and Google Maps to control the search results/map as well as for templating - please include the following sections in your Heads & Blocks section of your page:

 

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

 

Under this, we need to define a few options, in the section of your page, add the following:

 

<script type="text/javascript">
    tdstorelocator = {};
    tdstorelocator.default_country = '<?= tdstorelocator_module::default_country_js() ?>';
    tdstorelocator.fill_colour = '<?= tdstorelocator_module::fill_colour() ?>';
    tdstorelocator.stroke_colour = '<?= tdstorelocator_module::stroke_colour() ?>';
    tdstorelocator.default_marker = '/modules/tdstorelocator/resources/images/map-marker.png';
</script>

 

Next, we have some javascript files which control the different operations the page will be performing:

 

<?php echo $this->js_combine(array(
    '/modules/tdstorelocator/resources/javascript/frontend/models/tdstorelocator_store.js',
    '/modules/tdstorelocator/resources/javascript/frontend/views/tdstorelocator_no_results.js',
    '/modules/tdstorelocator/resources/javascript/frontend/views/tdstorelocator_map.js',
    '/modules/tdstorelocator/resources/javascript/frontend/views/tdstorelocator_list.js',
    '/modules/tdstorelocator/resources/javascript/frontend/views/tdstorelocator_form.js',
    '/modules/tdstorelocator/resources/javascript/frontend.js'
)); ?>

 

And now the last step, we need to define our templates for each of the sections:

 

<!-- FORM TEMPLATE-->
<script type="text/template" id="td-store-locator-form-template">
    <a href="#" data-purpose="find-me">Use my current location</a>
    <input data-purpose="address" type="text" id="address" name="address" />
    <select name="radius" id="radius">
        <option value="5">Within 5 miles</option>
        <option value="10">Within 10 miles</option>
        <option value="25">Within 20 miles</option>
        <option value="50">Within 50 miles</option>
        <option value="100">Within 100 miles</option>
        <option value="200">Within 200 miles</option>
    </select>
    <input type="submit" value="Search" />
</script>
<!-- RESULTS TEMPLATE -->
<script type="text/template" id="td-store-locator-results-template">
    <li data-cid="{{store.cid}}">
        <h3>{{store.escape('name')}} <small class="distance">{{store.get('distance')}} away</small></h3>
        <p><img src="chart.apis.google.com/chart?chst=d_map_pin_letter&chld={{store.get('order')}}|{{fill_colour}}|{{stroke_colour}}" alt="count" />{{store.getAddress()}}</p>
    </li>
</script>
<!-- NO RESULTS TEMPLATE -->
<script type="text/template" id="td-store-locator-no-results-template">     <p class="error">No stores or retailers were found in the area you specified, try broadening your search.</p>
</script>

 

Feel free to edit the template as you wish and apply any CSS that is required.

 

Support

If you have any questions or need assistance with this module, feel free to get in touch and we'll get back to you swiftly!

 

 Store locator module: See it in action →

 

Share your experience!

Customer reviews

There are no reviews for this product.

Please log in if you want to write a review. Only customers who have ordered this product can post reviews.