Dokumentacja Skryptu Mapy ver.1.1

Dokumentacja
Skryptu Mapy ver.1.1
Dokumentacja Skryptu Mapy ver.1.1
2
Spis treści
Dokumentacja skryptu ..................................................................................................................... 3
Dodatkowe informacje i kontakt ................................................................................................... 7
DAZUMI Sp. z o. o. | ul. Niemcewicza 7/9/185, 02-022 Warszawa
REGON: 141176020 | KRS: 0000293234
Dokumentacja Skryptu Mapy ver.1.1
3
Dokumentacja skryptu
Skrypt pozwala wyświetlić na stronie Sklepu mapę z punktami stacji ORLEN, na które klient ma
możliwość zamówić odbiór swojej paczki.
Pierwszym krokiem w procesie integracji jest wygenerowanie skryptu dla swojego Sklepu. W
tym celu należy wejść na stronę http://stacjazpaczka.pl/site/kreatorKoduMapy.
Na tej stronie znajduje się generator, dzięki któremu można w prosty sposób dostosować
wygląd mapy do kolorystyki własnej strony.
W lewej części znajduje lista opcji, których każda zmiana powoduje inne wyświetlanie mapy.
Po prawej części widoczne jest okno, które wyświetla aktualnie wybrane opcje (mapa w
dokładnie taki sam sposób wyświetli się na stronie Sklepu). W dolnej części strony po kliknięciu
w przycisk "Generuj kod" widoczne jest okno z wygenerowanym na podstawie wybranych
opcji kodem javascript/html.
Okno opcji:
1. Układ - pozwala wybrać dwa możliwe układy mapy. W pierwszym mapa wyświetlona
zostanie na górze, a pola opcji i wyboru poniżej. W drugim pola opcji opływać będą z
prawej strony mapę.
2. Kolorystyka - umożliwia wybór koloru mapy (biały, czarny)
3. Sposób załadowania mapy - daje możliwość sklepowi www wyboru w jaki sposób
mapa ma zostać załadowana na stronę. Dostępne są 3 możliwości:
a) po załadowaniu strony - wybór tej opcji spowoduje, że mapa wyświetli się
każdorazowo po odświeżeniu strony przez klienta końcowego. Warto wybrać
DAZUMI Sp. z o. o. | ul. Niemcewicza 7/9/185, 02-022 Warszawa
REGON: 141176020 | KRS: 0000293234
Dokumentacja Skryptu Mapy ver.1.1
4
tę opcję w momencie gdy sklep umożliwia np. wybór dostawy tylko za
pośrednictwem Stacji z Paczką.
b) po kliknięciu w button "Stacja z Paczką" - wybór tej opcji spowoduje
wygenerowanie dodatkowo przycisku na stronę www, którego kliknięcie
spowoduje załadowanie i wyświetlenie mapy.
c) własny moment wywołania - umożliwia sklepowi załadowanie i wyświetlenie
mapy w dowolnym scenariuszu na stronie poprzez zastosowanie własnego
kodu javascript. Przykład na stronie www:
<form>
<div>
<label for="imie">Imię</label>
<input type="text" name="imie" id="imie" />
</div>
<div>
<label for="nazwisko">Nazwisko</label>
<input type="text" name="nazwisko" id="nazwisko" />
</div>
<div>
<input type="radio" name="sposob_dostawy" value="odbior_osobisty" id="dostawa1">
<label for="dostawa1">Odbiór osobisty</label>
<input type="radio" name="sposob_dostawy" value="stacja_orlen" id="dostawa2">
<label for="dostawa2">Stacja z Paczką</label>
</div>
<div id="stacjaZPaczkaOdbior" style="display: none">
<!-- wygenerowany skrypt mapy z opcją "własny moment wywołania" -->
</div>
<input type="submit" value="Zamawiam" />
</form>
<script type="text/javascript">
window.onload = function () {
var obj = document.getElementById("stacjaZPaczkaOdbior");
document.getElementById("dostawa1").onclick = function() {
obj.style.display = "none";
clearMapHiddenInputs();
deleteMapCookies();
};
document.getElementById("dostawa2").onclick = function() {
obj.style.display = "block";
loadMap();
};
if ( document.getElementById("dostawa2").checked ) {
obj.style.display = "block";
loadMap();
}
}
</script>
DAZUMI Sp. z o. o. | ul. Niemcewicza 7/9/185, 02-022 Warszawa
REGON: 141176020 | KRS: 0000293234
Dokumentacja Skryptu Mapy ver.1.1
5
4. Okno podglądu oraz okno z kodem wygenerowanego skryptu odświeża się
każdorazowo po zmianie dowolnej opcji wyświetlania mapy. Wygląd mapy na stronie
www sklepu będzie taki sam jak w oknie podglądu mapy.
5. "Generuj kod" – kliknięcie w buton spowoduje pojawienie się okna z wygenerowanym
kodem. Kod ten należy skopiować i wkleić na stronie własnego Sklepu WWW.
Przykładowy wygenerowany kod:
<div id="stacjaZPaczka_root"></div>
<input type="hidden" name="tu_wpisz_swoja_nazwe_wojewodztwa" id="stacjaZPaczka_wojewodztwoStacji">
<input type="hidden" name="tu_wpisz_swoja_nazwe_powiatu" id="stacjaZPaczka_powiatStacji">
<input type="hidden" name="tu_wpisz_swoja_nazwe_kodu_pocztowego" id="stacjaZPaczka_kodPocztowyStacji">
<input type="hidden" name="tu_wpisz_swoja_nazwe_miejscowosci" id="stacjaZPaczka_miejscowosc">
<input type="hidden" name="tu_wpisz_swoja_nazwe_ulicy_i_numeru" id="stacjaZPaczka_ulicaNumerStacji">
<input type="hidden" name="tu_wpisz_swoja_nazwe_stacji" id="stacjaZPaczka_nazwaStacji">
<input type="hidden" name="tu_wpisz_swoja_nazwe_pelnych_danych" id="stacjaZPaczka_pelneDaneStacji">
<input type="hidden" name="tu_wpisz_swoja_nazwe_id_stacji" id="stacjaZPaczka_idStacji">
<script type="text/javascript">
var create = document.createElement("script");
create.type = "text/javascript";
create.async = true;
create.src = "http://stacjazpaczka.pl/locationsMapScript/stacjaZPaczkaScriptsLoader.min.js";
var scr = document.getElementsByTagName("script")[0];
scr.parentNode.insertBefore(create, scr);
var mapParams = [];
mapParams.layout = "layout1";
mapParams.mapColor = "white";
mapParams.isOpen = "2";
</script>
Skrypt posiada 3 metody, które programista sklepu www może wykorzystać wstawiając kod
mapy do formularza zamówienia:
1. loadMap() - wywołanie tej metody spowoduje załadowanie mapy do elementu o
id=”stacjaZPaczka_root”
2. deleteMapCookies() - wywołanie tej metody powoduje usunięcie wszystkich plików
cookie jakie dodał skrypt mapy
3. clearMapHiddenInputs() - wywołanie tej metody spowoduje usunięcie wszystkich
wartości (value), w ukrtych inputach mapy np.
<input type="hidden"
name="tu_wpisz_swoja_nazwe_wojewodztwa" id="stacjaZPaczka_wojewodztwoStacji"
/>
DAZUMI Sp. z o. o. | ul. Niemcewicza 7/9/185, 02-022 Warszawa
REGON: 141176020 | KRS: 0000293234
6
Dokumentacja Skryptu Mapy ver.1.1
Objaśnienie wygenerowanego skryptu.
Div o id stacjaZPaczka_root to miejsce, do którego zaczytywana jest cała mapa. Dalej kod
zawiera 8 ukrytych pól o unikalnym id, których wartości (value) wypełniane są w momencie
wyboru punktu stacji bezpośrednio z załadowanego już skryptu mapy przez klienta
końcowego. Pierwsze pole przekaże z formularza województwo wybranej stacji. Drugie
powiat wybranej stacji. Trzecie kod pocztowy. Czwarte miejscowość. Piąte ulicę oraz numer.
Szóste nazwę stacji. Siódme przekaże wszystko pola wcześniej opisane w formie stringa,
którego poszczególne wartości oddzielone będą przecinkami. Ostatnie - ósme id wybranej
stacji.
Dalsza część to kod javascript, który ma za zadanie pobranie głównego skryptu z serwera
Stacji z Paczką oraz zawiera tablicę z wykreowanymi przez sklep w generatorze mapy
parametrami dla mapy.
Style do mapy ładowane są bezpośrednio z serwera Stacja z Paczką. Sklep www jednak
może je dowolnie nadpisać we własnym pliku css. Przykładowo: przy wborze sposobu
załadowania mapy po kliknięciu w button "Stacja z paczką" button ten można ostylować w
sposób:
<style type="text/css">
body a#stacjaZPaczka_mapLoader { display: inline-block; background-color: red; color:
#FFFFFF; width: 200px; text-algin: center; padding: 2px 0; font-size: 18px; }
</style>
Działanie skryptu
Skrypt działa w zależności od wcześniej wybranego sposobu wywołania (sposoby wywołania
opisane zostały powyżej). Kod wkleić należy w formularz zamówienia na stronie sklepu www.
Po zatwierdzeniu przez klienta końcowego wysłania formularza z opcją dostawy skrypt w
plikach cookies zapamiętuje wybraną stację co umożliwia np. wyświetlenie wcześniejszego
wyboru w przypadku wystąpienia błędów w formularzu. Pliki cookies czyszczone są po
zamknięciu sesji (przeglądarki internetowej klienta) lub po wywołaniu metody
deleteMapCookies. Pamiętać należy, że w przypadku wyboru własnego momentu
wywołania oraz przykładowej sytuacji takiej, że klient wybiera opcję dostawy na stację,
wypełnia wszystkie pola, po czym jednak rezygnuje i wybiera np. opcję "odbiór osobisty"
wartości value w ukrytych polach (opisanych wyżej) należy wyczyścić np. za pomocą kodu
javascript lub wywołać metodę „clearMapHiddenInputs” inaczej zostaną one przekazane w
formularzu.
Sklep www powinien do swojej bazy danych przy tabeli odpowiedzialnej za zamówienia
dodać pola odpowiadające za zapisanie wartości stacji, która została wybrana przez klienta
końcowego. Pole te można nazwać dowolnie. Następnie bezpośrednio w widoku strony, przy
wygenerowanym skrypcie wypełnić dowolnie wartości „name” dla wszystkich pól input
type=hidden. Po wysłaniu formularza przez klienta końcowego pola te wysłane zostaną
zgodnie z wcześniej opisanym formularzem po stronie kontrolera.
DAZUMI Sp. z o. o. | ul. Niemcewicza 7/9/185, 02-022 Warszawa
REGON: 141176020 | KRS: 0000293234
Dokumentacja Skryptu Mapy ver.1.1
7
Dodatkowe informacje i kontakt
Odpowiedzi na wszelkie pytania oraz dodatkowe informacje uzyskać można
kontaktując się z nami:
Wsparcie techniczne:
[email protected]
Dazumi Sp. z o. o.
ul. Niemcewicza 7/9/185
02-022 Warszawa
tel/faks: 22 659 54 20
[email protected]
DAZUMI Sp. z o. o. | ul. Niemcewicza 7/9/185, 02-022 Warszawa
REGON: 141176020 | KRS: 0000293234