Configurer le Woosmap Store Locator Widget
Sommaire
Woosmap propose un Store Locator Widget facile à intégrer. L'objectif est de vous permettre d'intégrer un store locator performant sur votre site de la manière la plus simple possible. Pour correspondre à vos préférences et au style graphique de votre site, toutes les propriétés du Store Locator Widget sont personnalisables côté client. Voici un aperçu des propriétés que vous pourrez définir dans votre code d'intégration (voir la référence du Store Locator Widget pour plus de détails).
Définir une configuration personnalisée
Pour correspondre à vos préférences et au style graphique de votre site, toutes les propriétés du Store Locator Widget sont personnalisables côté client via setConf(). Appelez cette méthode avant d'appeler render() sur votre Store Locator.
<div id="HTMLElementID"></div>
<script type="text/javascript" src="//webapp.woosmap.com/webapp.js"></script>
<script type="text/javascript">
const loadWebApp = function () {
const storeLocator = new WebApp('HTMLElementID', 'woosmap-public-key');
const storeLocatorConfig = {"theme": {primaryColor: "#FF66CC"}}; // set your config. here we modified the primary color.
storeLocator.setConf(storeLocatorConfig);
storeLocator.render();
}
</script>
<script src="https://www.google.com/jsapi?callback=loadWebApp"></script>Define Languages, Unit Systems and Labels
The Store Locator Widget is currently available for the following languages : French, English, Spanish, German, Italian, Dutch, Catalan, Brazilian Portuguese, Russian, Chinese and Japanese. That means all default labels such as the localization button “Around you” or the text input placeholder “Search…”, will be translated into the chosen language.
const storeLocatorConfig = {
"internationalization": {
"lang": "en", //values available are [fr, en, es, de, it, nl, ca, pt-br, ru, zh, ja]
"period": "en-US", //Hour system to display openning hours ['fr' (for 24h), 'en-US' (for 12h)].
"unitSystem": 1 //The unit system to display distances [0 (Metric), 1 (Imperial)].
}
};En plus de ces libellés par défaut, vous pouvez définir des traductions personnalisées pour le lien « Plus de détails » et le bouton « Définir comme favori » qui s'affichent lorsqu'un point de vente est sélectionné.
const storeLocatorConfig = {
"internationalization": {
"customTranslations": { //Provides custom internationalization for given languages.
"en": {
"storeview": {
"visitStorePage": "Visit the Store Page"
},
"favoritebuttonview": {
"setAsFavorite": "Define as my Store"
}
}
}
}
};Customize the Markers Style
To keep up with your brand identity and ensure the best possible readability and navigation, the map offers two types of display for stores, Simplified view with Dots Markers and Markers view with Image Markers.
Dots Markers
Stores are displayed as colored dots on the map. Useful for the top zoom levels and to render large amount of stores keeping the map display clean and fast. The size (in pixel) of the dots depends on the zoom level and vary based on size and minsize attributes. The higher the zoom level is, the thinner the dots are. Dots colors can be set for different types of service you may have on your network (eg. drive, click and collect, etc).
const storeLocatorConfig = {
"woosmapview": {
"tileStyle": {
"color": "#ef8900", //default color
"size": 11,
"minSize": 5,
"typeRules": [
{
"type": "drive",
"color": "#bbb300", //color for drive store type
"zIndex": 2 // adjust zIndex to prioritize marker display when they overlap
},
{
"type": "click & collect", //color for click & collect store type
"color": "#733f00",
"zIndex": 1
}
]
}
}
}Images Markers
Stores are displayed as images. Useful to render detailed markers (branding, etc) after a specified zoom level (breakpoint attribute). You can specify custom markers images for default and selected store (when a user select a store on the map or through the left panel). Each could also display different markers for different types of service.
const storeLocatorConfig = {
"woosmapview": {
"breakPoint": 10,
"style": {
"default": {
"icon": {
"url": "https://images.woosmap.com/mapin/default.svg"
},
"selectedIcon": {
"url": "https://images.woosmap.com/mapin/selected.svg"
}
},
"rules": [
{
"type": "drive",
"icon": {
"url": "https://images.woosmap.com/mapin/drive_default.svg"
},
"selectedIcon": {
"url": "https://images.woosmap.com/mapin/drive_selected.svg"
}
}
]
}
}
};Set Initial View
You can configure the initial zoom (initialZoom) and initial center (initialCenter) of the map. You could also let us automatically adjust the viewport of the map and to fit your stores distribution by using the fitBounds parameter.
const storeLocatorConfig = {
"woosmapview": {
"initialCenter": { // Configure the initial center of the map.
"lat": 48.967529,
"lng": 2.368438
},
"initialZoom": 5, // Configure the initial zoom on the map. Value is between 0 and 22.
/* "fitBounds": true */ // If true, the widget will set the viewport of the map to fit all the displayed assets.
}
};Pour centrer automatiquement la carte sur les x points de vente les plus proches de votre visiteur, vous pouvez connecter la Recommandation Automatique Woosmap.
const storeLocatorConfig = {
"recommendation": {
"useRecommendation": true
}
};Vous pouvez également définir une recherche initiale. Elle sera automatiquement géocodée pour afficher les magasins à proximité (l'API Google Geocode doit être activée pour votre clé API Google Maps).
const storeLocatorConfig = {
"initialSearch": {
"text": "London"
}
};Refine the Search Feature
When a user search for a location and select a prediction in the dropdown pick list, stores nearby this place are returned. They are displayed ordered by estimated distance from this search. By default, Google DistanceMatrix API is used to compute the distance but you can disable this feature and order stores by distance as the crow flies.
Number of stores fetched from a user search or geolocation can be set between 1 to 20.
const storeLocatorConfig = {
"datasource": {
"maxResponses": 10,
"maxDistance": 10000, // in meters
"useDistanceMatrix": false
}
};La configuration de recherche standard repose sur Google Places Autocomplete. Vous devrez renseigner une clé API Google et activer l'API Places dans votre console Google.
Via la propriété places, vous pouvez définir la requête d'autocomplétion Google Places (pour restreindre la recherche à un pays spécifique, par exemple) et définir un paramètre minLength pour ne déclencher l'autocomplétion qu'à partir de X caractères saisis. La recherche peut également être limitée à une étendue géographique donnée en fonction de la densité de vos points de vente.
const storeLocatorConfig = {
"maps": {
"apiKey": "AKqsdlj19898s_qsdk",
"places": {
"types": ["geocode"],
"componentRestrictions": {"country": "gb"}
},
"minLength": 2
}
};Pour économiser sur votre licence Google, vous pouvez utiliser l'API Google Geocoding. L'utilisateur n'aura pas de liste de prédictions et devra appuyer sur Entrée pour géocoder son texte.
const storeLocatorConfig = {
"maps": {
"geocoder": {
"componentRestrictions": {"country": "gb"}
}
}
};En complément de la recherche Google, le Store Locator Widget permet d'utiliser Woosmap Localities pour la recherche. Ce service n'est pas destiné à la recherche d'adresses. Il retourne uniquement des localités courantes telles que les noms de villes, de quartiers et les codes postaux.
const storeLocatorConfig = {
"maps": {
"localities": {
"componentRestrictions": {"country": "gb"}
}
}
};Allows Users to Filter by Specific Types and Tags
You can associate Types (Drive, Click & Collect, …) and Tags (Parking, Fuel Station, …) to your stores. If so, you could configure your store locator widget to let your users search and display only the desired stores according to these criteria.
const storeLocatorConfig = {
"filters": {
"filters": [{
"propertyType": "type",
"title": {
"en": "Types"
},
"choices": [{
"key": "click_and_collect",
"en": "Click & Collect"
}, {
"key": "drive",
"en": "Drive"
}],
"innerOperator": "and"
}, {
"propertyType": "tag",
"title": {
"en": "Services"
},
"choices": [{
"key": "park",
"en": "Parking"
}, {
"key": "fuel",
"en": "Fuel Station"
}],
"innerOperator": "and"
}],
"outerOperator": "and"
}
};Vous avez également la possibilité d'initialiser le localisateur de magasins avec un filtre prédéfini. Cependant, cela désactivera la capacité d'interface de filtrage.
const storeLocatorConfig = {
"datasource": {
"baseFilter": '(type:"Drive" OR type:"Click & Collect") AND tag:"Fuel Station"',
}
};Voici un exemple jsFiddle qui implémente certaines des propriétés ci-dessus.
Pour consulter l'ensemble des propriétés disponibles, référez-vous à la référence de configuration du Woosmap Store Locator Widget.
Pour toute question sur le contenu, n'hésitez pas à nous contacter via la page de contact de la documentation. Vos retours nous intéressent et nous sommes disponibles pour vous accompagner.
Créez votre propre store locator !