go to developers doc

Search Widget Reference

Search Widget Javascript API Reference
  1. RecommendationPlugin class 
  2. AutocompleteLocalitiesConf object Specification 
  3. AutocompletePlacesConf object Specification 
  4. DisplayConf object Specification 
  5. GeocoderConf object Specification 
  6. GoogleConf object Specification 
  7. LocalitiesComponentRestrictions object Specification 
  8. RecommendationConf object Specification 
  9. RecommendationPluginConf object Specification 
  10. SearchConf object Specification 
  11. StoreLinkConf object Specification 
  12. TranslationsConf object Specification 
  13. UrlsConf object Specification 
  14. WoosmapConf object Specification 
  15. LocalitiesTypes constants 

This API has been deprecated and replaced with MultiSearch JavaScript Library.

RecommendationPlugin class 🔗

wgs.searchwidget.RecommendationPlugin

Instantiation Example

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

AutocompleteLocalitiesConf object Specification  🔗

AutocompleteLocalitiesConf Example

JavaScript
        {
    minLength: 3,
    types: ["locality"],
    language: "fr",
    componentRestrictions: {
        country: ["be", "fr"]
    },
}
Properties
minLength? Type: Int

The minimum number of characters a user must type before the search is performed (default is 3).

types? Type: Array.<LocalitiesTypes>|LocalitiesTypes

The types of predictions to be returned

language Type: String

The language code, indicating in which language the results should be returned, if possible. Searches are also biased to the selected language; results in the selected language may be given a higher ranking. If language is not supplied, the Localities service will use the default language of each country. No language necessary for postal_code request.

componentRestrictions? Type: LocalitiesComponentRestrictions

The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country.

AutocompletePlacesConf object Specification  🔗

AutocompletePlacesConf Example

JSON
        {
  "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 (default is 1).

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. See: Autocomplete for Addresses and Search support

DisplayConf object Specification  🔗

DisplayConf Example

JSON
        {
  "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

JSON
        {
   "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

JSON
        {
  "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.

LocalitiesComponentRestrictions object Specification  🔗

LocalitiesComponentRestrictions Example

JavaScript
        {
   country: ["be", "fr"]
}
Properties
country? Type: String|Array.<String>

Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). For example, ‘us’, ‘br’, or ‘au’. You can provide a single one, or an array of up to five country code strings.

RecommendationConf object Specification  🔗

RecommendationConf Example

JSON
        {
  "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

JavaScript
        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,
   withDistanceMatrix: false,
   userAllowedReco: true,
   google: {
       clientId: "customer-clientId",
       key: "AIzaSyAgaUwsVVXJ6KMxlxI-1234556789"
   },
   usePlaces: true,
   useLocalities: false,
   autocompleteLocalities: {
       types: "locality",
       componentRestricitions: {
           country: "fr"
       },
       language: "fr",

   }
   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

withDistanceMatrix Type: Boolean

to enable sorting stores using DistanceMatrixService. Default is true. If set to false, stores are sorted using distances as the crow flies.

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

useLocalities Type: Boolean

To enable autocompleteLocalities autocomplete search

autocompleteLocalities Type: AutocompleteLocalitiesConf

Localities Specifications

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

JSON
        {
  "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

JSON
        {
   "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

JSON
        {
  "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

JSON
        {
  "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

JSON
        {
  "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

LocalitiesTypes constants  🔗

LocalitiesTypes

Constants
postal_code
locality