Widget Mondial Relay

Plugins Mondial Relay/Inpost pour JQuery

Proposez nos Points Relais® et Lockers en quelques lignes de code & sans développement serveur

Proposer nos Points Relais sur votre site en une ligne de code !

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

Notre solution se base sur JQuery, la bibliothèque javascript la plus répendue, 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é.

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 égallement possible.

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

Démo
Code Source

<%
    // Adaptation à l'environnement
    var BaseUrl = Request.Url.Host + (Request.Url.IsLoopback || Request.Url.Host.EndsWith(".mr.local") ? ":" + Request.Url.Port : string.Empty) + "/";
    var IsSecuredBool = Request.IsSecureConnection || "widget.mondialrelay.com".Equals(Request.Url.Host); 
    var Url = "http" + (IsSecuredBool ? "s" : string.Empty) + "://" + BaseUrl;
    var IsSecured = IsSecuredBool.ToString().ToLowerInvariant();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Exemple commenté d'une implémentation du Widget Mondial Relay</title>
	<meta name="robots" content="noindex" />
		
		
		
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="<%= Url %>parcelshop-picker/v3_2_1/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
        
		
        <script type="text/javascript">

var t;

// Avec jQuery, exécute le script entre accolades uniquement après le chargement complet de la page
            $(document).ready(function () {

// Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués
                 $("#Zone_Widget").MR_ParcelShopPicker({
                    Target: "#Target_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)
					, TargetDisplay: "#TargetDisplay_Widget"				// Selecteur JQuery de l'élément dans lequel sera renvoyé l'ID du Point Relais sélectionné (secondaire pour affichage)
                    , TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget"	// Selecteur JQuery de l'élément dans lequel seront renvoyé les coordonnées complètes de la selection de l'utilisateur
                    , Brand: "BDTEST  "										// Le code client Mondial Relay
                                                                            // Lorsqu'il est indiqué "BDTEST  ", un message d'avertissement apprait pour avertir que ce sont les paramètres de test qui sont utilisés
                    , Country: "FR"											// Code ISO 2 lettres du pays utilisé pour la recherche
                    //,AllowedCountries: "FR,ES"							// Liste des pays selectionnable par l'utilisateur pour la recherche (codes ISO 2 lettres séparés par des virgules)
                    , PostCode: "59510" 									// Code postal pour lancer une recherche par défaut
                    //,EnableGeolocalisatedSearch: "true"					// 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: "24R"										// Permet de filtrer les Points Relais selon le mode de livraison utilisé (Standard [24R], XL [24L], XXL [24X], Drive [DRI])
                    //,Weight: ""											// Permet de filtrer les Points Relais selon le Poids (en grammes) du colis à livrer
                    , NbResults: "7"										    // Nombre de Point Relais à afficher
                    //,SearchDelay: "3"										// Permet de spécifier le nombre de jour entre la recherche et la dépose du colis dans notre réseau
                    //,SearchFar: ""										// Permet de limiter la recherche des Points Relais à une distance maximum
                    //,CSS: "1"												// Permet de spécifier que vous souhaitez utiliser votre propre feuille de style CSS lorsque vous lui donnez la valeur "0"
                    //,MapScrollWheel: "false"								// Active ou non le zoom on scroll sur la carte des résultats
                    //,MapStreetView: "false"								// Active ou non le mode Street View sur la carte des résultats (attention aux quotas imposés par Google)
                    //,ShowResultsOnMap: "true"								// Active ou non l'affichage des résultats sur une carte
                    , DisplayMapInfo: true                                  // Active ou non l'affichage d'une popup sur la carte avec les informations du point relais
                    , OnParcelShopSelected: 					            // Permet l'appel d'une fonction lors de la selection d'un Point Relais
                        function (data) {                                   // Implémentation de la fonction de traitement, le paramètre Data contient un objet avec les informations du Point Relais

// Remplace les données de la balise ayant l'Id "cb_ID" par le contenu html de data.ID
                            // "data" est le paramètre reçu par la fonction, sont contenu est inconnu à la compilation
                            // "ID" est contenu dans "data", il pourrait y avoir une erreur si "ID" n'existe pas dans la variable "data" reçue en paramètre
                            $("#cb_ID").html(data.ID);

$("#cb_Nom").html(data.Nom);
                            $("#cb_Adresse").html(data.Adresse1 + ' ' + data.Adresse2);
                            $("#cb_CP").html(data.CP);
                            $("#cb_Ville").html(data.Ville);
                            $("#cb_Pays").html(data.Pays);
                        }
                     /**DeleteForDemo**/
                     , ServiceUrl: "<%= BaseUrl %>",
                     UseSSL: <%= IsSecured %>       
                    /**EndDeleteForDemo**/
                });

});
        </script>
    
</head>
<body>
	
    <div id="Zone_Widget"></div>

<div style="padding:8px; overflow:auto;">
        <div style="background:#edffb2; border:solid 1px #a5f913; padding:5px; font-family:verdana; font-size:10px;">
		
            <em>Cette zone n'est pas située dans le Widget mais bien dans la page appelante.</em><br/><br/>
			
			<div style="display:inline-block; vertical-align:top;">

Point Relais Selectionné : <input type="text" id="TargetDisplay_Widget"/><br/>

Hidden : <input type="text" id="Target_Widget" /><br/>

InfosPR : <span id="TargetDisplayInfoPR_Widget" />

</div>
			
			          
			
			<div style="display:inline-block;">
				
				<span style="font-weight:bold;text-decoration:underline;">Callback zone</span><br/>
				data.ID = <span id="cb_ID"></span><br/>
				data.Nom = <span id="cb_Nom"></span><br/>
				data.Adresse = <span id="cb_Adresse"></span><br/>
				data.CP = <span id="cb_CP"></span><br/>
				data.Ville = <span id="cb_Ville"></span><br/>
				data.Pays = <span id="cb_Pays"></span><br/>
			</div>
        </div>
    </div>
</body>
</html>

Utilisation

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 (si votre site ne l'utilise pas encore) et Google Map API. puis insérer la ligne de code suivante : 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.

Quelques exemples d'implémentation

Paramètres

Option	Obligatoire	Description
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
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)) 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)
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é
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éthodes

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"]);

Migration vers la version 4

Plan

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

Objet

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.+

Ce qui change

La carte

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.

Aller en haut de page

La gestion des versions

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

Aller en haut de page

Comment migrer?

Utilisation de Leaflet

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:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<votre_clef_API>"></script>

<script type="text/javascript"
                        src="https://widget.mondialrelay.com/parcelshop-picker/vX_Y/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
                    src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
                </script>

<script type="text/javascript">
                    $(document).ready(function () {
                        // Le paramétrage reste inchangé
                        $("#Zone_Widget").MR_ParcelShopPicker({
                        // ...
                        });
                    });
                </script>

Aller en haut de page

Utilisation de Gmap

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:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<votre_clef_API>"></script>

<script type="text/javascript">
                    $(document).ready(function () {
                        // Une seule option à ajouter
                        $("#Zone_Widget").MR_ParcelShopPicker({
                        // Votre paramétrage inchangé
                        //...,
                        EnableGmap: true
                        });
                    });
                </script>

Aller en haut de page