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.

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 ;)