Widget PPL EN
PPL CZDeveloper web
PPL CZDeveloper web
Přepni do češtiny
    • Widget PPL - Delivery points
    • Inserting and displaying a map
    • Obtaining a point of sale - listener
    • Configuration parameters

    Configuration parameters

    Limitations#

    Limitations
    Parent element size:
    The widget contains a built-in script that detects the height of the parent element. If the parent element has no defined height and depends on content, or if it has a height less than 400 pixels, the widget will automatically expand to 80% of the screen height.
    However, if the parent element has a fixed height greater than 400 pixels, the widget will adapt to this height.

    Widget Configuration#

    The widget configuration is inserted as an attribute of the element's id in the body:
    e.g., the configuration of the map center
    <div id="ppl-parcelshop-map" data-lat="50" data-lng="15" data- mode="static"></div>
    Accepted configuration parameters:
    lat – text defining the latitude of the map center
    lng – text defining the longitude of the map center
    language – text setting the language variant, accepted values are "cs" or "en"
    mode – defining the map display mode.
    The attribute can take 3 values:
    1.
    static - displays a static map with a single displayed point, which according to API data is closest to the defined map center. Defining the attributes data-lat and data-lng that specify the map center is highly recommended in combination with this mode.
    2.
    catalog - displays a map with all functionalities, except the "Select a pickup point" button. This usage is suitable for users whom we primarily want to direct to the details of pickup points deployed on the PPL portal.
    3.
    default - displays a map with all functionalities, including the "Select a pickup point" button, which passes the selected pickup point data to the parent application in the form of an event.
    initialfilters – definition of the default predefined filters when the application is opened or reloaded. It is a string of keys separated by commas.
    Example usage: data-initialfilters="ParcelShop, CardPayment" for the default filter of the ParcelShop with the card payment option
    The keys are as follows:
    Parcelshop Morning Saturday CardPayment
    Parcelbox Afternoon Sunday
    code – displays the map with a preloaded specific pickup point:
    format: data-code=”KM…”
    address – displays the map with a preloaded address:
    the address is validated against api.mapy.cz
    format: data-address=”Václavské náměstí 1”
    country – selects the default country to be displayed:
    by default, cz is selected
    other options: sk, pl, de
    format: data-country=”sk”
    countries – allows selecting a set of supported countries:
    available countries: cz, sk, pl, de
    by default, the first in order is selected and it is possible to combine with
    the data-country parameter
    format: data-countries=”sk, pl”
    hiddenpoints – allows excluding specific types of pickup points from the list:
    format: data-hiddenpoints=”ParcelBox”

    Changing the widget appearance#

    The visual aspect of the widget can be changed using custom CSS by overriding the existing set of styles. With CSS, it is possible, for example, to hide individual sections of the widget, change colors, etc.
    For example, hiding the country selection section:
    #ppl-parcelshop-map.accordion-map--select {display: none !important;}
    image.png
    Change color to DHL style
    Pickup point pins are red instead of the classic PPL blue
    <script type="text/javascript" src="https://www.ppl.cz/sources/map/main.js" async>
</script>
<link rel="stylesheet" href="https://www.ppl.cz/sources/map/main.css">
<div id="ppl-parcelshop-map" class="ppl-parcelshop-map--dhl"></div>
    image.png
    Example of setting parameters
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="initial-scale=1.0, width=device-width" name="viewport" />
    <title>PPL Maps test</title>
    <script
      type="text/javascript"
      src="https://ppl.cz/sources/map/main.js"
      async
    ></script>
    <link rel="stylesheet" href="https://ppl.cz/sources/map/main.css" />
  </head>
  <body>
    <!-- Add data attributes to <div id="ppl-parcelshop-map"></div> -->
    <!-- Add:
      data-country="sk"
      data-country="pl"
      data-country="de"
        for default selected country
    Add:
      data-countries="sk, pl"
      data-country="pl, de"
      etc.
        for default selected countries list (first country as default or combine with data-country)
    Add:
      data-address="Čajkovského 1424"
        or something else for default selected address
    Add:
      data-code="KM17312000"
        or some other pickup point code started with KM... for default selected pickup point
    Add:
      data-hiddenpoints="ParcelBox"
      data-hiddenpoints="ParcelBox, AlzaBox"
        for default hidden pickup point types -->
    <div id="ppl-parcelshop-map"></div>
  </body>
</html>
    Download HTML here
    Previous
    Obtaining a point of sale - listener
    Built with