Community Forum

Store Locator Widget Advanced Usage

Listen to advanced user events and customize your widget with your own style.
  1. Events
  2. Custom renderer
  3. Custom Filters
  4. Baidu Map

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.

JavaScript
        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.

JavaScript
        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:

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):

JavaScript
        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.

JavaScript
        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 :

Autocomplete and Basemaps Baidu styling example

‹ Sample Usage Configuration ›
Was this article helpful?
Have more questions? Submit a request