3
2012
Odliczanie czasu wysyłki (timer) – skrypt jQuery + JavaScript
W dobie szybkich płatności online i stałego usprawniania logistyki w eCommerce, nasi klienci przyzwyczajają się do ekspresowej obsługi zamówienia. Kupując na Allegro przywykliśmy do tego, że sprzedawca posiada towar na stanie i wyśle go do nas w ciągu 24h. Mówiąc wprost, kupujący chcą aby towar został wysłany jak najszybciej, najlepiej jeszcze dziś. To normalne, że te przyzwyczajenia przenosimy do zakupów sklepowych i właśnie w tym punkcie sprzedawca może wykorzystać to na swoją korzyść. Posiadając magazyn oraz oprogramowanie pozwalające na aktualizację stanów magazynowych z systemem sklepu, możemy informować klienta o terminie dostawy znacznie dokładniej niż to miało miejsce do tej pory (24h, 2-3 dni itp…) Dzięki prostemu skryptowi na naszej stronie możemy informować klienta ile czasu pozostało do wysyłki danego dnia.
Jak to wygląda?
Powyższy screen pochodzi z mojego sklepu nurkowego i posłuży jako przykład ;)
Zalety:
- Klient szybciej podejmie decyzję o zakupie. Przy małych kwotach, zakupy często są impulsywne.
- Jak Ty byś postąpił? Załóżmy, że wyjeżdżasz w weekend na urlop, a dziś czwartek. Nerwowo szukasz sklepu z dobrą ceną i towarem na stanie. Trafiasz na sklep, który pokazuje Zostało już 30 minut do wysyłki jeszcze dziś. Co robisz w takim momencie? Nawet nie myślisz, aby dzwonić, bo już masz informację. Tylko ten sklep podał termin. Kupujesz, wiesz że towar dotrze do Ciebie przed wyjazdem.
- Po pewnym czasie klient zapamięta, że to nasz sklep posiada towar na stanie. Buduj pozytywne wrażenie wokół swojej marki.
- Wiele sklepów tego jeszcze nie ma. Zwyczajnie – bądź o krok przed konkurencją ;)
Wady:
- Towar musi być na stanie. W takim przypadku, dobre jest oprogramowanie sklepu zintegrowane z kasą fiskalną. Gdy są także klienci stacjonarni, ciężko jest jednocześnie ich obsługiwać i ręcznie zmieniać statusy dostępności/ilości towaru.
- Ręczna aktualizacja stanów magazynowych jest „ciemiężna”, chyba że masz bardzo mały magazyn i jesteś w stanie go ogarnąć.
- Kilka pomyłek typu towar jest, ale fizycznie go nie ma, czyli nie możemy go do Pana/Pani dziś wysłać i pojawiają się negatywne opinie.
Opis funkcjonalności:
- Licznik działa tylko od poniedziałku do piątku. Weekendy są wyłączone.
- Wyświetla pozostałą liczbę godzin, minut i sekund.
- Wyświetla pozostały czas przy odpowiednim typie wysyłki w zależności od godziny.
- Uwzględnia różnice stref czasowych, przelicza czas na polski. Osoby z innych stref czasowych będą widzieć prawidłowo przeliczony czas pozostały do wysyłki zamówienia (dla klientów zza granicy).
- Jeżeli Twój sklep nie wysyła zamówień w weekendy, można dorobić funkcjonalność. Zamiast timera wyświetla się komunikat „Wysyłka w poniedziałek”. W swoim sklepie zrobiłem to przez PHP warunkiem
if
i funkcjądate()
. Dzięki temu skrypt licznika w ogóle się nie generuje w HTML.
Demo:
Działa jeżeli jest to godzina od 6:00 do 20:00 czasu polskiego poza weekendami.
W innych godzinach skrypt nie odlicza czasu.
Kurier DPD do godz. 14:00
InPost do godz. 17:00
Poczta Polska do godz. 18:00
Paczkomat do godz. 20:00
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script type="text/javascript"> /* PLtime - konwertuje czas, zgodny z polską strefą czasową UTC+2h Poniżej skryptu opisałem zasadę działania tej funkcji. 60 - czas zimowy 120 - czas letni Zamiast przypisywać na stałe liczby czasu letni/zimowy, można użyć funkcji PHP -> <? echo date('I') == 0 ? 60 : 120; ?> */ function PLtime(d) { d.setMinutes( d.getMinutes() + d.getTimezoneOffset() + 60); } function timer () { var d = new Date(); // tworzenie obiektu, z którego będziemy obliczać pozostały czas PLtime(d); // konwertowanie czasu na polski var godz = d.getHours(); // podstawienie godzin var dzien = d.getDay(); // podstawienie dnia (ma badać czy nie jest weekend) if ( dzien > 0 && dzien < 6 && godz >= 6 && godz < 20 ) { // poza sobotą i niedzielą i godzinami 6-20 var min = d.getMinutes(); // podstawienie minut var sek = d.getSeconds(); // podstawienie sekund var czas = ' pozostało już '; // zmienna typu string, do niej będzie dołączany tekst ile czasu pozostało var span = ''; // ID znacznika <span> dla wskazanej metody wysyłki if ( godz >= 6 && godz < 14 ) { // pomiędzy godz. 6:00-13:59 odlicza czas dla kuriera DPD godz = 14 - godz; // godzina, od której ma rozpocząć się odliczanie span = 'dpd'; // pozostała część wartości ID elementu span np. "timer_dpd" } else if ( godz >= 14 && godz < 17 ) { // pomiędzy godz. 14:00-16:59 odlicza czas dla poczty InPost godz = 17 - godz; span = 'inp'; // inpost } else if ( godz >= 17 && godz < 18 ) { // pomiędzy godz. 17:00-17:59 odlicza czas dla poczty polskiej godz = 18 - godz; span = 'pp'; // poczta polska } else if ( godz >= 18 && godz < 20 ) { // pomiędzy godz. 18:00-19:59 odlicza czas dla paczkomatu godz = 20 - godz; span = 'p24'; // paczkomat } godz -= 1; // odjęcie jednej godziny, aby prawidłowo wyświetliło pozostały czas min = 59 - min; // wartość, od której mają być odliczane minuty sek = 59 - sek; // jak wyżej, dla sekund if ( godz > 0 ) czas += '<b>' + godz + '</b> godz '; // warunek zapobiegający wyświetlaniu "pozostało 0 godzin", godzina znika, jeżeli pozostały już tylko minuty if ( !(godz == 0 && min == 0) && min > 0 ) czas += '<b>' + min + '</b> min '; // warunek zapobiegający wyświetlaniu "pozostało 0 minut", minuty znikają, jeżeli pozostały już tylko sekundy (np. 0 godzin 0 minut 57 sekund) czas += '<b>' + sek + '</b> sek '; // dodanie sekund do tekstu wyjściowego $('span[id^="timer_"]').html(''); // czyści wszystkie pola $('#timer_' + span).html( ', ' + czas ); // podstawia licznik do odpowiedniego span'a setTimeout('timer()', 1000); // funkcja ma uruchamiać się co jedna sekunda, dzięki temu będzie odliczanie sekundowe } } timer(); // wywołanie funkcji </script> |
1 2 3 4 5 |
Wysyłka <b>jeszcze dziś</b> przy płatności eTransfer oraz Gotówka przy odbiorze: <b>Kurier DPD</b> do godz. <b>14:00</b><span id="timer_dpd"></span> <b>InPost</b> do godz. <b>17:00</b><span id="timer_inp"></span> <b>Poczta Polska</b> do godz. <b>18:00</b><span id="timer_pp"></span> <b>Paczkomat</b> do godz. <b>20:00</b><span id="timer_p24"></span> |
Opis funkcji PLtime():
Funkcja przyjmuje jako argument obiekt Date().
getTimezoneOffset() – funkcja zwraca różnicę strefy czasowej podaną w minutach, pomiędzy czasem UTC a przeglądarką klienta.
getMinutes() – funkcja zwraca liczbę minut od 0 do 59 dla aktualnego czasu przeglądarki klienta.
setMinutes() – funkcja ustawia czas według minut.
Najpierw pobierana jest różnica w minutach getTimezoneOffset
, następnie doliczany jest aktualny czas klienta getMinutes
, dzięki temu uzyskujemy czas UTC i dodajemy dwie godziny, czyli 120 minut, aby uzyskać czas polski (UTC+2h). Ostatnim etapem jest ustawienie setMinutes
ustalonego czasu polskiego dla obiektu Date()
, na którym będziemy operować.
Należy pamiętać o zmianie czasu letni/zimowy +/- jedna godzina. Można to wykonać w prosty sposób używając instrukcji PHP: echo date('I') == 0 ? 60 : 120
Uwagi:
- Do działania skryptu potrzebny jest framework jQuery.
- Część JS wstawiamy w sekcji
head
, natomiast część HTML w wybranym dla nas miejscu, widocznym dla klienta. - Należy pamiętać o zmianie czasu na polski, do czego służy nam funkcja
PLtime()
. - Należy dodać informację, że tylko przy odpowiednich metodach płatności jest realizowane zamówienie jeszcze dziś, np. za pobraniem, szybki przelew on-line.
- UTC Universal Time Clock i GMT Greenwich Mean Time jest tym samym czasem.
- Dla osób zaczynających z JavaScript kieruję do strony z opisem obiektu Date() oraz frameworkiem jQuery :)
Opisałem to najprościej jak mogłem. W przypadku pytań, piszcie w komentarzach, lub na PW ;)
Podobne tematy
1 komentarz + Dodaj komentarz
Dodaj komentarz
O mnie
Najnowsze wpisy
- Drzewo kategorii – budowa struktury od dołu do góry
- PHPExcel – export + import pliku XLS
- WordPress + Polylang – Tworzenie klasy CSS z ID strony/wpisu w wybranym języku
- Mailing – Poprawna konstrukcja szablonu maila HTML/CSS i prawidłowy wygląd w programie pocztowym
- Szukasz programisty PHP dla e-commerce?
coś chyba nie działa