Dokumentacja Skryptu Mapy ver.1.1

Transkrypt

1 Dokumentacja Skryptu Mapy ver.1.1

2 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7

3 3 Dokumentacja Skryptu Mapy ver.1.1 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ę 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ć

4 4 Dokumentacja Skryptu Mapy ver.1.1 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> <label for="nazwisko">nazwisko</label> <input type="text" name="nazwisko" id="nazwisko" /> <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 id="stacjazpaczkaodbior" style="display: none"> <!-- wygenerowany skrypt mapy z opcją "własny moment wywołania" --> <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>

5 5 Dokumentacja Skryptu Mapy ver 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"> <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"> </script> var create = document.createelement("script"); create.type = "text/javascript"; create.async = true; create.src = " var scr = document.getelementsbytagname("script")[0]; scr.parentnode.insertbefore(create, scr); var mapparams = []; mapparams.layout = "layout1"; mapparams.mapcolor = "white"; mapparams.isopen = "2"; 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" />

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

7 7 Dokumentacja Skryptu Mapy ver.1.1 Dodatkowe informacje i kontakt Odpowiedzi na wszelkie pytania oraz dodatkowe informacje uzyskać można kontaktując się z nami: Wsparcie techniczne: it@stacjazpaczka.pl Dazumi Sp. z o. o. ul. Niemcewicza 7/9/ Warszawa tel/faks: biuro@dazumi.com.pl