W sklepie klienta można zamówić pakiety harbat w różnej konfiguracji wybierając z czterech rodzajów.
Przejdź do:
1. Wstęp
2. Harmonogram
3. Architektura i technologie
4. Funkcjonalności
WSTĘP
Projekt sklepu powstał na zlecenie agencji interaktywnej i jej klienta. Planowanie i projektowanie designu było w zakresie agencji, programowanie frontendu i backendu po naszej stronie.
HARMONOGRAM
Projekt prowadzony był w metodyce waterfall:
1. Product design (UX/UI designer agencji)
2. Programowanie frontendu
3. Programowanie backendu
4. Integracja płatności online
ARCHITEKTURA I TECHNOLOGIE
Projekt został podzielony na dwie aplikacje: frontend (Gatsby.js) i backend (PHP). Backend zintegrowany został z panelem Stripe do płatności i faktur. Sklep został zbudowany na dedykowanym silniku PHP, bez gotowych, open-source platform e-commerce.
Dodatkowo wykorzystaliśmy technologie:
- Gatsby.js - framework wspierający pozycjonowanie SEO, najwyższe wyniki szybkości
- StyledComponents - bilbioteka do stylowania widoków
- Stripe.js - biblioteka wspierająca płatności online
- Formik - biblioteka ułatwijąca budowanie formularzy
- Yup - biblioteka ułatwijąca walidację danych z formularzy przed przesłaniem na serwer
FUNKCJONALNOŚCI
- Generowanie horoskopu - użytkownik po wypełnieniu formularza danymi (np. daty urodenia, płci) otrzymuje na email horoskop z rekomendacjami produktów. Do różncyh zakresów dat urodzenia i płaci przygotowane zostały różne wersje horoskopów oraz rekomendacji produktów.
- Wybór herbatek do pakietu - użytkownik wybierając pakiet z określoną ceną może wybrać maksymalną ilość herbat z czterech rodzajów zmieniając ich cyfrę. Jeśli cyfra jest większa niż przewiduje pakiet wyświetlany jest komunikat o konieczności zwiększenia pakietu.
- Wybór pakietu - użytkownik wybierając pakiet (8, 16, 32 herbatki) przechodzi do formularza wyboru herbatek. Funkcjonalność została dodana także do wysyłanego maila.
- Płatności - użytkownik po wyborze herbetek z pakietu przechodzi do płatności online. Jeśli nie zostały wybrane wszystkie herbatki z pakietu otrzymuje komunikat o konieczności dobrania produktów. Po przejściu do płatności wybierana jest metoda: przelew online, karta płatnicza. Następnie płatność jest przetwarzana, użytkownik wraca automatycznie na stronę podziękowania za zakup. Po kilku sekuntach i informacji od Stripe wysyłane są dwa emaile: do użytkownika z potwierdzeniem płatności lub błędem oraz do właścicela sklepu z informacją o nowej płatności.
