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.
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.
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:
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.
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.
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.
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.
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>
The templates that control the location finder are powered by . 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.
