Klient: deweloper nieruchomości z Polski południowej
Zakres: autorska platforma WordPress do zarządzania ofertą lokali z interaktywną mapą inwestycji
Technologie: WordPress, PHP, JavaScript, SVG, REST API
TJS Power - samoobsługowe stacje ładowania rowerów elektrycznych
Wyzwanie
Deweloper prowadził sprzedaż inwestycji w sposób, który zna większość firm z tej branży: oferta żyła w arkuszu kalkulacyjnym, a strona internetowa była jej nieaktualną kopią.
Każda zmiana oznaczała pracę w kilku miejscach naraz. Ktoś sprzedawał lokal, ktoś inny poprawiał arkusz, ktoś trzeci – po kilku dniach – ręcznie przekolorowywał rzut inwestycji w programie graficznym i wgrywał nowy obrazek na stronę. Efekt był przewidywalny: klient dzwonił o mieszkanie, którego już nie było, a handlowiec tracił pierwsze dwie minuty rozmowy na tłumaczenie pomyłki.
Do rozwiązania było kilka problemów jednocześnie:
- Brak jednego źródła prawdy – arkusz, strona i materiały drukowane mówiły trzy różne rzeczy.
- Statyczna mapa inwestycji – rzut był obrazkiem, nie danymi. Każda aktualizacja wymagała grafika.
- Zapytania bez kontekstu – formularz kontaktowy przysyłał wiadomość „interesuje mnie mieszkanie”, bez informacji które.
- Brak możliwości skalowania – kolejna inwestycja oznaczała powtórzenie całego procesu od zera.
Zbudowaliśmy platformę, w której panel WordPress stał się jedynym miejscem zarządzania ofertą, a wszystkie widoki na stronie - mapa, lista, karta lokalu, formularz - czytają z tych samych danych.
Baza lokali
Interaktywna mapa inwestycji
Automatyczne kolorowanie statusów
Dynamiczne tooltipy
Karta lokalu
Formularz zapytania z kontekstem
// rzut z programu graficznego to zbiór ścieżek, nie danych.
// lokal wiążemy z obiektem przez atrybut w SVG —
// grafik może podmienić rzut, powiązania zostają
const obiekt = rzut.querySelector(`[data-object-id="${lokal.id}"]`);
obiekt?.setAttribute('fill', STATUSY[lokal.status]);
// dymki powstają dopiero przy najechaniu — w chwili
// ładowania strony nie ma jeszcze czego podpiąć
new MutationObserver((zmiany) => {
for (const z of zmiany) {
const dymek = z.target.querySelector('.dymek:not([data-gotowy])');
if (dymek) uzupelnij(dymek);
}
}).observe(rzut, { childList: true, subtree: true });
// przełączanie rzutów przeliczało układ dziesiątki razy
// na sekundę i dławiło słabsze urządzenia
const przelicz = throttle(dopasujSkale, 800);
/* źródło danych, karty lokali i formularz zapytań — poza kadrem */
Trzy problemy, które trzeba było rozwiązać po drodze
To nie był projekt „poskładany z gotowców”. Trzy rzeczy wymagały nietypowych rozwiązań:
Sterowanie obiektami w SVG. Rzut inwestycji wyeksportowany z programu graficznego nie ma żadnej struktury użytecznej dla aplikacji – to zbiór ścieżek. Powiązaliśmy każdy lokal w bazie z konkretnym obiektem na rzucie przez atrybut w kodzie SVG. Dzięki temu grafik może podmienić rzut, a powiązania zostają.
Tooltipy generowane po fakcie. Elementy interfejsu mapy powstają dynamicznie, już po załadowaniu strony, więc klasyczne podpięcie zdarzeń do nich nie działa. Zastosowaliśmy obserwator zmian w drzewie dokumentu, który wykrywa pojawienie się nowego elementu i dopiero wtedy uzupełnia go danymi lokalu.
Wydajność przy przełączaniu widoków. Przy szybkim przełączaniu między rzutami przeglądarka przeliczała układ dziesiątki razy na sekundę, co dławiło interfejs na słabszych urządzeniach. Ograniczyliśmy częstotliwość przeliczeń, zachowując płynność animacji.
Efekt
Jedno miejsce zarządzania
status zmieniany raz, widoczny na mapie, liście i karcie lokalu.
Koniec z ręcznym kolorowaniem rzutów
proces, który zajmował godziny i wymagał grafika, trwa teraz kilka sekund.
Zapytania z kontekstem
handlowiec wie, o który lokal chodzi, zanim odbierze telefon.
Gotowość na kolejne inwestycje
dodanie nowego projektu to wgranie rzutu i uzupełnienie bazy, bez pracy programisty.
Największą wartością nie była żadna pojedyncza funkcja, tylko zlikwidowanie rozjazdu między tym, co firma wie, a tym, co widzi klient. Wszystko inne - mapa, tooltipy, formularze - jest tylko sposobem pokazania tych samych, zawsze aktualnych danych.
Sprzedajesz nieruchomości i Twoja oferta żyje w arkuszu? Pokażemy, jak przenieść ją do jednego systemu.