Search Widget Sample Usage
Easy-to-use Google Geocoding Search Box & Woosmap Recommendation Javascript WidgetThis API has been deprecated and replaced with MultiSearch JavaScript Library.
Below you can see a sample usage of a Woosmap Search Widget displaying the recommended store along with the integration code.
Sample Use
Woosmap Public Key. Test your own!
or reset to default public key
Embed in your page
CSS
Include it in the <head> section of your page. You could override it to match your style.
<head>
<link type="text/css" rel="stylesheet" href="https://sdk.woosmap.com/searchwidget/css/woosmap-search-widget.css">
</head>
Javascript
Add wherever you want to include your Search Recommendation Widget
<div id="searchWidgetContainer"></div>
<script src="https://sdk.woosmap.com/searchwidget/woosmapsearchwidget.js"></script>
<script>
var callbackInitialRecommendedStore = function (store) {
//called when an Initial Recommended Store is Found
console.log(store);
};
var callbackUserSelectedStore = function (store) {
//called When a User Select a Store after a Geocoding Search
console.log(store);
};
var callbackDOMWidgetReady = function () {
console.log('the DOM of widget is ready.');
console.log(document.querySelector('.gr-wgs-homestore-panel-aroundMe-btn'));
};
var widgetOptions = {
woosmapKey: 'woos-27e715eb-6454-3019-95c1-XXXXXXXXXXX',
callbackInitialRecommendedStore: callbackInitialRecommendedStore,
callbackUserSelectedStore: callbackUserSelectedStore,
callbackDOMWidgetReady: callbackDOMWidgetReady,
userAllowedReco: true,
usePlaces: true,
google: {
clientId: 'gme-mycompanyname'
},
lang: 'fr',
translations: {
fr: {
searchAroundMeBtn: 'Autour de moi',
searchAroundMeTitle: 'Rechercher le centre à proximité'
}
}
};
document.addEventListener('DOMContentLoaded', function () {
new wgs.searchwidget.RecommendationPlugin('#searchWidgetContainer', widgetOptions);
})
</script>
User Privacy and Automatic Recommendation
By default, the Widget will not save any user related information (UserID and Preferred Store) and will not perform any automatic recommendation. The Widget will let users search stores nearby an address or a geolocation and callback methods with returned results. If you want to use it with built-in Woosmap Automatic Recommendation, you can do it in two different ways.
- Set the config property
userAllowedReco: truein thewidgetOptionsobject. - Save the Widget RecommendationPlugin instantiation in a variable and call the dedicated method (
allowUserReco()) like above snippet.
<script>
var woosmapRecoPlugin = null;
var callbackDOMWidgetReady = function () {
woosmapRecoPlugin.allowUserReco();
};
var widgetOptions = {
woosmapKey: 'woos-27e715eb-6454-3019-95c1-XXXXXXXXXXX',
userAllowedReco: false,
callbackDOMWidgetReady: callbackDOMWidgetReady,
google: {
clientId: 'gme-mycompanyname'
}
...
};
document.addEventListener('DOMContentLoaded', function () {
woosmapRecoPlugin = new wgs.searchwidget.RecommendationPlugin('#searchWidgetContainer', widgetOptions);
})
</script>
Here the allowUserReco() is called once the Widget is fully loaded in DOM (through callbackDOMWidgetReady). It could be good form to call it after a user action like a cookie consent button click.
This method loads the recommendation.js file (if not already loaded), a lightweight Javascript library to deal with Woosmap Recommendation REST API, and call an initial user recommendation.
Please refer to Recommendation Overview to see how it works.
Sample Use Callbacks with Search Panel
if you want to display by yourself the recommended store, set the parameter omitUIReco:true and use callbacks callbackInitialRecommendedStore and callbackUserSelectedStore as described in the below jsFiddle sample.
