Strona Internetowa Nieruchomości Kamienica Siemensa
Zakodowanie strony internetowej dla dewelopera nieruchomości „Kamienica Siemensa”
Podgląd na żywoKlient
Rednet
Branża
Nieruchomości
Czas trwania
2 miesiące
Lokalizacja
Polska
Autor projektu
Cele
Implementacja projektu
Przekształcenie projektu graficznego klienta w funkcjonalną stronę internetową, z zachowaniem koncepcji wizualnej oraz pełnej responsywności.
Zaawansowane filtrowanie i wyszukiwanie
Opracowanie funkcji wyszukiwania wizualnego z wykorzystaniem SVG oraz klasycznego, opartego na tabeli dla apartamentów i powierzchni komercyjnych, aby umożliwić filtrowanie w czasie rzeczywistym bez konieczności przeładowania strony.
Integracja CMS
Stworzenie panelu administracyjnego przy użyciu WordPressa i ACF, dającego klientowi pełną kontrolę nad edytowaniem tekstów, obrazów oraz zarządzaniem szczegółami apartamentów.
Dostosowanie i personalizacja formularzy kontaktowych
Wdrożenie automatycznego wypełniania formularza kontaktowego dla każdego apartamentu, aby przyspieszyć i spersonalizować komunikację między potencjalnymi nabywcami, a biurem nieruchomości.
Złożony układ z zaawansowanymi elementami
Opracowanie strony internetowej z niestandardowym, złożonym układem, który zawiera unikalnie zaprojektowane sekcje. Projekt obejmuje wdrożenie zaawansowanych sliderów prezentujących wyróżnione apartamenty oraz rozbudowanego systemu galerii, który zapewnia szczegółową wizualizację nieruchomości.
Przegląd implementacji
Projekt rozpoczął się od zakodowania designu klienta przy użyciu HTML, SCSS, JavaScript i PHP. Strona została w pełni zintegrowana z WordPressem oraz Advanced Custom Fields (ACF), co umożliwia klientowi łatwe zarządzanie treścią, obrazami oraz informacjami o apartamentach.
Wyszukiwanie wizualne zostało oparte o SVG i JavaScript. Użytkownicy mogą wybierać piętra budynku, przeglądać plany pięter, a po kliknięciu na apartament zobaczyć jego szczegółowy układ wraz z formularzem kontaktowym. Dodatkowo, plan piętra przesuwa się w zależności od ruchu myszy, co pozwala użytkownikom na odkrywanie różnych części piętra przez samo poruszanie myszą. Wszystkie szczegóły apartamentów, takie jak status dostępności, mogą być edytowane bezpośrednio w panelu CMS.
Wyszukiwanie tabelaryczne wykorzystuje AJAX, umożliwiając filtrowanie według parametrów, takich jak liczba pokoi, piętro, wielkość i dostępność. Wyniki są wyświetlane dynamicznie, bez przeładowania strony. Kliknięcie na dowolny wiersz tabeli rozwija szczegóły, wyświetlając wypełniony formularz kontaktowy z informacjami o apartamencie.
Obie metody wyszukiwania zostały zoptymalizowane pod kątem wydajności i responsywności. Strona została przetestowana na różnych przeglądarkach, aby zapewnić pełną kompatybilność.
Zastosowane technologie
HTML
CSS
SASS/SCSS
Javascript
PHP
WordPress
Webpack
GIT
Podsumowanie
Projekt dostarczył w pełni interaktywną stronę internetową, łącząc nowoczesny design z zaawansowanymi funkcjami przeglądania apartamentów. Dzięki integracji z ACF klient ma pełną kontrolę nad treścią i danymi o apartamentach. Strona jest szybka i responsywna, gwarantując pozytywne doświadczenie użytkownika dzięki m.in. dynamicznemu filtrowaniu.
