Przejdź do treści

Jak dodać responsywną wyszukiwarkę z historią cen na stronie www?

Przygotowaliśmy proste rozwiązanie w postaci kodu iframe, które pozwala w łatwy i szybki sposób umieścić na stronie internetowej wyszukiwarkę mieszkań. Dane są pobierane bezpośrednio z voxCRM.

Wyszukiwarka jest w pełni responsywna – automatycznie dopasowuje się do komputerów, tabletów i smartfonów. Dodatkowo wyszukiwarkę możemy dostosować do indywidualnych potrzeb – istnieje możliwość konfiguracji kolorów, wyboru wyświetlanych kolumn oraz dodania filtrów.

Aby spełnić wymogi ustawy, dla każdego lokalu udostępniamy historię zmian ceny (z datami i wartościami). W tabeli wystarczy kliknąć konkretny lokal, aby przejść do szczegółów i podglądu historii.

 

Jak wdrożyć wyszukiwarkę w 2 prostych krokach

Krok 1. Uzyskaj od nas link źródłowy do tabeli

Otrzymasz adres z kluczem API dla swojej inwestycji, np.:

https://demo1.voxdeveloper.com/webservice/realestate-table-iframe/api_key/6fc62c19821cdd81e32c8064612d896229eada62/investment_id/21

Krok 2. Wstaw iframe na swojej stronie

Skopiuj poniższą strukturę do edytora treści (blok HTML) w miejscu, w którym ma się wyświetlać tabela.

Miejsca do uzupełniania:

<iframe id="realestate-table-iframe" src="TUTAJ_WKLEJ_SWÓJ_LINK_Z_KROKU_1" title="Realestate table iframe">
</iframe>
<style>
#realestate-table-iframe {
  width: 100%;
  height: 200px;
}
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let iframeRealestateList = document.querySelector('iframe#realestate-table-iframe');
        function resizeIframe(iframe) {
            window.addEventListener('message', function(event) {
                if (!event.origin.startsWith('https://TUTAJ_WKLEJ_NAZWĘ_PANELU.voxdeveloper.com')) {
                    return;
                }
                if (!event.data || !event.data.type || event.source !== iframe.contentWindow) {
                    return;
                }
                
                if (event.data.type === 'RESIZE_CALCULATOR') {
                    iframe.style.height = event.data.height + 'px';
                }
                if (event.data.type === 'SHOW_MODAL_REQUEST') {
                    const rect = iframeRealestateList.getBoundingClientRect();
                    const windowRect = {
                        width: window.innerWidth,
                        height: window.innerHeight,
                        scrollY: window.scrollY,
                    };
                    event.source.postMessage({
                        type: 'MODAL_VIEWPORT',
                        rect,
                        windowRect
                    }, event.origin);
                }
            });
        }
        if (iframeRealestateList) {
            resizeIframe(iframeRealestateList);
        }
    });
</script>

Poniżej wygląd przykładowej tabelki: