wrz
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?

Po kliknięciu w link “Termin wysyłki” pokazuje się ramka, z licznikiem czasu.

Odliczanie czasu wysyłki

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.

Wysyłka jeszcze dziś przy płatności eTransfer oraz Gotówka przy odbiorze:
Kurier DPD do godz. 14:00
InPost do godz. 17:00
Poczta Polska do godz. 18:00
Paczkomat do godz. 20:00

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

Autor wpisu: Arkadiusz Krakiewicz

Programista i właściciel sklepu jednocześnie, dzięki temu rozumie potrzeby osób prowadzących sprzedaż w internecie. Od 2006 związany z eCommerce. Zaczynał jako freelancer tworząc sklepy oraz strony www. Aktualnie zajmuje się: programowanie w PHP, Symfony 2, Android, PrestaShop, osCommerce, OpenCart, WordPress.

Dodaj komentarz

Anti-Spam

O mnie

Arkadiusz Krakiewicz
Programista aplikacji webowych dla branży eCommerce. Jednocześnie jako właściciel sklepu zna od "podszewki" potrzeby osób prowadzących sprzedaż w internecie.
W swoich rozwiązaniach stawia na funkcjonalność i wydajność aplikacji pod kątem obsługi klienta.
[X]
Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików cookies.
Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.
Więcej w Skrypty i moduły
Google logo
Jak rozpoznać Googlebot – skrypt PHP

Dla osób zainteresowanych tematem Google w dzisiejszym odcinku z serii "krótkie, łatwe i potrzebne" opiszę jak rozpoznać na swojej stronie...

Zamknij