.Konfigurator pergole, markizy

Budowa konfiguratora + RWD

Innowacją w tym projekcie jest widok (podgląd) bieżącej konfiguracji generowany niejako w czasie rzeczywitym, na podstawie zaznaczonych wartości, w poszczególnych krokach.
Panel CMS to silnik IM-CMS zintegrowany z platformą sprzedażową Woocommerce, a sam konfigurator renderowany jest na stronie produktowej sklepu. W panelu CMS administrator jest w stanie od zera zbudować zaawansowaną definicję konfiguratora. Podłączyć wartości, grafiki do podglądu.
Zasada działania jest następująca:
  • Użytkownik skrolując stronę przechodzi do poszczególnych kroków, i zazanaczą wartości
  • Pewne opcje mogę zasłonić lub dezaktywować inne opcje
  • Istnieje również typ kroku, w którym użytkownik zamiast zaznczenia wartości wpisuje z klawiatury wymiary
  • Te wymiary również mogą mieć wpływ na ukrywanie lub dezaktywację wartości w krokach następnych
  • Pewne opcje mogą również ukrywać całe kroki
  • Każda z opcji może zawierać dodatkowy koszt kwotowy lub procentowy, definiowany w panelu CMS
  • Po zaznaczeniu wartości z wszystkich wymaganych kroków konfiguracja jest podsumowywana i można ją dodać do koszyka
  • Reszte przejmuje już koszyk Woocommerce gdzie została dodana cała konfiguracja
Pokrótce tak działa konfigurator.

Technologie i integracja z Woocommerce

Cały system, można powiedzieć, składa się z 5 podstawowych funkcjonalności: silnik konfiguratora, generator podglądu, integracja z Woocommerce, panel administratora, layout RWD konfiguratora.
Każdy z tych elementów był na swój sposób złożony. Złożone definicje takie jak np. dezaktywacja innych wartości za pomocą danej wartości odbywa się w Panelu Admina przy pomocy definicji w formacie JSON.
Dla poprawienia wydajności, podczas renderowania strony produktowej, większość definicji trafia od razu do tablic JavaScript lub bloków JSON. Silnik konfiguratora to czysty JavaScript i jQuery. Woocommerce to praca z "zaczepami". Panel Admina to bardzo dużo pracy w języku serwera PHP-OOP i bazy danych MySQL/MariaDB, layout natomiast to Bootstrap i LESS-CSS.
Ciekawostką jest również fakt, że bazy Woocommerce i Konfiguratorów są rozdzielone (osobny Panel Administratora). W Woocommerce przypisuje się tylko utworzone definicje konfiguratorów do produktów (same definicje silnik Woocommerce widzi za pośrednictwem pliku JSON).

Live DEMO


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