1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
| <!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ée d'une implémentation du Widget Mondial Relay</title>
<!-- Appel de la librairie jQuery : c'est une librairie facilitant la programmation de script côté client -->
<!-- Cette librairie est obligatoire car elle est utilisée par le widget Mondial Relay, elle doit être appellée en avant celle du Widget Mondial Relay -->
<!-- Le symbole "$" commençant une instruction javascript sest caractéristique de l'utilisation de jQuery. -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- Appel de la librairie Google Maps : c'est une librairie d'implémentation de cartographies -->
<!-- Cette librairie est obligatoire car elle est utilisée par le widget Mondial Relay -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Appel de la librairie Widget Mondial Relay : c'est la librairie permettant la sélection de Point Relais -->
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/v3_0/scripts/jquery.plugin.mondialrelay.parcelshoppicker.js"></script>
<!-- Début d'un script -->
<script type="text/javascript">
// 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: "CC20RGFY" // 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" // Liste des pays selectionnable par l'utilisateur pour la recherche (codes ISO 2 lettres séparés par des virgules)
, PostCode: "59000" // Code postal pour lancer une recherche par défaut
//,EnableGeolocalisatedSearch: "" // 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: "15" // Nombre de Point Relais à renvoyer
,SearchDelay: "15" // 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
, 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);
}
});
});
</script> |
Partager