1. Home
  2. Blog
  3. Store Locator
  4. Personnalisez le Widget Store Locator Woosmap

Personnaliser le Widget Store Locator Woosmap

3 min - Author: Marine
Sommaire
privacy-first

Le Woosmap Store Locator Widget offre un nouveau niveau de personnalisation. Vous pouvez désormais adapter entièrement le rendu de vos données d'établissements dans le panneau latéral. Lorsqu'un utilisateur clique sur un marqueur ou recherche des magasins à proximité d'un lieu, les fonctions listeners récupèrent les données du ou des points de vente retournés et génèrent le HTML pour afficher leurs informations. Voici quelques pistes pour faire du Woosmap Store Locator Widget votre propre outil et créer de la valeur ajoutée pour vos clients.

Exemple d'implémentation

Expérimentons avec le Woosmap Store Locator Widget suivant, qui cartographie quelques-uns des marchés alimentaires les plus populaires d'Europe. Vous pouvez également l'ouvrir en plein écran pour plus de confort.

Nous avons ajouté aux attributs userProperties de nos établissements une photo personnalisée ainsi que le place_id Google Maps correspondant. Cela nous permet de récupérer à la volée des informations complémentaires sur chaque point d'intérêt via une requête Google Place Details. Cette requête retourne des données détaillées sur le lieu, notamment les notes et avis des utilisateurs.

D'autres enrichissements sont envisageables : renderers personnalisés pour afficher des tarifs pour des événements spécifiques ou des promotions mises en avant. Les possibilités sont illimitées !

Renderer de détail

Il s'agit de la vue complète d'un magasin. Par défaut, le Widget affiche le nom du magasin, l'adresse, les horaires d'ouverture et quelques informations de contact. Ici, nous avons utilisé nos attributs userProperties personnalisés pour afficher une photo et des notes et avis utilisateurs. Pour le voir en action, cliquez simplement sur un marqueur sur la carte ci-dessus.

Utilisez la fonction webapp.setFullStoreRenderer(function(store){}) pour définir le renderer de détail d'un magasin. Elle prend en paramètre les données du magasin (documentation de la structure ici) et retourne un élément HTML contenant les informations du magasin.

privacy-first
webapp.setFullStoreRenderer(function(store) {
var myCustomContent = document.createElement('ul');
myCustomContent.id = "myCustomContentID"
var html = [];
html.push(getPhoto(store));
html.push(getHours(store));
html.push(getWebSite(store));
html.push(getAddress(store));
html.push(getPhone(store));
getGoogleRatings(store, function(place_details) {
renderRatings(place_details);
renderReviews(place_details);
});
myCustomContent.innerHTML = html.join("");
return myCustomContent;
});

Summary Renderer

The list view of stores nearby a given location that is usually provided through searching an address or geolocating via the Around You button. Again, we’ve built on the userProperties data to display a picture and retrieve some user ratings and reviews.

To get external information data, (the place details request here) asynchronous communication should be preferred to avoid the “freezing” on the screen and an unresponsive user experience.

Use the function webapp.setSummaryStoreRenderer(function(store){}) to set the store summary renderer. It takes the Store Data parameter as argument and renders your builded store details to an HTML Element. Search for an European city on the above map to see it in action.

privacy-first
webapp.setSummaryStoreRenderer(function(store) {
var mySummaryContent = document.createElement('div');
mySummaryContent.className= "store-summary";
var html = [];
html.push(getSummaryPhoto(store));
html.push(getSummaryName(store));
html.push(getSummaryAddress(store));
html.push(getOpeningLabel(store));
html.push(getDistanceAndTime(store));
getGoogleRatings(store, function(place_details) {
renderSummaryRatings(place_details, store.properties.store_id);
});
mySummaryContent.innerHTML = html.join("");
return mySummaryContent;
});