Wyszukiwarka mieszkań 3D na stronie WordPress: jak połączyć makietę z cennikiem

Wyszukiwarka mieszkań 3D na stronie WordPress to makieta inwestycji osadzona nad cennikiem, która czyta lokale z tej samej bazy co tabela cen. Kupujący obraca budynek albo osiedle, widzi kolory statusów, klika lokal i trafia do jego wiersza w cenniku albo karty z ceną. Opisujemy, jak taka wyszukiwarka powinna działać i jak ją wdrożyć, żeby nie spowalniała strony.

Czego deweloperzy oczekują od wyszukiwarki 3D

Najlepiej widać to w zapytaniach ofertowych, które deweloperzy publikują sami. W jednym ze zleceń na Useme deweloper szukał wykonawcy „interaktywnego modelu 3D budynku (obracany + wybór mieszkań) do strony WordPress” i wymienił dokładnie to, czego oczekuje:

• obrót budynku i wybór mieszkania na bryle,
• kolor statusu – zielony dla dostępnych, inny dla niedostępnych,
• przejście do tabeli – kliknięcie w mieszkanie przewija do jego wiersza w tabeli mieszkań,
• płynne działanie na telefonie,
• brak abonamentów i wysokich kosztów utrzymania.

To dobra lista kontrolna. Brakuje na niej tylko jednej rzeczy, która decyduje o tym, czy wyszukiwarka będzie działać po pół roku sprzedaży: skąd bierze dane. (Jeśli dopiero wybierasz między makietą, interaktywnym rzutem piętra a mapą inwestycji na wizualizacji, zacznij od porównania rzut piętra, mapa inwestycji czy makieta 3D).

Najważniejsza decyzja: skąd makieta bierze ceny i statusy

Są dwie drogi. W pierwszej makieta ma własną listę lokali – w pliku, w osobnym panelu albo w systemie dostawcy. Każdą sprzedaż i każdą zmianę ceny trzeba wtedy wprowadzić dwa razy: w cenniku na stronie i w makiecie. W drugiej makieta nie ma własnej listy: przy każdym wyświetleniu strony czyta lokale z cennika.

W WordPressie z wtyczką DeweloperCeny wygląda to tak:

1. W panelu wtyczki prowadzisz lokale: ceny, statusy, metraże, dodatki. Każda zmiana ceny trafia do historii z datą.
2. Z tych samych danych powstaje cennik na stronie (tabela lub kafelki z historią cen) i codzienny raport dla dane.gov.pl.
3. Wtyczka udostępnia lokale w API, na przykład pod adresem /wp-json/deweloper-oferty/v1/inwestycje/{id}/lokale.
4. Makieta przy każdym wyświetleniu strony bierze z cennika status, cenę, cenę za m², metraż, liczbę pokoi i działkę, a przy obniżce także najniższą cenę z 30 dni przed obniżką.

Efekt: zmieniasz status w jednym miejscu, a cennik, makieta i raport pokazują to samo. Dlaczego ma to znaczenie także prawnie, opisujemy w artykule ceny na makiecie 3D a ustawa o jawności cen.

Obrót z renderów czy model 3D w przeglądarce

Obie wersje mają kartę lokalu, kolory statusów, przycisk „Tylko wolne” i mogą stać obok panelu z filtrami (status, pokoje, metraż, cena) i listą lokali. Różnią się wyglądem i tym, jak swobodnie można ruszać kamerą.

Szybkość strony, wyszukiwarki i dostępność

Makieta to najcięższy element strony inwestycji, więc musi być zrobiona tak, żeby nie psuła wyników w Google ani wrażenia z pierwszego wejścia:

• Start po załadowaniu strony. Do tego czasu kupujący widzi zwykły obraz osiedla, a ujęcia albo model doczytują się w tle, gdy przewinie do makiety.
• Najpierw szkic obrotu, potem szczegóły. W wersji FOTO najpierw pobiera się co kilka ujęć, żeby obrót działał po kilku sekundach, a resztę dociąga się w tle. Duże ujęcia tylko dla widoku, na którym kupujący się zatrzymał, i tylko na dużym ekranie.
• Licznik wczytywania. Kupujący widzi, że coś się ładuje, zamiast pustego okna.
• Lista lokali w HTML pod makietą. Wyszukiwarki, czytniki ekranu i przeglądarki bez grafiki 3D widzą lokale z cenami jak zwykły tekst.
• Gesty na telefonie. Obrót przesunięciem palca w bok, a przesunięcie w pionie przewija stronę jak zwykle. Karta lokalu wysuwa się od dołu ekranu.

Wdrożenie krok po kroku

1. Cennik we wtyczce

   Lokale i ceny prowadzisz we wtyczce DeweloperCeny. Jeśli masz cennik w Excelu, importujesz go z pliku CSV albo z tabeli wklejonej z arkusza.

2. Materiały i wycena

   Przesyłasz rzuty, elewacje, projekt zagospodarowania terenu albo wizualizacje. Wycenę i termin dostajesz w ciągu 24 godzin roboczych.

3. Akceptacja wyglądu

   W wersji FOTO akceptujesz kilka ujęć próbnych przed pełnym renderem, w wersji LITE podgląd modelu.

4. Dodatek i makieta w panelu

   Instalujesz dodatek DeweloperCeny 3D i wgrywasz paczkę makiety w panelu wtyczki. Pliki zostają na Twoim serwerze.

5. Kontrola numerów

   Panel pokazuje, czy numery lokali na makiecie zgadzają się z cennikiem, zanim makieta trafi na stronę.

6. Krótki kod nad cennikiem

   Wstawiasz makietę kodem, np. , nad cennikiem inwestycji. Parametr panel dodaje filtry i listę lokali obok makiety.

Ograniczenia, o których warto wiedzieć

• Wersja FOTO ma stałe ujęcia. Kupujący obraca osiedle po wyrenderowanych widokach, bez swobodnej kamery i bez wchodzenia do wnętrz.
• Wersja LITE jest stylizowana. Odwzorowuje bryły, materiały i otoczenie, ale nie udaje fotografii.
• Zmiana projektu to nowy model. Ceny i statusy zmieniają się same, ale nowy podział lokali, inna elewacja czy dodatkowy budynek wymagają poprawki makiety.
• Potrzebny jest WordPress z wtyczką DeweloperCeny. Dodatek czyta jej dane, więc bez niej nie działa.

Dla agencji i własnych frontów

Jeśli stronę dewelopera robi agencja, makieta jest zwykłym elementem strony: krótki kod, dane z API wtyczki i zdarzenia przy wyborze lokalu, które można podpiąć pod własne przyciski i analitykę. Opisujemy to na stronie dla agencji i software house’ów. Działającą wyszukiwarkę z cennikiem pod spodem zobaczysz w demo makiety 3D, a o samej automatyzacji cennika i raportu piszemy w porównaniu ręcznie, własny skrypt czy wtyczka.