StoreLocator

What is StoreLocator?¶

StoreLocator is a snippet that integrates Google Maps into MODX® to allow your users to find stores (or whatever location you want them to find) that are close to an address (their home for instance). StoreLocator is easily integrated in your website and is fully customizable.

StoreLocator is created and maintained by SCHERP Ontwikkeling.

Requirements¶

StoreLocator required MODX® Revolution 2.2.0 or later.

History¶

Download & Installation¶

Install the package through the MODX® package manager.

Using StoreLocator in the manager¶

Adding stores¶

To add a store, simply log in to the manager and click "Components" -> "Store Locator". Once in the StoreLocator you will see the page "Manage stores". Now click the button "Add store location" and you will see the following window:

From there you can add a store by filling in the description, longitude and latitude coordinates and select the resource you want to link this store to. The resource will be assigned to the storeRowTpl so you can use all it's data to show the needed placeholders in the front-end. If you don't want to enter the coordinates by hand simply type the address next to the "Address:" box and click search. The script will then post your query to Google Maps and get the coordinates for you.

Sorting stores¶

To sort stores log in to the manager and go to "Components" -> "Store Locator". You will see a grid containing all of your stores, you can just pick up a single row and drop it where you want it to be.

Using StoreLocator in the front-end (user side)¶

Placing the snippet¶

Place the main [[[StoreLocator](extras/storelocator "StoreLocator")]] snippet call on your webpage. If you have placed the snippet it assigns the following placeholders to your page:

You can configure the snippet "StoreLocator" with the following parameters:

Examples¶

Below you see the main snippet call and the placement of the placeholders. Every parameter is optional, we have just used some possibilities of customization.

[[!StoreLocator?
    &searchZoom=`10`
    &zoom=`7`
    &markerImage=`/assets/mcdonalds.png`
    &width=`640`
    &height=`480`
    &centerLongitude=`5.509644`
    &centerLatitude=`52.469397`
]]

<table>
   <tr>
      <td style="width: 640px;">
        [[+StoreLocator.map]]        <!-- This shows the google map -->
      </td>
      <td style="vertical-align: top;">
        [[+StoreLocator.form]]       <!-- This shows the search form -->
        <hr />
        [[+StoreLocator.matchedStores]] / [[+StoreLocator.totalStores]] <!-- This shows number of found stores / total stores -->
        [[+StoreLocator.storeList]]  <!-- This shows the list of stores and search results -->
      </td>
   </tr>
</table>

YouTube example¶

Here's an example of the usage and placement of the snippet call: http://www.youtube.com/watch?v=__5Oi4Tqz50

StoreLocator premium¶

You have the possibility to buy StoreLocator premium through the about screen in the component. This will add the following functionality:

• Custom caching (storelist and search results)
• Custom marker images for each individual store
• Possibility to get directions from the entered address to a store from the StoreLocator screen
• A snippet that can plot directions to a specific store from an entered address.

Check out the video demo: Custom marker images: http://www.youtube.com/watch?v=keUjHDmOJnw Directions / route planner: http://www.youtube.com/watch?v=FOAWcdoFysk

External sources¶

Developers website: http://www.scherpontwikkeling.nl

GitHub repository: http://www.github.com/b03tz/StoreLocator/

Report bugs and request features: http://www.github.com/b03tz/StoreLocator/issues

Help requests: http://forums.modx.com/thread/74885/support-topic-for-storelocator-1-0-pl-1