Jumperia - kodowanie projektu graficznego sklepu internetowego

O projekcie Jumperia

Jumperia to sklep internetowy z modą, którego projekt graficzny przygotowała firma gtdesign.pl. W 2013 roku na jej zlecenie zakodowaliśmy komplet ekranów sklepu do HTML, CSS i JavaScript - 11 stron i okien.

Sklep w klubowym klimacie

Sklep był częścią większego serwisu - w górnym menu zakodowanych stron obok sklepu są działy: nasze kluby, imprezowicze, dodaj klub, wydarzenia, galeria i jumprezka. Stąd klimat projektu: ciemne tło, nagłówek ze światłami klubu i parą modeli, fioletowo-różowa kolorystyka z neonowymi akcentami. Odzież podzielono na kategorie dla niej i dla niego, a w każdej na ubrania klubowe, na co dzień i okazjonalne. Z boków strony wystają przyklejone zakładki z liczbą użytkowników online, Facebookiem i odtwarzaczem Jumperii.

Ekrany sklepu

Zakodowaliśmy kartę produktu z dostępnością, czasem wysyłki, kodem, kolorami, rozmiarem, oceną i zakładkami z opisem, wymiarami oraz galerią klientów. Pod nią są komentarze z formularzem dodawania i przejścia do poprzedniego i następnego produktu. Lista produktów ma drzewo kategorii, filtry dostępności i producenta, sortowanie i stronicowanie, a porównywarka zestawia dwa produkty obok siebie z cenami brutto i netto. Koszyk pozwala zmienić rozmiar, kolor i liczbę sztuk oraz wpisać kod rabatowy. Zamówienie ma trzy kroki: logowanie lub rejestrację (także przez konto w serwisie społecznościowym), dane kontaktowe z adresem dostawy i opcjonalnymi danymi do faktury, a na końcu wybór dostawy i płatności. W trzecim kroku koszt transportu przelicza się po wyborze kuriera, a podsumowanie pokazuje łączną kwotę z dostawą brutto i netto. Osobne okna to potwierdzenie przyjęcia zamówienia i komunikat błędu z listą niewypełnionych pól.

Konto klienta

W koncie klienta jest historia zamówień z filtrem statusu (wszystkie, zrealizowane, w trakcie realizacji), sortowaniem po dacie lub cenie i dostępem do faktur. Lista kuponów rabatowych ma filtry wysokości zniżki, zakresu i terminu ważności, a przy każdym kuponie status i przycisk jego użycia.

Elementy zachęcające do zakupów

Projekt miał sporo nietypowych bloków: wyszukiwarkę po nazwie, odbiorcy i kategorii produktu, boks "Manager sklepu" do zadania pytania o produkt lub lepszą cenę, konkurs "Top Model" z odliczaniem do startu, galerię klientów, w której zdjęcia w kupionych ubraniach dają punkty wymieniane na rabaty, oraz kupon "Jumprezka" z rabatem na kolejne zakupy. Do tego statystyki sklepu, ostatnio oglądane produkty, polecane nowości i najczęściej kupowane, miejsce na baner 950 x 100 px i pasek z informacją o cookies.

Technika

Strony korzystają z jQuery 1.8 i Modernizr oraz kroju Gotham osadzonego przez @font-face. Listy rozwijane i pola wyboru dostały własny wygląd dzięki wtyczkom Selectyze i custom-checkbox, a okna kuponów, potwierdzenia i błędu działają jako nakładki nad stroną z własnym paskiem przewijania (perfect-scrollbar). Pocięte strony można obejrzeć pod adresem projekty.coolpage.pl/jumperia_pl/.