Od Instagrama do własnego sklepu z konfiguratorem

Od Instagrama do własnego sklepu z konfiguratorem

Zobacz stronę

Astro

Frontend framework

TypeScript

Typowanie end-to-end

Tailwind CSS

Utility-first styling

Vercel

Hosting + SSR

P

PayU

Płatności online

A

Apilo

Integracja z realizacją zamówień

Problem

Brak własnego sklepu. Sprzedaż i obecność online opierały się głównie na Instagramie.

Decyzja

Zaprojektować dedykowany kanał e-commerce dopasowany do sposobu konfiguracji i sprzedaży produktów Lusmeb, z konfiguratorem i płatnością online.

Realizacja

Aplikacja z konfiguratorami produktów, dynamiczną i weryfikowaną ceną, płatnością online oraz automatycznym przekazaniem zamówienia do realizacji.

Efekt

Własny kanał e-commerce z konfiguracją produktów, płatnością online i automatycznym przekazaniem zamówień do realizacji.

Klient sam wybiera wariant mebla albo tabliczki, widzi cenę na bieżąco, płaci online, a zamówienie samo trafia dalej do produkcji.

Lusmeb robi meble i oznakowanie dla salonów beauty - lady recepcyjne, biurka do manicure, tabliczki z własnym napisem - i sprzedawał to głównie przez Instagram. Zaprojektowałem i zbudowałem im dedykowany kanał e-commerce, dopasowany do tego, jak te produkty faktycznie są konfigurowane i sprzedawane.

Problem

Lusmeb nie miał własnego sklepu internetowego. Obecność i sprzedaż online opierały się głównie na Instagramie - czyli na zdjęciu gotowego produktu i kontakcie bezpośrednim: wiadomości, telefonie albo komentarzu pod zdjęciem.

Nie było tam ścieżki, w której klient mógłby sam skonfigurować produkt - wybrać kolor, rozmiar, wykończenie czy własny napis na tabliczce - i od razu go kupić.

Decyzja

Nie chodziło o kolejny kanał komunikacji, tylko o kanał sprzedaży - miejsce, gdzie klient sam konfiguruje produkt, widzi cenę, i płaci za to, co faktycznie zamówił.

Powstała dedykowana aplikacja w Astro, dopasowana do katalogu Lusmeb, czyli dwóch całkiem różnych rodzajów produktów. Meble mają opcje typu kolor czy wykończenie. W przypadku tabliczek dochodzi własny tekst, font i kolor. Każdy z tych dwóch światów wymaga innej logiki konfiguracji.

Rozwiązanie

Klient wybiera produkt i konfiguruje go krok po kroku - opcje mebla albo własny tekst, font i kolor tabliczki. System na bieżąco przelicza cenę wybranej konfiguracji. Po akceptacji płaci online, a zamówienie leci dalej, do systemu produkcji, bez etapu ręcznego przepisywania.

Ten sam mechanizm obsługuje i meble, i tabliczki, mimo że logika konfiguracji jest inna w obu przypadkach - dla mebli to wybór spośród gotowych opcji, dla tabliczek dochodzi własny tekst i wybór fontu oraz koloru.

Kluczowe decyzje i wyzwania

Cena, którą można pokazać i której można zaufać

Klient musi widzieć cenę na bieżąco, w trakcie konfigurowania. Problem w tym, że ta sama cena musi być tą, którą realnie pobiera płatność - inaczej wystarczyłoby zmienić żądanie wysyłane do serwera, żeby zapłacić mniej, niż wynika z wybranej konfiguracji.

Dlatego cena nigdy nie jest po prostu przekazywana do płatności. System liczy ją od nowa, samodzielnie, tą samą logiką co podgląd u klienta - i to ten wynik decyduje, ile trzeba zapłacić. Klient widzi cenę od razu, a mimo to nie da się zapłacić za coś innego, niż faktycznie skonfigurował.

Od zapłaconego zamówienia do zlecenia produkcyjnego, bez ręcznej roboty

Płatność obsługuje PayU, ale powiadomienia o płatności potrafią przyjść z opóźnieniem, powtórzyć się, a w teorii ktoś mógłby też spróbować je podszyć. Zamówienie mimo to musi trafić dalej - do systemu, z którego korzysta produkcja - automatycznie, bez dodatkowego kroku.

Dlatego każde powiadomienie jest sprawdzane pod kątem tego, czy rzeczywiście pochodzi od PayU, a system liczy się z tym, że to samo powiadomienie może przyjść więcej niż raz - bez podwójnego naliczenia czy podwójnej wysyłki do realizacji. Po potwierdzeniu płatności zamówienie samo trafia do systemu, z którego korzysta produkcja (Apilo), a do produkcji leci gotowy dokument zlecenia ze wszystkimi szczegółami konfiguracji.

Rezultat

Przed: brak własnego sklepu internetowego, obecność i sprzedaż online oparte głównie na Instagramie, brak samodzielnej konfiguracji i zakupu.

Po: własny kanał e-commerce - klient konfiguruje produkt, widzi cenę na bieżąco, płaci online, a zamówienie samo trafia do realizacji.

Moja rola

Zaprojektowałem i zbudowałem całe rozwiązanie: architekturę aplikacji, konfiguratory produktów, logikę liczenia i weryfikacji ceny, integrację płatności i integrację z systemem realizacji zamówień (Apilo).

Masz projekt, który nie mieści się w gotowym schemacie?

Opisz, co chcesz zbudować albo uporządkować.