Widget Parcelshop Picker Responsive with map

Widget Parcelshop Picker Responsive with map

by MondialRelay

HTML

<?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>

JavaScript

// 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
  });

});