<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <title>Mondial Relay Parcelshop Picker with Map</title> <!-- JQuery required (>1.6.4) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- Leaflet dependency is not required since it is loaded by the plugin --> <script src="//unpkg.com/leaflet/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" /> <!-- JS plugin for the Parcelshop Picker Widget MR using JQuery --> <script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script> </head> <body> <!-- HTML Element in which the Parcelshop Picker Widget is loaded --> <div id="Zone_Widget"></div> <!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. --> <input type="text" id="Target_Widget" /> </body> </html>
// Init the widget on ready state $(document).ready(function() { // Loading the Parcelshop picker widget into the <div> with id "Zone_Widget" with such settings: $("#Zone_Widget").MR_ParcelShopPicker({ // // Settings relating to the HTML. // // JQuery selector of the HTML element receiving the Parcelshop Number (ex: here, input type text, but should be input hidden) Target: "#Target_Widget", // // Settings for Parcelshop data access // // Code given by Mondial Relay, 8 characters (padding right with spaces) // BDTEST is used for development only => a warning appears Brand: "BDTEST ", // Default Country (2 letters) used for search at loading Country: "FR", // Default postal Code used for search at loading PostCode: "59000", // Delivery mode (Standard [24R], XL [24L], XXL [24X], Drive [DRI]) ColLivMod: "24R", // Number of parcelshops requested (must be less than 20) NbResults: "7", // // Display settings // // Enable Responsive (nb: non responsive corresponds to the Widget used in older versions= Responsive: true, // Show the results on Leaflet map usng OpenStreetMap. ShowResultsOnMap: true }); });