Z początkiem sierpnia zapowiadałem, że w ramach współpracy z Template Monster powstanie obszerny wpis na temat możliwości wdrożenia systemu rezerwacji pobytu i płatności online na WordPressie. Dzisiaj śmiało mogę powiedzieć, projekt został wdrożony, działa stabilnie, a poniższy wpis jest tego potwierdzeniem. Zapraszam do lektury drugiego artykułu w kategorii Premium wp-lab.pl!
Chata pod Lasem w Porębie – słowem wstępu…
W połowie czerwca na skrzynce firmowej Net-Factory pojawiło się zapytanie od pani Agnieszki, która zapytała czy jesteśmy w stanie stworzyć stronę internetową dla małego pensjonatu z możliwością składania rezerwacji oraz płacenia online. Standardowo odesłaliśmy listę pytań, dzięki którym jesteśmy w stanie „plus-minus” określić jakiekolwiek ramy cenowe projektu. Wymieniając kilka wiadomości uzgodniliśmy większość szczegółów, zakres przyszłych prac, usługi dodatkowe i… zabraliśmy się do pracy.
Punktem wyjściowym jakichkolwiek działań było ustalenie nazwy obiektu oraz zaprojektowanie logo. Propozycji było wiele: „Uroczysko„, „Leśna Chata„, „Leśne Ustronie” itd. z racji, że obiekt jest otoczony gęstym lasem zaproponowaliśmy dwie nazwy: „Chata pod lasem” oraz „Wiejska Chata„. Po kilkudziesięciu minutach otrzymaliśmy wiadomość: „zostaje Chata pod Lasem proszę działać dalej„.
A więc czas na logo. Przy współpracy z niezastąpionym w tej materii Piotrem Hameluszem (Nexart) z Lubina, po wymianie korespondencji i ustaleniu wszystkich szczegółów i szczególików logo Chaty pod Lasem już w pierwszej koncepcji zostało zaakceptowane. Co przedstawia? Delikatny szkic budynku, charakterystyczny font z zawijasami „Chata Pod Lasem”, tagline „Agroturystyka”, całość dopełnia elipsa, a wszystko zostało ubrane w mocny chabrowy kolor, dlaczego? Myślę, że czytając ten wpis i oglądając poniżej zdjęcia sami znajdziecie odpowiedź na to pytanie.
Po zaakceptowaniu logo rozpoczęliśmy prace nad stroną główną. W międzyczasie na skrzynkę wp-lab.pl napisał Janusz Kamiński z Template Monster z propozycją współpracy w ramach, której przetestuję i zrecenzuję, któryś z motywów dostępnych w markecie TM lub wtyczkę Elementor Pro. Z racji, że „page-builderów” unikam jak ognia, a motywy dla klientów pod WordPressa od kilku lat tworzymy na własnym autorskim motywie zaproponowałem, że przetestujemy wtyczkę Moto Press Hotel Booking w jednym z rozpoczętych projektów w Net-Factory. Po ustaleniu szczegółów, dogłębnym przejrzeniu pełnej funkcjonalności wtyczki w udostępnionym demo przez zespół Moto Press rozpoczęliśmy współpracę.
Projektujemy i kodujemy dla Chaty pod Lasem
Równoległe do prowadzonych prac projektowych Paweł Grab (pgrab.pl) wykonał sesję zdjęciową Chaty pod Lasem. Po jednej wizycie w Porębie właścicielka obiektu otrzymała paczkę plików ze zdjęciami budynku z zewnątrz, ogrodu, wewnątrz (pokoje, salon), a także zdjęcia z przelotu drona nad budynkiem.
Poniżej znajduje się kilka przykładowych zdjęć obiektu – już wiesz dlaczego mocny chabrowy? Więcej zdjęć do zobaczenia na stronie Chaty pod Lasem – tutaj.
Stronę główną podzieliliśmy na kilka tematycznych sekcji. Patrząc od góry na chatapodlasem.com.pl mamy
- „przypięty” nagłówek, a w nim nawigacja, logo oraz kilka hiperłącz (dojazd, telefon, link fanpage na Facebooku oraz IG).
- rotator wpisów, który w zależności od rozdzielczości ekranu pokazuje 1 / 2 / 3 lub 4 boxy.
- sekcja informacyjna z krótką „zajawką” czym jest właściwie Chata pod Lasem (dla kogoś kto przebywa na stronie po raz pierwszy)
- duża sekcja „parallax” z możliwością przejścia do rezerwacji pobytu
- sekcja atrakcje i 4 boxy z najbardziej popularnymi atrakcjami w okolicy.
- galeria zdjęć, w której pokrótce zobaczysz ogród, budynek, salon, taras, pokoje, atrakcje oraz okoliczne widoki.
- stopka z linkami do „podstron regulaminowych” oraz pełne dane kontaktowe.
Całość została opracowana na bazie naszego firmowego „startowego” motywu przy użyciu Advanced Custom Fields w wersji PRO. Każda sekcja na stronie głównej odwołuje się do podstrony na której znajduje się rozwinięcie treści (O nas, Atrakcje, Galeria, Kontakt itd.). Około 95% elementów na stronie można dowolnie edytować pod kątem treści z poziomu kokpitu WP. Witryna jest responsywna i poprawnie dostosowuje się do urządzeń mobilnych.
Podsumowując pierwszy etap: mamy brand (nazwa, logo, kolory, wizje), profesjonalną sesje zdjęciową obiektu oraz działającą stronę internetową chatapodlasem.com.pl. Pierwsza część prac za nami. Czas zabrać się za moduł rezerwowania pobytu.
Rezerwacja online na WordPressie – omówienie
Słowem wstępu wyjaśnię jak wygląda przykładowa ścieżka dokonania rezerwacji pobytu w Chacie pod Lasem, a następnie pokaże jak to poprawnie skonfigurować i wszystko spiąć ze sobą.
- Potencjalny klient przegląda stronę chatapodlasem.com.pl, decyduje się zarezerwować pobyt, wybiera podstronę Rezerwacja, wybiera 1 z 3 aktualnie dostępnych obiektów, sprawdza swój termin pobytu > jeśli jest wolny, przechodzi do podstrony potwierdzania rezerwacji.
- Następnie potwierdza rezerwację poprzez podanie danych dot. rezerwacji (ilość osób, dane kontaktowe, ewentualnie: wybiera dodatkowe usługi i wprowadza kupon rabatowy) – po zatwierdzeniu tworzy się nowa rezerwacja i płatność.
- Klient zostaje przeniesiony do podstrony Zamówienie, gdzie wybiera metodę płatności i ostatecznie płaci za złożone zamówienie – tworzy się zamówienie.
Podsumowując: klient składając zamówienie wywołuje w systemie nową rezerwację, płatność i zamówienie o unikalnych ID. Każde zdarzenie wywołuję odpowiednią wysyłkę maili (do klienta / obsługi strony).
Konfiguracja modułu rezerwacji pobytu na WordPressie
Aby całość mogła poprawnie działać potrzebujemy kilku elementów:
- środowisko WP – domena z wersją PHP 7.3, baza MySQL oraz WordPress w najnowszej wersji 5.2.2,
- wtyczkę Moto Press Hotel Booking, za pomocą której dodamy obiekty, ustalimy ceny, dodatkowe usługi, a także będziemy mogli przyjmować rezerwacje i prowadzić recepcję obiektu (rezerwacje, kalendarz, dane klientów)
- wtyczkę WooCommerce oraz wtyczkę do obsługi szybkich płatności PayU
- oraz wtyczkę integrującą MPHB z płatnościami WooCommerce
Dlaczego tak? Standardowo MPHB oferuje integrację z wieloma bramkami płatności (Braintree, Stripe, Beanstream/Bambora, PayPall), ale nie wspiera żadnego polskiego operatora, dlatego też musieliśmy zainstalować WooCommerce, podpiąć do niego Płatności PayU, a potem za pomocą wtyczki integrującej połączyć Moto Press Hotel Booking z płatnościami w WooCommerce.
W międzyczasie prac nad modułem rezerwacji pobytu kancelaria prawna Legato opracowała dla klientki pełną dokumentację prawną pod kątem RODO. Dzięki temu późniejsza aktywacja płatności online PayU po wdrożeniu strony przebiegła szybko i sprawnie.
Ok, do dzieła! Instalujemy Moto Press Hotel Booking i przechodzimy do konfiguracji.
Po kilkunastu godzinach pracy z pluginem Moto Press Hotel Booking zamieszczam poniżej wypunktowaną listę rzeczy, którymi warto zająć się właśnie w takiej kolejności jak poniżej:
1. Konfiguracja ogólnych ustawień MPHB
Krok po kroku, zakładka po zakładce personalizujemy wtyczkę wedle własnych potrzeb. Na pewno konieczne jest wybranie jednostki powierzchni, określenie waluty, dodanie typów dostępnych łóżek w pokojach, skonfigurowanie sposobu potwierdzenia rezerwacji (potwierdzenie po opłaceniu, potwierdzenie za pośrednictwem poczty przez klienta, ręczne potwierdzenie administratora), podanie końcowych podstron dla poszczególnych akcji (rezerwacja anulowana, odwołana, potwierdzona itd.). Ponadto należy dostosować treść maili jakie będą otrzymywać klienci oraz administrator, a także ustawienie sposobu płatności.
Poniżej galeria niektórych, ważniejszych ustawień pluginu MPHB:
2. Konfiguracja obiektu, udogodnień, cen, sezonów itd.
Po pierwsze konfigurujemy sezony, tzn. określamy jakie ceny mają obowiązywać w różnych okresach czasu. W przypadku Chaty pod Lasem są tylko dwa sezony: Tydzień (Niedziela, Poniedziałek, Wtorek, Środa, Czwartek) oraz Weekend (Piątek i Sobota).
Następnie dodajemy dodatkowe usługi, dla których możemy ustawić cenę, określić czy jest to opłata jednorazowa czy cykliczna, a także czy ma dotyczyć „obiektu” czy każdej osoby przebywającej w obiekcie.
Potem uzupełniamy wszystkie udogodnienia w obiekcie.
Czas na dodawanie pokoi. Uzupełniamy nazwę, kategorię, mamy możliwość dodania tagów, wybrania udogodnień, typu łóżka, dodatkowych usług. Ponadto dodajemy galerię i obrazek wyróżniający się, podajemy również maksymalną ilość osób dorosłych i dzieci.
Kolejno wprowadzamy cennik pobytu, który w naszym przypadku będzie się zmieniał w zależności od aktualnego sezonu (Tydzień / Weekend) i ilości osób. Cena jednostkowa to cena za 1 dobę hotelową. Wtyczka oferuje mnóstwo kombinacji i przykładowo u nas cena za pobyt zmienia się wraz ze wzrostem liczby gości i liczby zarezerwowanych dni.
3. Mamy pokoje, sezony, ceny dla poszczególnych sezonów, udogodnienia, dodatkowe usługi i skonfigurowaną wtyczkę do rezerwacji pobytu. Czas na kolejny etap: instalujemy WooCommerce oraz integrujemy płatności PayU.
Jak zainstalować WooCommerce objaśniałem dosyć dawno temu tutaj – zapraszam do wpisu.
Po zainstalowaniu WooCommerce przystępujemy do konfiguracji WC, która nie powinna zająć zbyt wiele czasu, ponieważ całość rozbija się wyłącznie o: uzupełnienie danych kontaktowych, dodanie nowej bramki płatniczej (płatności PayU) oraz skonfigurowanie e-maili wysyłanych za pośrednictwem WC.
Bardzo ważne: musimy dodać jeszcze jeden produkt – bez opisu, zdjęć, wariantów, atrybutów, przykładowo: „Rezerwacja pobytu” z ceną 1 zł.
Poniżej galeria niektórych, ważniejszych ustawień WooCommerce:
4. Czas na połączenie Moto Press Hotel Booking i WooCommerce z płatnościami PayU
Istnieje mnóstwo wtyczek za pomocą, których stworzymy system rezerwacji pobytu na stronie, jednak bardzo mało oferuje możliwość podpięcia własnych metod płatności. Wybraliśmy MPHB, ponieważ za pomocą dodatkowego pluginu WooCommerce Payments for Hotel Booking możemy zintegrować się z płatnościami WooCommerce, a to daje nam już szeroki wachlarz możliwości. Dzięki temu klient składając zamówienie na pobyt w Chacie pod Lasem bez problemu może zapłacić online (za pomocą PayU).
Personalizacja i własne szablony stron
Standardowy widok pokoi, udogodnień, podstron „systemowych” MPHB pozostawia wiele do życzenia i niestety oprócz konfiguracji po stronie kokpitu pozostaje nam jeszcze mnóstwo pracy we froncie.
Całkowicie wyłączyliśmy możliwość wyszukiwania pokoi, a podstrony wyszukiwarki pokoi, wyników wyszukiwania przekierowaliśmy za pomocą przekierowania 301 na podstronę „Rezerwacja„. Domyślne strony pokoi, udogodnień zostały zastąpione nowymi stronami z własnymi szablonami. Wszystkie domyślne podstrony mają przekierowanie 301 na nowo utworzone podstrony.
Cała „ścieżka rezerwacyjna” rozpoczyna się na podstronie „Rezerwacja”, która posiada własny szablon strony przygotowany przy pomocy ACF PRO.
Następnie (po wyborze pokoju) przechodzimy do karty pokoju, która została przygotowana za pomocą shortcode (wbudowane we wtyczce MPHB) oraz ACF PRO. Na kartę pokoju składa się kilka elementów: nazwa pokoju, galeria zdjęć, opis, cena, informacje (maksymalna ilość gości, udogodnienia, rozmiar, typ łóżka), kalendarz oraz formularz rezerwacyjny.
Pojedynczy pokój wygląda następująco:
Po wyborze terminu przechodzimy do podstrony potwierdzania rezerwacji, gdzie podajemy dane osobowe, ilość gości, wybieramy dodatkowe usługi, następnie widzimy tabelkę podsumowującą wszystkie naliczone opłaty i mamy możliwość przejścia do zamówienia i zapłaty za pobyt.
Potwierdzamy wprowadzone wcześniej dane, wybieramy metodę płatności i klikamy „Kupuję i płacę”. Jeśli wybraliśmy PayU przechodzimy na stronę banku i wykonujemy transakcję online, jeśli wybraliśmy przelew bankowy musimy wykonać ręcznie przelew.
Tak jak pisałem cała procedura tworzy w systemie nową rezerwację, płatność i zamówienie o unikalnych numerach ID. Po zalogowaniu do kokpitu mamy możliwość zarządzania rezerwacjami, płatnościami, kalendarzem oraz użytkownikami. Zresztą zobaczcie kilka poniższych zrzutów ekranu.
Każda akcja, zmiana statusu (rezerwacji, płatności, zamówienia) wywołuje odpowiednią wysyłkę maili. Zobaczcie poniższe zrzuty ekranu:
Podsumowanie
Dla obiektu o takim charakterze (3 pokoje pod wynajem, docelowo pojawi się kilka kolejnych pokoi) dobraliśmy łącznie 4 wtyczki za pomocą, których skonfigurowaliśmy cały system rezerwacji pobytu i płatności online. I powiem zdecydowanie, że w kolejnym podobnym projekcie również skorzystamy z tego rozwiązania!
Cały projekt pt. „Chata pod Lasem” dla pani Agnieszki to kilkanaście tygodni wytężonej pracy, ale było warto. Efekt końcowy jest naprawdę bardzo dobry!
System rezerwacji pobytu i płatności online znajduje się na stronie www.chatapodlasem.com.pl – gdzie serdecznie zapraszam, również do tych „realnych” odwiedzin w Porębie, nieopodal Myślenic w Beskidzie Wyspowym na południu Polski. Jeśli chcesz odpocząć w malowniczym krajobrazie, w leśnej chacie z domową kuchnią, poleżeć w hamaku, zrelaksować się w jacuzzi to wybierz się obowiązkowo. Chatę pod Lasem można obserwować na Facebooku – link tutaj, Instagramie – link tutaj.
PS. do czytelników, obserwujących wp-lab.pl
Jeśli masz jakieś pytania, wątpliwości dotyczące wpisu, funkcjonalności czy użytych pluginów w tym projekcie to po prostu jak zwykle odezwij się do mnie na hello@wp-lab.pl.
