Glowsy: konfigurator 3D

Klient

Glowsy - marka personalizowanej biżuterii z grawerem, dla której wcześniej zbudowaliśmy sklep. Konfigurator to kolejny etap współpracy: zastąpił prosty, płaski podgląd obrazkowy.

Wyzwanie

Personalizacja to w tym sklepie cały produkt, a klient kupował ją w ciemno. Płaski podgląd obrazkowy nie pokazywał, jak grawer realnie ułoży się na bryle, więc przed zakupem zostawała niepewność, a po zakupie ryzyko reklamacji. Do tego każdy kolejny produkt oznaczał dokładanie kolejnego wariantu interfejsu, a dane graweru trzeba było przekazać do pracowni w formie, której nie da się zinterpretować dwuznacznie.

Rozwiązanie

Zbudowaliśmy konfigurator od zera jako aplikację jednostronicową wpiętą w WooCommerce.

1. 01

   Podgląd 3D na Three.js. Model .glb z nazwanymi strefami graweru, tekst i ikony renderowane przez canvas do tekstur i nakładane na te strefy, z kalibracją pozycji, krzywizny i głębi, żeby grawer leżał na bryle realistycznie.

2. 02

   Kreator dawkuje decyzje pojedynczo, zamiast zasypywać jednym formularzem. Grawer z przodu, pytanie o tył, czcionka, pakowanie. Wybór graweru dwustronnego dokłada krok w locie.

3. 03

   Silnik konfiguracyjny. Każdy produkt to definicja opisująca pola, model, cennik i presety, więc kolejny produkt dodaje się definicją, a nie przepisywaniem interfejsu.

4. 04

   Cena liczona podwójnie, w podglądzie i wiążąco na serwerze, na tych samych regułach, żeby klient nigdy nie zobaczył innej kwoty niż zapłaci.

5. 05

   Konfiguracja trafia do pozycji zamówienia w formie czytelnej dla grawerni. Tekst, ikona z pozycją, strona. Do tego cofanie zmian, zapis projektu na koncie i udostępnianie konfiguracji linkiem.

Zakres prac