Store Locator Widget Advanced Usage
Listen to advanced user events and customize your widget with your own style.
Events
The Store Locator Widget provides events you can listen to.
Whenever a user triggers an existing event from the HANDLED_EVENT
object, the Store Locator Widget will fire a callback function with dedicated parameters.
For example, the Widget will fire a SELECT_STORE
event when the user selects a Store either by clicking on a store from the side panel or by clicking a marker on the map. The fired callback function for this event has the store_id
parameter.
Supported Events
We mainly focus on User Events. Here is the full list of supported events and the parameters that are passed to the callback function. Check reference for more details.
Event Name | Descripition | Parameters |
---|---|---|
FAVORITED |
Triggered when a store is set as favorite | id_store |
SELECT_STORE |
Triggered when a store is selected | id_store |
PHONE_CLICK |
Triggered when the phone number of a selected store is clicked | id_store , phone |
EMAIL_CLICK |
Triggered when the email of a selected store is clicked | id_store , email |
LOCATION_SELECTED |
Triggered when the user select a suggestion from the search results | LatlngLocation |
GEOCODE |
Triggered when a geocode request succeeds | querystring |
AUTOCOMPLETE |
Triggered when an autocomplete request is sent | querystring |
GET_DIRECTIONS |
Triggered when retrieving directions | id_store , startLatlng , endLatlng |
SELECT_DIRECTION |
Triggered when an itinerary is selected from the directions list | id_store , SelectedDirection |
Handling Events
To register for event notifications, use the methods listenOn or listenOnce, event handler. That method takes an event to listen for, and a function to call when the specified event occurs.
const webapp = new WebApp('storeContainerID', 'your-woosmap-public-key');
webapp.listenOn(webapp.HANDLED_EVENT.SELECT_STORE, function(storeId) {
console.log("store has been selected " + storeId);
});
Use the favorite store button
The FAVORITED
event has a special behavior: the event must be listened to (see the Handling events part) for the Favorited button to be displayed in the detailed store view. To apply a translation to the button label, use the store locator config.
const webapp = new WebApp('storeContainerID', 'your-woosmap-public-key');
webapp.listenOn(webapp.HANDLED_EVENT.FAVORITED, function(storeId) {
console.log("Favorite store has been set:" + storeId);
});
Example
The below sample will show you what events are triggered by the Woosmap Store Locator Widget as you interact with it.
Custom renderer
Left store panel is fully customizable using setSummaryStoreRenderer setFullStoreRenderer
A more detailed article is available on the Woosmap blog.
The two following examples can be useful for those who want to customize the Store Locator Widget. The simple example is sort of a default theme that you can edit it to add or remove informations. The advanced example has all previous informations plus pictures and ratings.
Example of simple store custom renderers
Example of advanced store custom renderers
Custom Filters
You are also able to change the default filters block by applying your own style and creating filters based on search query.
Custom filter based on Search Query
Filtering capabilities of your Store Locator can be based on 3 different properties:
- Filter based on Types:
'propertyType': 'type'
- Filter based on Tags:
'propertyType': 'tag'
- Filter based on Search Query:
'propertyType': 'custom'
As well as default filters (types and tags), add to your Filters
configuration object a new filter like this (sample using the country code of your store data):
const storeLocatorConfig = {
filters: {
filters: [{
propertyType: "custom",
title: {en: "Country"},
choices: [{
key: "country:=\"US\"",
en: "United States",
}]
}]
}
}
Custom Filters Renderer
To define your own content and style for the filters panel, use the setFilterPanelRenderer in combination with setFilterRenderer.
webapp.setFilterPanelRenderer(function (title, children) {
const divPanel = document.createElement('div')
divPanel.className = "filters-panel"
divPanel.innerHTML = "<div class='filter-group'>"+title+"</div>";
children.forEach(item => div.appendChild(item));
return divPanel;
});
webapp.setFilterRenderer(function (key, label, selected) {
const divFilterItem = document.createElement('div');
divFilterItem.className = selected ? "active": '';
divFilterItem.innerHTML = "<button>" +
"<div class='icon-service icon-"+className+"'></div>" +
"<div class='flex-grow'>"+label+"</div>" +
"<div class='active-icon-wrapper'>" +
"</div></button>"
return divFilterItem;
});
Example of Custom Filters
Baidu Map
Autocomplete
When using Baidu provider for Store Locator Widget, autocomplete allows user to search for city names directly at first character input. As the Store Locator provides a unified configuration to handle various provider options, you can use the places configuration the same way than with Google provider.
Please see MapsConf object Specification for more details.
Note that the Localities autocomplete service is not available for China yet.
Basemap styling
You can use some Baidu styling options by using the baiduMapStyle property of the WoosmapViewConf object Specification. Currently, only Baidu JsAPI v2 styling is available using the following styles :
- light
- dark
- grassgreen
- midnight
- pink
- bluish
- hardedge