Konfigurační parametry

Omezení

Omezení

Velikost rodičovského prvku:
Ve widgetu je zabudovaný script, který zjištuje výšku nadřazeného (rodičovského) elementu. Pokud rodičovský element nemá definovanou výšku a závisí na obsahu a nebo má menší výšku jak 400 pixelů, widget se automaticky roztáhne na 80% výšky obrazovky.
Pokud však rodičovský element má pevně nastavenou výšku a ta je větší než 400 pixelů, widget se přizpůsobí této výšce.

Konfigurace widgetu

konfigurace widgetu se vkládá jako atribut id elementu v body:

např. konfigurace středu mapy

<div id="ppl-parcelshop-map" data-lat="50" data-lng="15" data- mode="static"></div>

Akceptované konfigurační parametry:

lat – text definující zeměpisnou šířku středu mapy

lng – text definující zeměpisnou délku středu mapy

language – text nastavující jazykovou mutaci, akceptované hodnoty jsou "cs" nebo "en"

mode – definující mód zobrazení mapy.

Atribut může nabývat 3 hodnot:

static - zobrazuje statickou mapu s jediným zobrazeným bodem, který je dle dat z API nejblíže definovanému středu mapy. Definice atributů data-lat a data-lng určující střed mapy je v kombinaci s tímto módem velmi doporučeno.

catalog - zobrazuje mapu se všemi funkcionalitami, mimo tlačítka Vybrat výdejní místo. Toto použití je vhodné pro uživatele, které chceme primárně směrovat na detaily výdejních míst nasazené na portálu PPL.

default - zobrazuje mapu se všemi funkcionalitami, s tlačítkem Vybrat výdejní místo, které předává data vybraného výdejního místa rodičovské aplikaci ve formě eventu.

initialfilters – definice výchozích předdefinovaných filtrů při otevření přenačtení aplikace. Jedná se o string klíčů oddělených čárkou.
Příklad použití: data-initialfilters="ParcelShop, CardPayment" pro defaultní filter Parcelshopu s možností platby kartou

Klíče jsou následující:

Parcelshop	Morning	Saturday	CardPayment
Parcelbox	Afternoon	Sunday

code – zobrazuje mapu s přednačteným konkrétním výdejním místem:

tvar: data-code=”KM…”

address – zobrazuje mapu s přednačtenou adresou:

adresa je validována oproti api.mapy.cz

tvar: data-address=”Václavské náměstí 1”

country – vybere výchozí zobrazovanou zemi:

defaultně vybrána cz

další možnosti sk, pl, de

tvar: data-country=”sk”

countries – možnost vybrat množinu podporovaných zemí:

dostupné země: cz, sk, pl, de

defaultně je vybrána první v pořadí a je možné kombinovat s
parametrem data-country

tvar: data-countries=”sk, pl”

hiddenpoints – možnost vyloučit konkrétní typy výdejních míst ze seznamu:

tvar: data-hiddenpoints=”ParcelBox”

Změna vzhledu widgetu

Vizuální stránku widgetu je možné změnit pomocí vlastních CSS a to přetížením již existující sady stylů. Pomocí CSS je možné např. skrýt jednotlivé sekce widgetu, změnit barvy atp.

Např. skrytí sekce výběru země:

#ppl-parcelshop-map .accordion-map--select {display: none !important;}

Změna barvy do DHL stylu

piny s výdejními místy jsou červené místo klasické modré PPL

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

Příklad nastavení parametrů

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

html ke stažení zde

Omezení#

Konfigurace widgetu#

Změna vzhledu widgetu#

Omezení

Konfigurace widgetu

Změna vzhledu widgetu