Proposez nos Points Relais® et Lockers sur votre site en quelques lignes de code !

Avec cette solution, vous pouvez intégrer la recherche de Points Relais® et Lockers sur votre site en seulement quelques minutes.

Notre solution se base sur JQuery: la bibliothèque javascript la plus répandue. De plus cette solution ne vous demande pas de développement coté serveur.

Par défaut ou perso, vous êtes maître du design

Si la mise en page par défaut ne vous convient pas, vous pouvez appliquer votre propre style CSS.

Vous pouvez ainsi habiller notre solution à vos couleurs en toute simplicité.

Deux thèmes sont proposés par défaut : Mondial Relay et Inpost.

Découvrez les fonctions avancées

Vous ne souhaitez pas afficher les résultats sur une carte ? C'est possible !
Vous souhaitez déclencher une action personnalisée lors de la sélection d'un Point Relais®, c'est également possible.
Une option à définir pour utiliser le widget responsive/adaptatif.

Rendez vous dans l'onglet Documentation pour en savoir plus sur les possibilités qu'offre notre solution.

• Aussi simple que cela
• Utilisation
• La version
• Considération sur la Map
• Une version responsive
• Paramètres
• Méthodes

Pour utiliser notre solution, il vous suffit de savoir à quel emplacement vous souhaitez afficher le widget et dans quel champs vous souhaitez renvoyer le numero de point relais sélectionné par votre client.

Ces deux questions sont résolues ? Il ne vous suffit plus qu'à référencer notre widget ainsi que Jquery et Leaflet. <!--On charge Jquery depuis le CDN de google--> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- Charger Leaflet pour l'affichage de la map--> <script type="text/javascript" src="//unpkg.com/leaflet/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" /> <!--On charge le widget mondial relay depuis leurs serveurs--> <script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script> puis insérer la ligne de code suivante : $(document).ready(function () { // Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués // et renverra le Point Relais sélectionné par l'utilisateur dans le champs d'ID "Retour_Widget" $("#Zone_Widget").MR_ParcelShopPicker({ Target: "#Retour_Widget", // Selecteur JQuery de l'élément dans lequel sera renvoyé l'ID du Point Relais sélectionné (généralement un champ input hidden) Brand: "BDTEST ", // Votre code client Mondial Relay Country: "FR", // Code ISO 2 lettres du pays utilisé pour la recherche, // Habiller le widget aux couleurs Mondial Relay (thème par défaut si ce paramètre n'est pas renseigné) Theme: "mondialrelay" // Mettre la valeur "inpost" (en minuscule) pour utiliser le thème graphique Inpost }); }); C'est fait ! Au chargement de votre page, le widget devrait s'afficher.
Vous pouvez bien entendu adapter le comportement du widget à l'aide des paramètres suivants.

La version courante est disponible à cette adresse https://widget.mondialrelay.com/parcelshop-picker/version.

Elle est définie sous la forme 4.M.m où M est la version majeure, et m la version mineure.

A partir de cette version 4, il n'est plus nécessaire de préciser une version spécifique ; la dernière version est toujours celle utilisée.

Il n'est pas possible de revenir sur une version mineure précédente.

Suite au changement de politique de Google concernant l'utilisation de Google Maps (06/2018), nous avons fait le choix de porter notre widget sur Leaflet, utilisant pour carte les données ouvertes de OpenStreetMap.

Il est néanmoins toujours possible de conserver la version Google Maps. Pour cela, charger le script de l'API Google, en renseignant votre propre clef googleApi. <!--On charge Jquery depuis le CDN de google--> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><!--On charge Google Map API--> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your_googleapi_key>"></script> <!--On charge le widget mondial relay depuis leurs serveurs--> <script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>

Il reste alors à paramétrer le widget avec l'option EnableGmap pour voir la carte Google Maps. $(document).ready(function () { $("#Zone_Widget").MR_ParcelShopPicker({ Target: "#Retour_Widget", Brand: "BDTEST ", Country: "FR", EnableGmap: true }); });

Une option est disponible pour activer une version Responsive.

$(document).ready(function () { $("#Zone_Widget").MR_ParcelShopPicker({ ... // Activer l'affichage Responsive. Responsive: true, ... }); });

Cette option fonctionne conjointement avec l'option ShowResultsOnMap pour proposer un affichage avec et sans carte, que vous pouvez tester avec ces popups avec la carte et sans la carte.

Un point important de l'aspect responsive: ne pas oublier de définir la balise meta associé au viewport <meta name="viewport" content="width=device-width, initial-scale=1.0">

Option	Obligatoire	Description	Depuis
Target	Oui	Selecteur JQuery de l'élément dans lequel sera renvoyé l'ID du Point Relais sélectionné (généralement un champ input hidden)
TargetDisplay	Non	Selecteur JQuery de l'élément dans lequel sera renvoyé l'ID du Point Relais sélectionné (secondaire pour affichage)
TargetDisplayInfoPR	Non	Selecteur JQuery de l'élément dans lequel seront renvoyé les coordonnées complètes de la selection de l'utilisateur
Brand	Oui	Le code client Mondial Relay
Country	Non (défaut : FR)	Code ISO 2 lettres du pays utilisé pour la recherche
AllowedCountries	Non	Liste des pays selectionnable par l'utilisateur pour la recherche (codes ISO 2 lettres séparés par des virgules)
PostCode	Non	Code postal pour lancer une recherche par défaut
City	Non	Ville permettant de préciser la localité du code postal	4.0.8
Theme	Non	Détermine le thème graphique à utiliser. Le thème Mondial Relay sera utilisé par défaut si ce paramètre est absent ou mal renseigné. Les deux valeurs possibles sont "mondialrelay" pour Mondial Relay et "inpost" pour Inpost (bien mettre les valeurs sans espaces et en minuscule)	4.0.10
EnableGeolocalisatedSearch	Non	Active ou non la possibilité d'effectuer la recherche sur la position courante lorsque le navigateur de l'utilisateur supporte cette fonction (demande au navigateur)
ColLivMod	Non (défaut : 24R)	Permet de filtrer les Points Relais selon le mode de livraison utilisé (Point Relais L (24R), Xl (24L), XXL (24X)). Il est également possible de filtrer les Lockers (valeur "APM"). Référez vous à votre contrat pour plus d'informations
Weight	Non	Permet de filtrer les Points Relais selon le Poids (en grammes) du colis à livrer
NbResults	Non (défaut :7)	Nombre de Point Relais à renvoyer
SearchDelay	Non	Permet de spécifier le nombre de jour entre la recheche et la dépose du colis dans notre réseau. Cette option permet de filtrer les Point Relais qui seraient éventuellement en congés au moment de la livraison
SearchFar	Non	Permet de limiter la recherche des Points Relais à une distance maximum.
CSS	Non (défaut : 1)	Permet de spécifier que vous souhaitez utiliser votre propre feuille de style CSS lorsque vous lui donnez la valeur "0"
MapScrollWheel	Non (défaut : false)	Active ou non le zoom on scroll sur la carte des résultats
MapStreetView	Non (défaut : false)	Active ou non le mode Street View sur la carte des résultats (attention aux quotas imposés par Google)
Responsive	Non (défaut : false)	Activer l'affichage Responsive?	4.0.2
ShowResultsOnMap	Non (défaut : true)	Active ou non l'affichage des résultats sur une carte
DisplayMapInfo	Non (défaut : true)	Active ou non l'affichage d'une infobulle sur la carte lorsqu'un Point Relais est selectionné
EnableGmap	Non (défaut : false)	Force l'utilisation de la carte Google Maps, plutôt que Leaflet, si les librairies sont présentes sur la page.	4.0.0
AutoSelect	Non	Force la sélection d'un point relais présent dans la liste par son code XX-000000 où XX: le code pays sur deux lettres 000000: le numéro du point relais sur 6 chiffres Le point relais est sélectionné sous la condition d'être présent dans la liste chargée (via l'option PostCode) et à sa disponibilité (non "grisé").	4.0.7
Service	Non	Permet de filtrer les Points Relais® selon les services proposés. N'utilisez ce filtre qu'en accord avec votre référent technique Mondial Relay.
OnNoResultReturned	Non (défaut : null)	Fonction de callback déclenchée lorsqu'aucun résultat n'est retourné pour le code postal recherché par l'utilisateur OnNoResultReturned: function () { alert("Aucun résultat n'a été retourné") }
OnSearchSuccess	Non (défaut : null)	Fonction de callback déclenchée en fin de recherche lorsqu'il y a des résultats pour le code postal recherché par l'utilisateur OnSearchSuccess: function (data) { alert("Premier résultat : " + alert(data.PRList[0].Nom)) }
OnParcelShopSelected	Non	Fonction de callback à la selection d'un Point Relais, le paramètre Data contient un objet avec les informations du Point Relais Adresse1: "9 AVENUE ANTOINE PINAY " Adresse2: "" CP: "59510" HoursHtmlTable: "" ID: "066974" Lat: "50,65001880" Long: "03,19895540" Nom: "AGENCE MONDIAL RELAY " Pays: "FR" Photo: null Ville: "HEM Exemple : OnParcelShopSelected: function (data) { alert(data.ID); alert(data.Nom); alert(data.Adresse1 + ' ' + data.Adresse2); alert(data.CP); alert(data.Ville); alert(data.Pays); }

Méthode	Description
MR_SetParams	permet de redéfinir un paramètre du widget après son chargement exemple : $("#Zone_Widget").trigger("MR_SetParams",{ColLivMod: "24X" }) Change le filtre de recherche sur les modes de livraisons.
MR_RebindMap	Réinitialise le rendu de la map (utile lorsque le widget est dans une div est caché au chargement de la page) exemple : $("#Zone_Widget").trigger("MR_RebindMap")
MR_DoSearch	Déclenche une recherche par le code exemple pour déclencher une recherche sur le code postal 59510 en France : $("#Zone_Widget").trigger("MR_DoSearch",[59510,"FR"]);

• Objet
• Ce qui change
  • La carte
  • La gestion des versions
• Comment migrer?
  • Utilisation de Leaflet
  • Utilisation de Gmap

Cette documentation explique comment faire la migration du widget v2 ou v3 vers la v4.
Pour faire très simple, il suffit simplement de remplacer le script https://widget.mondialrelay.com/parcelshop-picker/vX_Y/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js
par https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js.

Le widget est compatible JQuery 1.6+ et 2.+

Suite aux changements de politique d'utilisation de Google Maps (https://cloud.google.com/maps-platform/user-guide/pricing-changes/), le widget a été porté sur Leaflet avec une carte basée sur des données ouvertes OpenStreetMap

Conserver une carte Google Maps reste néanmoins possible, cela devient une option du widget. Nous rappelons que l'utilisation de Google Maps recquiert une clef API qui vous est propre.

Pour améliorer la maintenabilité du widget, le numéro de version disparait des pages dans l'import des scripts Javascript. Il est possible de connaître la dernière version via https://widget.mondialrelay.com/parcelshop_picker/version

Version concise:

• Remplacer la référence au script du widget en supprimant le numéro de version vX_Y/scripts
  C'est-à-dire remplacer https://widget.mondialrelay.com/parcelshop-picker/vX_Y/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js
  par https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js.

Et, optionnellement:

• Si vous n'utilisez pas Google Maps sur votre site, supprimer la référence au script https://maps.googleapis.com/maps/api/js. S'il est toujours présent, il ne sera pas utilisé à moins que vous le demandiez explicitement (voir Utilisation de Gmap).
• Chargez les lignes suivantes avant le widget : <script type="text/javascript" src="//unpkg.com/leaflet/dist/leaflet.js"></script> et <link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />.
  Si vous ne le faite pas, nous le ferons pour vous, mais cela peut éventuellement être source de latence.

Version illustrée:

Version consise:

• Remplacer la référence au script du widget en supprimant le numéro de version.
  C'est-à-dire remplacer https://widget.mondialrelay.com/parcelshop-picker/vX_Y/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js
  par https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js.
• Dans la configuration du MR_ParcelshopPicker, forcer l'utilisation de la carte avec l'option EnableGmap à true

Version illustrée: