Plugins Mondial Relay pour JQuery

Proposez nos Points Relais 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.

Aussi simple que cela

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 et Leaflet. 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.

Considération sur la Map

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.

Il reste alors à paramétrer le widget avec l'option EnableGmap pour voir la carte Google Maps.

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é
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.
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
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
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 :

Méthodes

Méthode Description
MR_SetParams permet de redéfinir un paramètre du widget après son chargement
exemple : 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 :
MR_DoSearch Déclenche une recherche par le code exemple pour déclencher une recherche sur le code postal 59510 en France :

Migration vers la version 4

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

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

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:

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: