4 SOSNY. Strona domu wypoczynkowego w Karkonoszach

4 SOSNY to prywatny dom wypoczynkowy u podnóża Karkonoszy: 160 m kw., widok na Śnieżkę z panoramicznych okien, sauna, jacuzzi, rowery elektryczne. Dom jest podzielony na dwie równe połowy, więc można wynająć całość albo zamieszkać tylko w jednej części - wygodnie i dla większej grupy, i dla jednej rodziny.

Właściciele nie chcieli zależeć od portali rezerwacyjnych i ich prowizji. Potrzebna była własna strona, która prezentuje dom i okolicę, sama przyjmuje zgłoszenia, pilnuje limitów i dostępnych terminów rezerwacji oraz natychmiast powiadamia właścicieli o każdym nowym zapytaniu - tak, aby można było je od razu obsłużyć.

Zrealizowaliśmy ten projekt w 3 tygodnie: zaprojektowaliśmy design w Figmie, zbudowaliśmy autorski motyw WordPressa, napisaliśmy własny moduł rezerwacji z kalendarzem dostępności i podłączyliśmy powiadomienia w Telegramie, żeby właściciele zarządzali zgłoszeniami prosto z telefonu.

Design zaprojektowaliśmy w Figmie od zera. Paletę podpowiedział sam krajobraz - głęboka zieleń iglastego lasu i ciepły krem, jak światło w oknach domu wieczorem. Duża typografia, dużo powietrza i zdjęcia bez ramek: strona oddaje lekkość, podkreśla najlepsze strony obiektu i buduje nastrój jeszcze przed przyjazdem 🙂

Strona główna składa się z najważniejszych sekcji i odpowiada praktycznie na wszystkie pytania, jakie może mieć gość. Są tu ceny, okolica z odległościami do szlaków i wyciągów, galeria, blog z poradami gospodarzy, FAQ i mapa dojazdu. Każda sekcja to osobny konfigurowalny blok w panelu administracyjnym: treść można przebudowywać bez udziału programisty.

Wszystko, co widać na stronie, to nasza praca od początku do końca. Sami przyjechaliśmy na miejsce i sfotografowaliśmy dom: wnętrza, saunę i strefę wellness, sypialnie, widok na Śnieżkę oraz ujęcia z drona. Żadnych stocków i cudzych zdjęć - tylko prawdziwy dom w dobrym świetle.

Osobny powód do dumy to wirtualny spacer 360°. Zrobiliśmy sześć panoram kluczowych pomieszczeń i złożyliśmy z nich interaktywny przegląd: gość obraca widok w dowolną stronę, jakby stał na środku pokoju, i przechodzi między pomieszczeniami z listy. Panoramy obracają się bezpośrednio w przeglądarce i tak samo działają na telefonie. Taki spacer zdejmuje połowę pytań jeszcze przed rezerwacją - gość widzi dom na własne oczy i przyjeżdża już „jak do siebie”.

Jedną panoramę ze spaceru osadziliśmy właśnie tutaj - rozejrzyj się sam.

Dom jest podzielony na dwie równe połowy, więc można go wynajmować na różne sposoby: apartament dla maksymalnie 4 gości albo cały dom - do 8 osób, cztery sypialnie, dwie kuchnie i dwie łazienki. Ten wybór widać od razu: na stronie głównej dwie karty z ceną i opisem, a w formularzu rezerwacji przełącznik formatu, który zmienia i dostępne terminy, i końcową cenę.

Gotowe wtyczki rezerwacyjne dla WordPressa to subskrypcje, zbędne ekrany i cudza logika. Jeden dom z dwiema połowami potrzebował prostej i uczciwej mechaniki, więc moduł napisaliśmy sami.

• Zgłoszenia są przechowywane w panelu administracyjnym jako osobny byt - ze statusami „Nowe”, „W obsłudze”, „Potwierdzone”, „Anulowane”, licznikiem nowych zgłoszeń w menu i filtrami po imieniu, e-mailu, telefonie i datach przyjazdu.
• Zgłoszenie jest zapisywane od razu przez hook, który przechwytuje formularz po walidacji, ale przed wysyłką poczty, i tworzy wpis w bazie - nawet jeśli serwer pocztowy zawiedzie, zapytanie nie zginie.
• Rezerwacja całego domu blokuje obie połowy, a rezerwacja połowy oznacza dzień jako częściowo zajęty. Kalendarz na stronie pobiera obłożenie przez AJAX i pokazuje tylko potwierdzone rezerwacje.
• System pilnuje liczby gości i dopasowuje do niej rezerwację. W połowie domu można zakwaterować do 2 dorosłych i 2 dzieci; jeśli w zgłoszeniu jest na przykład 3 dorosłych i 2 dzieci, automatycznie zamienia się ono w wynajem całego domu - cena przelicza się w locie, a gość od razu widzi to na stronie.

Właściciele domu częściej są na miejscu, przy gościach, niż przy laptopie. Dlatego każde nowe zgłoszenie natychmiast trafia do ich grupy w Telegramie - schludną wiadomością po polsku ze wszystkimi szczegółami: daty, format, skład gości, kontakty i kwota.

Tuż pod wiadomością są trzy przyciski: „Potwierdź”, „Do obsługi”, „Anuluj”. Kliknięcie trafia do chronionego sekretem webhooka REST strony, status zgłoszenia zmienia się w WordPressie, kalendarz się przelicza, a gość - opcjonalnie - dostaje e-mail o zmianie statusu. Tak rezerwacja zostaje potwierdzona kilkoma dotknięciami z telefonu, a strona od razu przestaje sprzedawać te daty.

Token bota i ID czatu ustawia się na stronie modułu, sekret webhooka generuje się automatycznie. Tym samym przełącznikiem można też przekazywać do grupy szybkie pytania z formularza kontaktowego.

W ustawieniach znalazło się wszystko, co trzeba zmieniać na bieżąco: tryb wynajmu (całość albo połówki), ceny za noc dla każdego formatu, tekst regulaminu pobytu obok formularza i kolory kalendarza. Dostępność i obłożenie są oznaczone w kalendarzu równie czytelnie jak na samej stronie.

• Strony oznaczone zgodnie ze standardami schema.org - LodgingBusiness ze wszystkimi atrybutami obiektu oraz FAQPage, aby walczyć o rozszerzone wyniki w Google.
• Ścisła hierarchia nagłówków i sensowne teksty alt przy wszystkich obrazach - semantyka jest czysta i zrozumiała dla wyszukiwarek.
• Usunęliśmy linki prowadzące same do siebie i sprawdziliśmy całą strukturę według naszej wewnętrznej checklisty SEO.
• Spełniliśmy wymagania RODO: baner cookie z uczciwym wyborem, a mapa Google ładuje się dopiero po zgodzie - wcześniej żadne zewnętrzne zapytania nie wychodzą.
• Szybkość dopracowaliśmy według zaleceń PageSpeed Insights, aż wyniki weszły do zielonej strefy: obrazy są konwertowane do WebP przy przesyłaniu, działa lazy load, zbędny kod został usunięty.

Strona działa na zwykłym hostingu współdzielonym - dla klienta to tanio i bez administrowania. Ale proces developmentu zbudowaliśmy jak na „dorosłej” infrastrukturze: lokalne środowisko w Dockerze odwzorowuje produkcję jeden do jednego, a każdy push do main uruchamia GitHub Actions z przyrostowym deployem rsync po SSH - na serwer jadą tylko zmienione pliki motywu, zweryfikowane sumami kontrolnymi. Przesłanych zdjęć i rdzenia WordPressa deploy w ogóle nie dotyka.

Każda zmiana pojawia się na produkcyjnej stronie automatycznie, mniej więcej w minutę. Przez pierwsze dziesięć dni życia strony wypuściliśmy pół setki aktualizacji - w tym baner RODO i powiadomienia Telegrama - bez ani jednej przerwy w działaniu.