.Konfigurator malarski

Projektowanie
Projektowanie RWD z grawerem
Faktura drewna i kolory
Makieta startowa
Widok makiety na tablecie
Odcienie morza

Budowa konfiguratora + RWD

Powiem wprost, najwięcej przeprawy w tym projekcie miałem z dopasowaniem makiety i klocków do wersji mobile.
Zasada działania jest następująca:
  • Użytkownik wybiera kolor
  • Wszystkie klocki zabarwiają się tym kolorem
  • Użytkownik wybiera drugi kolor
  • Wszystkie klocki zabarwiają się dwoma koloroami
  • I tu uwaga, proporcjonalnie do ilości danego kształtu (np. nie mogą sześciany być w większości jednego koloru)
  • Program cały czas ma czuwać nad ilością i rozkładem kolorów i kształtów
  • To samo przy 3, 4, 5, itd. kolorach
  • Zawsze użytkownik może odznaczyć kolor
  • Użytkownik może (ale nie musi) wpisać grawer na środkowy klocek
  • Po zakończeniu projektowania dodaje zestaw do koszyka
  • Po złożeniu zamówienia administrator widzi tylko ile kształtów w jakich kolorach jest do zrealizowania
Wszystko to nie byłoby takie straszne gdyby nie wydajność niektórych smartfonów (po analizie stawiam na ilość pamięci RAM danego urządzenia i optymalizację systemu operacyjnego). Iphony przykładowo, były wydajniesze od komputerów. Po wielu dniach analiz udało mi się zoptymalizować program do kilkusekundowego kolorowania na słabszych urządzeniach.
Sprytny skrypt do pomocy program, który zbierał bierzące współrzędne strzałki do pamięci podręcznej, po kliknięciu myszą. Dzięki temu narysowanie obiektu za współrzędnych na makiecie zajęło minutę.
Ostatnim problemem okazał się RWD. Duża makieta, dużo kolorów, dużo klocków. Jak to "upchać"? Bootstrap - dziękuję, że jesteś.

Technologie i integracja z Prestashop

Większość zadań w malowaniu poszczególnych kształtów jest realizowana po stronie klienta. Technologie które idealnie się do tego nadały: jQuery i jCanvas. W momencie gdy użytkownik dodaje zaprojektowany zestaw do koszyka to włącza się AJAX, który asynchronicznie wysyła zapytania do bazy danych. Tak naprawdę cały silnik AJAXowy jest już w Prestashopie, ja musiałem się"tylko" pod niego podłączyć. Powiem szczerze, spodziewałem się, że koszyk Prestashop'u ma jakieś API, do którego się podepnę. Okazało się że nie ma. Wszystkie skrypty musiałem dopisywać oddzielnie w każdym pliku - zgodnie z ideą MVC (Model Widok Kontroler). Tu muszę pochwalić swojego Netbeans IDE - PHP za widoczność klas i metod globalnie w całym projekcie. Dzięki tej umiejętności, za pomocą klawisza CTRL mogłem znaleźć wywoływany element w całej strukturze projektu, mimo że ja znajdowałem się w jakiejś gałęzi.
o złożoności projektu może powiedzieć dużo plik konfiguracji.

Live DEMO

Ze względu na starszy silnik Prestashop, projekt nie jest możliwy do przetestowania na wersji PHP > 8.0.

2024 - Internet.Media - Damian Krawiec, Zielona Góra, Lubuskie
m(at)internet.media.pl