Store locator theme example

Example of customizing the Store Locator module using handlebars JS templates

Styling

The Store Locator module has limited styling that can be overridden via your own CSS rules. Most of the main elements (location list, map, search bar) are positioned on the page via absolute positioning. You can set your own positions for these elements. Examples of this include positioning the Location List on the right side versus the left, or overlaying the location list on top of the Map area.

Custom map pins

Below is an example of custom CSS that can be used to add you own custom map pin icon/images.

.sb-marker {
  width: 45px;
  height: 45px;
  top: -45px;
  left: -22px;
  background-size: cover;
  background-image: url(/img/upload/pin.png);
}
.sb-marker:hover,
.sb-marker.sb-marker-selected {
  background-image: url(/img/upload/pin-selected.png);
}
.sb-marker.sb-marker-currentlocation {
  background-image: url(/img/upload/pin-current.png);
}

Service tag map pins

If your store locator is configured with custom service tags for each location, our store locator will add additional classes to each pin that can be used to modify the display of the pin for different location types.

All these additional classes are added to the same .sb-marker element, one for each services_tags

Here is an example of the services_tags for a location, which could be "atm" or "branch-location" and the associated CSS to style those two location types.

"services_tags": ["atm"]

.sb-marker.sb-marker-service--atm {
  background-image: url(/img/upload/pin-atm.png);
}
.sb-marker.sb-marker-service--branch-location {
  background-image: url(/img/upload/pin-branch.png);
}

Offset for the map pins

Our base styles for the store locator add some spacing inside the map on "desktop" view that "push" the pins displayed to the right to make room for the location list on the left.

You can override these values by adding your own CSS. This example shows our defaults that you can modify to your liking:

.sb-map-bounds {
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 390px;
}

You can also set different bounds rules using CSS media breakpoints.

Note: our system reads these CSS padding values and applies them in javascript. So only use padding rules in this CSS declaration. Other CSS rules will not be applied (i.e. colors, margins, etc).

Custom templates

Add the handlebars library

This should be the first script before you any of the handlebars templates. This will server the handlebars library from a CDN.

The templates that control the location finder are powered by Handlebars.js. The handlebars library and the handlebars templates that you add need to come before the Store locator module on the page. These are normally added in the Header Template of a Custom Theme, or as an HTML Code module added above the Store Locator module on a page.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

Template examples

Override the location item template

Below is an example of customizing the "location item" that is displayed next to the map for each location that is returned by the visitor search.

<script id="template-location-item" type="text/x-handlebars-template">
{% raw %}
<div class="sb-location">
<div class="sb-location-name">{{location.location_name}}</div>
<div class="sb-location-distance">{{distance}} mi</div>
<div class="sb-location-address">{{location.street}} {{location.street2}}<br>{{location.city}}, {{location.state}} {{location.postal_code}}</div>
<div class="sb-location-hours">Open Today: {{location.todays_hours_of_operation}}</div>
<div class="sb-location-phone"><a href="tel:{{location.phonemap.phone}}">{{location.phonemap.phone}}</a></div>
<div class="sb-location-links">
<span class="sb-location-link sb-location-link-view-location"><a href="{{location.location_url}}" rel="noopener noreferrer" target="_blank">View Location</a></span>
<span class="sb-location-link sb-location-link-get-directions"><a href="https://www.google.com/maps/dir/?api=1&amp;destination={{location.street}} {{location.street2}} {{location.city}}, {{location.state}} {{location.postal_code}}" rel="noopener noreferrer" target="_blank">Get Directions</a></span>
</div>
</div>
{% endraw %}
</script>

Override the "infowindow" template

Below is an example of customizing the "info window" that is displayed when you click or select a Location from the Location List in the Store Locator.

<script id="template-location-infowindow" type="text/x-handlebars-template">
{% raw %}
<div id="infoWindow">
<div class="sb-location-infowindow">
<div class="sb-location-distance">{{distance}} mi</div>
<div class="sb-location-address">{{location.street}} {{location.street2}}<br>{{location.city}}, {{location.state}} {{location.postal_code}}</div>
<div class="sb-location-hours">Open Today: {{location.todays_hours_of_operation}}</div>
<div class="sb-location-phone"><a href="tel:{{location.phonemap.phone}}">{{location.phonemap.phone}}</a></div>
<div class="sb-location-links"><span class="sb-location-link sb-location-link-view-location"><a href="{{location.location_url}}" rel="noopener noreferrer" target="_blank">View Location</a></span><span class="sb-view-location" rel="noopener noreferrer" target="_blank"><a href="https://www.google.com/maps/dir/?api=1&amp;destination={{location.street}} {{location.street2}} {{location.city}}, {{location.state}} {{location.postal_code}}" target="_blank">Get Directions</a></span></div>
</div>
</div>
{% endraw %}
</script>

Override the "not-found" message template

Below is an example of changing the messaging when no results are found after a search.

<script id="template-locations-not-found" type="text/x-handlebars-template">
{% raw %}
<span>No results found</span>
{% endraw %}
</script>

Override the "not-found-filters" message template

Below is an example of changing the messaging when no results are found after filters are selected.

<script id="template-locations-not-found-filters" type="text/x-handlebars-template">
{% raw %}
<span>No results found for the selected filters</span>
{% endraw %}
</script>

Override the "loading-message" template

This can override the loading message shown when a location search is being done by the visitor.

<script id="template-locations-loading-message" type="text/x-handlebars-template">
{% raw %}
<span>Loading...</span>
{% endraw %}
</script>

Override the "search-required" message template

If the location finder requires a user search (i.e. geolocation is disabled), this can be used to customize the message prompting the user to search.

<script id="template-locations-search-required" type="text/x-handlebars-template">
{% raw %}
<span>Please search for a location above</span>
{% endraw %}
</script>

Override the "nolocation-search-required" message template

If the user has geolocation disabled or we can't determine the user's location, this message is shown to prompt the user to enter a manual search.

<script id="template-locations-nolocation-search-required" type="text/x-handlebars-template">
{% raw %}
<span>We cannot find your current location. Please search for a location above</span>
{% endraw %}
</script>

Override the "use-current-location" template

This link shows and is clickable by the visitor to re-search using their current location detected by the browser.

<script id="template-use-current-location" type="text/x-handlebars-template">
<a>use my current location</a>
</script>

Override the "invalid-request" template

This message will show if the user puts a location into the search which is not a location that can be found on the Google geocoding API.

<script id="template-invalid-request" type="text/x-handlebars-template">
<span>Invalid Request</span>
</script>

Custom events

We expose some custom javascript events that can be used to trigger logic within your location finder template.

sbevents:locationfinder:loaded

This event is called every time the location finder is loaded or a new search has completed.

<script defer>
document.addEventListener('sbevents:locationfinder:loaded', function(e) {
   // do something
});
</script>

One example use of this is to manipulate the location finder layout like adding or appending an element inside the location finder DOM.

<script defer>
document.addEventListener('sbevents:locationfinder:loaded', function(e) {
    // if we have not already added the element to the DOM, add it
    if (document.getElementsByClassName('custom-class-here').length === 0) {
        $( ".sb-search-form" ).prepend('<div class="custom-class-here">Some header</div>');
    }
});
</script>