Widgets

Search Widget Reference

Javascript reference

RecommendationPlugin class 🔗


wgs.searchwidget.RecommendationPlugin

Instantiation Example

document.addEventListener('DOMContentLoaded', function () {
 new wgs.searchwidget.RecommendationPlugin('containerId', {"woosmapKey":"xxxx"});
})

Constructor
RecommendationPlugin(containerId?:String, configObject?:RecommendationPluginConf)

Construct a new Recommendation Widget instance


Methods
allowUserReco()

To enable the Woosmap Automatic Recommendation. If called, a cookie of Woosmap userId will be set on the user device and recommended store will be store in LocalStorage. It loads recommendation.js file (or not if already loaded). No need to call it if userAllowedReco : true is already defined in the RecommendationPluginConf

setSelectedStoreId(storeId:String, success(store)?:Function, error(statusText?:Function)

Define the Widget store by its ID and callback success(store) - with the returned store object as argument - or error(errorText) depending on the response.


AutocompletePlacesConf object Specification  🔗


AutocompletePlacesConf Example

{
  "autocompletePlaces": {
      "minLength": 3,
      "types": ["geocode"],
      "bounds": {
          "west": -4.87293470,
          "north": 51.089062,
          "south": 42.19809198,
          "east": 8.332631
      },
      "componentRestrictions": {"country": "gb"}
  }
}
Properties
minLength Type: Int

The minimum number of characters a user must type before the search is performed.

types Type: Array.<String>

types of predictions to be returned. For a list of supported types. See: supported types

channel Type: String

used for Google API Usage reports

componentRestrictions Type: String

Geocoding Component Restriction to restrict the autocomplete search to a particular country.


DisplayConf object Specification  🔗


DisplayConf Example

{
  "display": {
      "h12": true,
      "recommendation": {},
      "search": {}
  }
}
Properties
h12 Type: Boolean

Display AM/PM hours.

recommendation Type: RecommendationConf

To set the displaying of the recommended store

search Type: SearchConf

To set the results displaying


GeocoderConf object Specification  🔗


GeocoderConf Example

{
   "geocoder": {
       "region": "FR"
   }
}
Properties
region Type: String

country code used to bias the search, specified as a Unicode region subtag / CLDR identifier.


GoogleConf object Specification  🔗


GoogleConf Example

{
  "google": {
      "clientId": "customer-clientId",
      "key": "AIzaSyAgaUwsVVXJ6KMxlxI-1234556789",
      "channel": "prod-integration",
      "language": "fr",
      "region": "FR"
  }
}
Properties
clientId Type: String

the Google Client ID to authenticate your application

key Type: String

the Google API Key (for Premium Plan License users, only use your clientID)

channel Type: String

used for Google API Usage reports

language Type: String

Google Language Parameter (used for Google Places geocoder). See: language support

region Type: String

Google region Parameter (used for Google Places geocoder). This parameter will only influence, not fully restrict, results from the geocoder.


RecommendationConf object Specification  🔗


RecommendationConf Example

{
  "recommendation": {
      "address": true,
      "phone": true,
      "openingDay": true,
      "openingWeek": true
  }
}
Properties
address Type: Boolean

Display the address of the recommended store

phone Type: Boolean

Display the contact telephone of the recommended store

openingDay Type: Boolean

Display the daily opening hours of the recommended store

openingWeek Type: Boolean

Display the weekly opening hours of the recommended store


RecommendationPluginConf object Specification  🔗


RecommendationPluginConf Example

var functionCallbackInitRecoStore = function(store){console.log(store)}
var functionCallbackSelectRecoStore = function(store){console.log(store)}
var functionCallbackSuccessHTML5Loc = function(position){console.log(position)}
var functionCallbackErrorHTML5Loc = function(error){console.log(error)}
var functionCallbackDOMWidgetReady = function(){console.log(document.querySelector('.gr-wgs-homestore-panel-aroundMe-btn'))}
var myConfig = {
   container: "myHTMLContainerId",
   woosmapKey: "woos-27e715eb-6454-3019-95c1-e90a418939a1",
   callbackInitialRecommendedStore: functionCallbackInitRecoStore,
   callbackUserSelectedStore: functionCallbackSelectRecoStore,
   callbackOnSuccessHTML5Location: functionCallbackSuccessHTML5Loc,
   callbackOnErrorHTML5Location: functionCallbackErrorHTML5Loc,
   callbackDOMWidgetReady: functionCallbackDOMWidgetReady,
   omitUIReco: true,
   userAllowedReco: true,
   google: {
       clientId: "customer-clientId",
       key: "AIzaSyAgaUwsVVXJ6KMxlxI-1234556789"
   },
   usePlaces: true,
   lang: "en",
   translations: {
       en: {
           "searchAroundMeBtn": "Around Me",
           "searchAroundMeTitle": "Find Nearby Store",
           "selectAroundMeTitle": "Choose Nearby Store:",
           "noResultsWarning": "Can't find nearby stores",
           "autocompletePlaceholder": "Address..."
       }
   }
}
Properties
container Type: String

the id of the HTML container where the widget will display

woosmapKey Type: String

the Woosmap Public key used to connect to your datasource

callbackInitialRecommendedStore Type: Function

Callback Function called with store parameter when an Initial Recommended Store is Found.

callbackUserSelectedStore Type: Function

Callback Function called with store parameter When a User Select a Store after a Geocoding Search.

callbackOnSuccessHTML5Location Type: Function

Callback Function called with a Position parameter when a Navigator.geolocation has succeeded (triggered on Search Around Me Button).

callbackOnErrorHTML5Location Type: Function

Callback Function called with an PositionError parameter when a Navigator.geolocation has failed (triggered on Search Around Me Button).

callbackDOMWidgetReady Type: Function

Callback Function called when the Initial Widget innerHTML is fully rendered and thus accessible from the DOM.

omitUIReco Type: Boolean

to disable the display of Store in recommendation block. if set to true, use the callbacks above to manage the reco in your website

userAllowedReco Type: Boolean

to enable the Woosmap Recommendation. Default/unset equal to false (GDPR compliant). if set to true, a cookie of Woosmap userId will be set on the user device and recommended store will be store in LocalStorage

google Type: GoogleConf

Google ids parameters

urls Type: UrlsConf

To open store(s) website(s)

usePlaces Type: Boolean

To enable places autocomplete search

autocompletePlaces Type: AutocompletePlacesConf

Autocomplete Places Specification.

geocoder Type: GeocoderConf

Geocoder Specification

woosmap Type: WoosmapConf

Woosmap search specification.

display Type: DisplayConf

UI search / results specification.

lang Type: String

Language of the widget.

translations Type: TranslationsConf

Translations list


SearchConf object Specification  🔗


SearchConf Example

{
  "search": {
      "address": true,
      "openingDay": true,
      "openingWeek": true
  }
}
Properties
address Type: Boolean

Display the address of the recommended store

openingDay Type: Boolean

Display the daily opening hours of the recommended store

openingWeek Type: Boolean

Display the weekly opening hours of the recommended store


StoreLinkConf object Specification  🔗


StoreLinkConf Example

{
   "store": {
       "href": "https://www.mycompany.com/stores/city/",
       "target": "_blank"
   }
}
Properties
href Type: String

website Root URL for user interaction with store

target Type: String

to specifies where to open the linked document. Choose from ['_blank', '_self', '_parent', '_top', 'framename']


TranslationsConf object Specification  🔗


TranslationsConf Example

{
  "fr": {
    "searchAroundMeBtn": "Autour de moi",
    "searchAroundMeTitle": "Rechercher le centre à proximité",
    "selectAroundMeTitle": "Choisissez le centre à proximité :",
    "noResultsWarning": "Aucun magasin trouvé à proximité",
    "autocompletePlaceholder": "Spécifiez une adresse",
    "allStores": "Tous nos centres",
    "changeStore": "Centre à proximité",
    "findStore": "Choisir mon centre",
    "selectStore": "Choisir",
    "openingHoursDay": "Ouvert aujourd'hui :",
    "openingHoursWeek": "",
    "geolocationNotice": "La géolocalisation n'est pas activée sur votre navigateur. Veuillez changez vos préférences.",
    "geolocationErrHttps": "Votre position géographique n’a pas été renvoyée par votre navigateur. Veuillez saisir une adresse pour rechercher les magasins à proximité.",
    "geolocationErrBlocked": "La géolocalisation n'est pas activée sur votre navigateur. Veuillez saisir une adresse pour rechercher les magasins à proximité.",
    "telephone": "Tél :",
    "closeBtn": "Fermer",
    "open24": "24h/24",
    "days": {
         "1": {
                 "full": "Lundi",
                 "short": "Lun"
              },
         "2": {
                 "full": "Mardi",
                 "short": "Mar"
               }
          }
}
Properties
language_code Type: String

to customize each label for the desired language (see Widget Use and below Sample)


UrlsConf object Specification  🔗


UrlsConf Example

{
  "urls": {
      "store": {
          "href": false,
          "target": "_self"
      },
      "stores": {
          "href": "https://developers.woosmap.com/",
          "target": "_self"
      }
  }
}
Properties
store Type: StoreLinkConf

To open website recommended store when it’s clicked

stores Type: StoreLinkConf

Global link displayed on the bottom of the widget


WoosmapConf object Specification  🔗


WoosmapConf Example

{
  "woosmap": {
      "query": "Type:'Drive'",
      "limit": 5,
      "maxDistance": 25000
  }
}
Properties
query Type: String

Woosmap search query.

limit Type: Int

Maximum stores to return. Max : 3.

maxDistance Type: Int

represent a radius in meters to search within