PPL Widget Wizard
- Výběr typů míst
- Výběr zemí
- Výchozí země
- Typ mapy
- Vygenerovaný kód
- Náhled widgetu
Vyberte typy výdejních míst
Zvolte, která výdejní místa (ParcelShopy, PPL ParcelBoxy, AlzaBoxy) chcete zobrazit ve widgetu na vašem e-shopu.
Vyberte dostupné země
Zvolte, pro které země bude možné ve widgetu vybírat výdejní místa.
Nastavte výchozí zobrazení
Zvolte, která z vybraných zemí se má ve widgetu zobrazit jako první a v jakém jazyce.
Výchozí země
Jazyk widgetu
Vyberte jazykovou verzi ovládacích prvků widgetu.
Vyberte typ mapy
Zvolte, jaký typ mapy chcete ve widgetu zobrazit a jak se bude chovat.
Souřadnice pro statickou mapu
Zadejte geografické souřadnice středu mapy. Pro typ Static je to důrazně doporučeno.
Vygenerovaný kód pro vložení na váš web
Zkopírujte následující kód a vložte jej do svého eshopu pro zobrazení widgetu PPL výdejních míst s vašimi vlastními nastaveními.
Script pro vložení do hlavičky stránky
Kód pro vložení do těla stránky
JavaScript kód pro zachycení vybraného místa
Poznámka: Pro správné zobrazení widgetu na vašem webu musí být rodičovský element dostatečně široký (minimálně 320px) a vysoký (minimálně 550px). Pro další úpravy a nastavení se podívejte do dokumentace PPL.
Jak implementovat kód hlavičky
Kam vložit kód hlavičky?
Kód hlavičky vložte mezi tagy <head> a </head> vaší HTML stránky. Tento kód načítá CSS styly a JavaScript potřebné pro správnou funkci widgetu.
Příklad implementace v redakčním systému
Pokud používáte redakční systém (např. WordPress), obvykle můžete vložit kód hlavičky do nastavení:
- WordPress: Vzhled > Editor motivu > header.php
- Shoptet: Administrace > Vzhled a obsah > HTML kód > HTML kód v hlavičce
- PrestaShop: Vzhled > Záhlaví
Jak implementovat kód těla
Kam vložit kód těla?
Kód těla vložte na místo, kde chcete zobrazit PPL widget. Typicky to bývá v sekci pro výběr dopravy při pokladně e-shopu nebo na stránce s kontakty.
Možnosti zobrazení
Widget můžete zobrazit jako:
- Přímo na stránce - jak je ukázáno výše
- V modálním okně - které se otevře po kliknutí na tlačítko
- Na samostatné stránce - například na stránce "Výdejní místa"
Jak implementovat JavaScript kód
Kam vložit JavaScript kód?
JavaScript kód vložte na konec těla stránky těsně před uzavírací tag </body>. Tento kód zachytává událost, když uživatel vybere výdejní místo na mapě.
Co obsahuje vybrané výdejní místo?
Objekt selectedPoint obsahuje následující informace o vybraném výdejním místě:
id- unikátní identifikátor výdejního místaname- název výdejního místatype- typ místa (ParcelShop, ParcelBox, AlzaBox)street- ulice s číslem popisnýmcity- městozip- PSČcountry- země (cz, sk, pl, de)latitude- zeměpisná šířkalongitude- zeměpisná délka- a další informace jako otevírací doba, služby, atd.
console.log(selectedPoint) a prohlédnout si všechny dostupné informace.
Příklad praktického použití
How to implement the header code
Where to insert the header code?
Insert the header code between the <head> and </head> tags of your HTML page. This code loads the CSS styles and JavaScript needed for the widget to function properly.
Example implementation in content management systems
If you're using a content management system (e.g., WordPress), you can usually insert the header code in the settings:
- WordPress: Appearance > Theme Editor > header.php
- Shoptet: Administration > Appearance and content > HTML code > HTML code in header
- PrestaShop: Appearance > Header
How to implement the body code
Where to insert the body code?
Insert the body code at the location where you want to display the PPL widget. This is typically in the shipping selection section at the e-shop checkout or on the contact page.
Display options
You can display the widget as:
- Directly on the page - as shown above
- In a modal window - which opens after clicking a button
- On a separate page - for example on a "Pickup points" page
How to implement the JavaScript code
Where to insert the JavaScript code?
Insert the JavaScript code at the end of the page body just before the closing </body> tag. This code captures the event when a user selects a pickup point on the map.
What does the selected pickup point contain?
The selectedPoint object contains the following information about the selected pickup point:
id- unique identifier of the pickup pointname- name of the pickup pointtype- type of location (ParcelShop, ParcelBox, AlzaBox)street- street with house numbercity- cityzip- ZIP codecountry- country (cz, sk, pl, de)latitude- latitudelongitude- longitude- and other information such as opening hours, services, etc.
console.log(selectedPoint) and view all available information.
Example of practical use
Náhled widgetu
Zde můžete vidět, jak bude widget vypadat s vašimi nastaveními.
Detail vybraného výdejního místa:
Typ:
Kód:
Název:
Adresa:
Platba kartou:
Otevírací doba: