Ogólne informacje
Wymagania:
- JQuery
Kompatybilność:
Nasze API zostało w pełni przetestowane z najbardziej popularnymi urządzenia i przeglądarkami, dlatego użytkownicy tych rozwiązań nie będą posiadać żadnych braków funkcjonalności i kompatybilności z naszym API:
- Windows Chrome/Edge/Firefox/Opera
- MacOS Safari/Chrome/Firefox/Opera
- Android Chrome/Firefox/Opera
- iOS Safari/Chrome
Konfiguracja skryptu
Skrypt po wygenerowaniu należy umieścić na stronie, na której wystąpi konieczność jego użycia. Skrypt może być umieszczony na początku, jak i na końcu strony (atrybut defer i tak spowoduje wykonanie się skryptu pod sam koniec ładowania strony).
W pierwszej kolejności należy skopiować skrypt, który został wygenerowany w Portalu (skrypt który został wygenerowany Portalu posiada odpowiednio przypisane tokeny do danego konta).
Przykładowo wygenerowany skrypt:
<script type="text/javascript">
window.SendMap = {};
//funkcja wykonujaca sie po wybraniu punktu
window.SendMap.PointClick = function (e) {
// Dane przekazywane w parametrze:
// e.typereadable = czytelna nazwa punktu (np. Paczkomat BED02N)
// e.name = indentyfikator punktu (szczegolnie przydatny dla paczkomatów i InPost POP)
// e.street = adres punktu odbioru (ulica i numer)
// e.town = miasto w ktorym znajduje sie punkt odbioru
// <-
// <- miejsce na twoj kod
// <-
Map.Close(); //zamkniecie mapy po wybraniu punktu
}
//funkcja zwracajaca dane sluzace do lokalizacji uzytkownika
window.SendMap.DataSet = function () {
// wprowadz pola lokalizacyjne uzytkownika
return {
postcode: document.getElementById("zip").value,
town: document.getElementById("city").value,
street: document.getElementById("address").value
}
}
//dane Localization i Currency sa przekazywane do ceny punktow jako metoda .toLocaleString()
window.SendMap.Price = function () {
return {
Localization: "pl-PL",
Currency: "PLN"
}
}
//lista punktow
//atrybut "a" ustala czy dany rodzaj punktu bedzie wyswietlany na mapie
//atrybut "price" ustala widoczna cene punktu (ustawienie ceny na "", 0, null lub undefined spowoduje brak pojawienia sie informacji o cenie)
window.SendMap.PointsList = function () {
return {
PACZKOMAT: { a: true, price: "" },
POK: { a: true, price: "" },
ZABKA: { a: true, price: "" },
BIEDRONKA: { a: true, price: "" },
POCZTA: { a: true, price: "" },
"AUTOMAT POCZTOWY": { a: true, price: "" },
RUCH: { a: true, price: "" },
SPOLEM: { a: true, price: "" },
DHL: { a: true, price: "" },
DHLLOCKER: { a: true, price: "" },
INMEDIO: { a: true, price: "" },
RELAY: { a: true, price: "" },
"1MINUTE": { a: true, price: "" },
KAUFLAND: { a: true, price: "" },
MOYA: { a: true, price: "" },
ABC: { a: true, price: "" },
SHELL: { a: true, price: "" },
LEWIATAN: { a: true, price: "" },
CARREFOUR: { a: true, price: "" },
DPD: { a: true, price: "" },
FRESHMARKET: { a: true, price: "" },
ORLEN: { a: true, price: "" }
}
}
window.SendMap.token = "exampletoken";
window.SendMap.MBtoken = "exampletokenMB";
</script>
<script>
(function () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.defer = true;
try {
fetch('https://cdn.sendmap.pro/version.txt', { cache: "no-store" }).then(response => response.json()).then(data => {
script.src = "https://cdn.sendmap.pro/js/" + data + "/SendMapAPI.js";
document.getElementsByTagName('head')[0].appendChild(script);
});
} catch (e) {
script.src = "https://cdn.sendmap.pro/js/1.0/SendMapAPI.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
}());
</script>
1. PointClick()
Funkcja PointClick() wykonuje się automatycznie po wyborze punktu przez użytkownika.
Dane przekazywane do funkcji
- e.typereadable, czytelna nazwa punktu (np. Paczkomat BED02N)
- e.name, indentyfikator punktu (szczegolnie przydatny dla paczkomatów i InPost POP)
- e.town, miasto w ktorym znajduje sie punkt odbioru
- e.postcode, kod pocztowy
- e.street, adres punktu odbioru (ulica i numer)
- e.info, dodatkowy opis punktu
- e.schedule, godziny otwarcia punktu
- e.distance, odległość punktu od podanej lokalizacji wyrażany w metrach (np. 234 metry)
Miejsce na kod służy do stworzenia mechanizmu obsługującego wybór punktu na danej stronie.
Aby sprawdzić czy mapa poprawnie zwraca punkty możemy testowo w miejscu na kod wpisać:
alert(e.typereadable + " " + e.name + " " + e.town + " " + e.street);
Funkcja Map.Close() powinnas zostać na końcu funkcji w celu zamknięcia mapy po wyborze punktu.
//funkcja wykonujaca sie po wybraniu punktu
window.SendMap.PointClick = function (e) {
// <-
// <- miejsce na twoj kod
// <-
Map.Close();
}
2. DataSet()
Funkcja DataSet() zwraca lokalizację użytkownika, która jest potrzebna w celu ustawienia widoku mapy na preferowaną lokalizację.
Dane zwracane przez funkcję:
- postcode, kod pocztowy
- town, miejscowość
- street, ulicę wraz z numerem budynku
//funkcja zwracajaca dane sluzace do lokalizacji uzytkownika
window.SendMap.DataSet = function () {
// wprowadz pola lokalizacyjne uzytkownika
return {
postcode: document.getElementById("zip").value,
town: document.getElementById("city").value,
street: document.getElementById("address").value
}
}
3. Price()
Funkcja Price() służy do ustalenia waluty wyświetlanej przy cenie wysyłki do wybranego punktu odbioru.
Jeżeli nie planujemy dodać cennika punktów odbioru, to funkcja Price() nie musi być definiowana.
Dane przekazywane do funkcji to Lozalization i Currency, które później są użyte w Number.prototype.toLocaleString().
window.SendMap.Price = function () {
return {
Localization: "pl-PL",
Currency: "PLN"
}
}
4. PointsList()
Funkcja PointsList() służy do ustalenia, które punkty mają się wyświetlać oraz do przypisania ceny danym punktom.
Atrybuty mogą być zmienianie dynamicznie.
Aby wykluczyć dany punkt wystarczy nadać mu wartość a: false, lub całkowicie go usunać z listy.
Opcjonalnie
Ceny punktów można nadać zmieniając wartość price: "" na np. price: 10.00 (wartość może być jako string lub liczba).
Jeżeli wartość wynosi "", null lub undefined, to cena nie zostanie wyświetlona.
Punkty można ustalić na podstawie poniższej tabeli, która opisuje dostępność punktów u danych przewoźników.
| InPost | Poczta Polska | DHL | DPD |
|---|---|---|---|
| Paczkomat | Poczta Polska | DHL | DPD |
| POK | Automat Pocztowy | DHL Locker | |
| Żabka | Żabka | ||
| Biedronka | Biedronka | ||
| Freshmarket | Freshmarket | ||
| Ruch | InMedio | ||
| Społem | Relay | ||
| Orlen | 1minute | ||
| Lewiatan | Kaufland | ||
| abc | |||
| Carrefour | |||
| Shell | |||
| Moya |
window.SendMap.PointsList = function () {
return {
PACZKOMAT: { a: true, price: "" },
POK: { a: true, price: "" },
ZABKA: { a: true, price: "" },
BIEDRONKA: { a: true, price: "" },
POCZTA: { a: true, price: "" },
"AUTOMAT POCZTOWY": { a: true, price: "" },
RUCH: { a: true, price: "" },
SPOLEM: { a: true, price: "" },
DHL: { a: true, price: "" },
DHLLOCKER: { a: true, price: "" },
INMEDIO: { a: true, price: "" },
RELAY: { a: true, price: "" },
"1MINUTE": { a: true, price: "" },
KAUFLAND: { a: true, price: "" },
MOYA: { a: true, price: "" },
ABC: { a: true, price: "" },
SHELL: { a: true, price: "" },
LEWIATAN: { a: true, price: "" },
CARREFOUR: { a: true, price: "" },
DPD: { a: true, price: "" },
FRESHMARKET: { a: true, price: "" },
ORLEN: { a: true, price: "" }
}
}