Shortcody i widżety

Jak umieścić JetBookIn na swojej stronie: każdy shortcode i widżet Elementora ze wszystkimi opcjami, na której stronie powinien się znaleźć, jak dopasować kolory do Twojej marki, jak działają strony wielojęzyczne oraz – dla programistów – REST API, hooki i polecenia WP-CLI.

Potrzebne strony

Typowa strona z JetBookIn ma poniższe podstrony. Każdy blok można umieścić za pomocą shortcode’u (w dowolnym motywie lub edytorze) albo odpowiadającego mu widżetu Elementora.

Przy małej willi z trzema apartamentami wystarczy czasem tak prosty zestaw: strona główna z sekcją wyszukiwania (hero) i siatką pokoi, po jednej stronie na każdy apartament (tworzonej automatycznie) oraz strona potwierdzenia. Hotel z 20 pokojami zwykle dodaje stronę Rezerwuj z wynikami, do której prowadzi wyszukiwarka z każdej podstrony.

Strona potwierdzenia rezerwacji i strona finalizacji

Dwa ustawienia w JetBookIn → Ustawienia → Ogólne wskazują JetBookIn, dokąd kierować gości:

W zależności od tego, jak zostanie otwarta, strona potwierdzenia pokazuje: finalizację pobytu wybranego w polu rezerwacji; rezerwację gościa (z linku z numerem rezerwacji i kluczem); albo formularz Znajdź rezerwację. Nigdy nie potrzebujesz więcej niż jednej takiej strony na język. Co goście mogą tam zrobić, opisuje rozdział Strona rezerwacji gościa.

Aby poznać ID strony, otwórz ją w menu Strony; liczba po post= w pasku adresu to ID.

Motywy mogą dopasować otoczenie rezerwacji dzięki dwóm klasom elementu body: jbi-is-checkout, gdy gość jeszcze rezerwuje, oraz jbi-is-booking, gdy jest już rezerwacja do pokazania – na przykład aby ukryć nagłówek „Dziękujemy” podczas finalizacji.

Shortcody rezerwacji

Te bloki są interaktywne: na bieżąco wczytują dostępność i ceny i wymagają JavaScriptu (odwiedzający bez niego zobaczą komunikat Aby zarezerwować online, prosimy włączyć JavaScript.). W atrybutach yes/no każda wartość inna niż no oznacza „tak”.

[jetbookin_search] – formularz wyszukiwania

Daty i liczba gości, a potem przycisk wyszukiwania. Bez strony wyników wyniki pojawiają się pod formularzem.

[jetbookin_search results_url="/book/" button="Check availability"]

[jetbookin_results] – wyniki wyszukiwania i finalizacja

Wyświetla typy pokoi wolne w wybranych datach wraz z planami cenowymi, pozwala gościowi wybrać jeden lub kilka pokoi i prowadzi przez finalizację rezerwacji. Jeśli nic nie jest wolne, proponuje inne daty.

[jetbookin_booking] – pole rezerwacji pokoju

Kalendarz, goście, plany cenowe i cena dla jednego typu pokoju. Przycisk Zarezerwuj prowadzi na stronę finalizacji z już wypełnionymi danymi pobytu.

[jetbookin_booking room="42" months="2"]

[jetbookin_calendar] – kalendarz dostępności

[jetbookin_confirmation] – potwierdzenie rezerwacji / zarządzanie rezerwacją

Bez atrybutów. [jetbookin_manage] działa dokładnie tak samo. Umieść go tylko na jednej stronie (dla każdego języka) i ustaw tę stronę jako ID strony potwierdzenia rezerwacji.

[jetbookin_search_hero] – sekcja hero na całą szerokość z wyszukiwarką

[jetbookin_search_hero image="https://example.com/wp-content/uploads/pool.jpg" heading="Three stone houses above Elounda" subheading="Book direct for the best price" results_url="/book/"]

Shortcody pokoi i obiektu

Te bloki są generowane na serwerze (to dobre dla szybkości i wyszukiwarek). Gdy atrybut przyjmuje typ pokoju, a go pominiesz, użyty zostanie typ pokoju, którego strona jest wyświetlana; atrybuty obiektu domyślnie przyjmują bieżący obiekt, obiekt bieżącego pokoju albo Twój pierwszy obiekt.

Gdy blok nie ma nic do pokazania (brak zdjęć, brak udogodnień…), goście nic nie widzą; zalogowany personel i edytor Elementora widzą podpowiedź, co trzeba uzupełnić.

[jetbookin_rooms] – siatka lub karuzela pokoi

[jetbookin_rooms layout="carousel" columns="3" orderby="price" amenities="0"]

[jetbookin_room_gallery]

[jetbookin_room_amenities]

[jetbookin_room_specs]

[jetbookin_room_price]

Najniższa cena za noc z Twoich planów cenowych, np. od 95 € / noc.

[jetbookin_room_policies]

[jetbookin_property_info]

Shortcody opinii Pro

Oba wymagają modułu Opinie gości; gdy jest wyłączony, nic nie wyświetlają.

[jetbookin_reviews] – opublikowane opinie

Średnia ocena z opisem (np. Doskonały), karty opinii z Twoimi odpowiedziami, przycisk Pokaż więcej opinii oraz dane ocen schema.org dla wyszukiwarek.

[jetbookin_reviews limit="3" bars="yes" empty="Be the first to review your stay."]

[jetbookin_review] – formularz opinii

Bez atrybutów. Potrzebny tylko wtedy, gdy chcesz, aby goście wystawiali opinie na osobnej stronie: umieść go na niej i wpisz ID tej strony jako ID strony opinii w Rezerwacje → Opinie. W przeciwnym razie goście wystawiają opinie na stronie potwierdzenia rezerwacji. Formularz otwiera się z podpisanego linku w e-mailu z prośbą o opinię.

Strony sprzątania i właściciela Pro

• [jetbookin_housekeeping] (moduł Sprzątanie): codzienna lista sprzątania na telefonie, dla zalogowanych użytkowników z rolą Pracownik sprzątający oraz menedżerów rezerwacji. Pozostali zobaczą prośbę o zalogowanie lub informację o braku dostępu. Personel sprzątający trafia na tę stronę po zalogowaniu.
• [jetbookin_owner] (moduł Właściciele i rozliczenia): miesięczne rozliczenia i kalendarz obłożenia właściciela, dla zalogowanych użytkowników z rolą Właściciel obiektu powiązanych z obiektem. Właściciele trafiają tu po zalogowaniu zamiast do wp-admin.

Żaden z nich nie ma atrybutów. Obie strony są automatycznie wyłączane z pamięci podręcznej. Utwórz każdą jako zwykłą, opublikowaną stronę WordPressa.

Strony pokoi bez kreatora stron

Każdy typ pokoju ma na Twojej stronie własną podstronę. Jeśli nie jest zbudowana w Elementorze, JetBookIn sam zamienia ją w kompletną stronę pokoju: galeria zdjęć (mozaika od pięciu zdjęć), goście / łóżka / powierzchnia, cena „od”, Twój opis, udogodnienia, zasady i pole rezerwacji – obok szczegółów na szerokich ekranach, pod nimi na telefonach.

Jeśli treść pokoju zawiera już shortcode [jetbookin_room_…], na końcu dodawane jest tylko pole rezerwacji; jeśli zawiera [jetbookin_booking], nic nie jest dodawane. W Elementorze zaprojektuj w Theme Builderze jeden szablon pojedynczego typu pokoju i użyj widżetów pokoju z opcją — Bieżący typ pokoju —.

Widżety Elementora

W edytorze Elementora wyszukaj JetBookIn lub otwórz kategorię JetBookIn w panelu widżetów. Każdy widżet generuje dokładnie ten sam blok co odpowiadający mu shortcode.

Ustawienia treści

Kolumny są responsywne: domyślnie 3 na komputerze, 2 na tablecie i 1 na telefonie, a każde urządzenie możesz ustawić osobno.

Ustawienia stylu

Każdy widżet JetBookIn ma w zakładce Styl sekcję Kolory i kształt:

• Główny (przyciski, zaznaczenie), Tekst przycisku, Tło, Tekst, Obramowania – kolory;
• Zaokrąglenie narożników – od 0 do 24 px;
• Typografia – krój pisma, rozmiar, grubość itd. dla całego widżetu.

Niektóre widżety mają więcej opcji:

• Siatka / karuzela pokoi: Karta (Tło, Cień, Wypełnienie), Tytuł pokoju i Cena (typografia i kolor).
• Udogodnienia pokoju: Ikony (Kolor, Rozmiar).
• Cena pokoju od: Cena (typografia i kolor).
• Sekcja wyszukiwania (hero): Nagłówek i Podtytuł (typografia i kolor).
• Opinie: Tytuł opinii i Treść opinii (typografia i kolor).

Wskazówka: ustaw ten sam kolor Główny we wszystkich widżetach rezerwacji na stronie. Przycisk Dokończ rezerwację, który pojawia się przy nieopłaconych rezerwacjach, przejmuje kolory, zaokrąglenia i czcionkę od widżetu rezerwacji na danej stronie.

Kolory i wygląd

Wszystkie bloki JetBookIn pobierają kolory i kształty ze zmiennych CSS ustawionych na elemencie .jbi-widget. Ustawienia stylu w Elementorze ustawiają właśnie te zmienne. Bez Elementora ustaw je w Wygląd → Dostosuj → Dodatkowy CSS albo w arkuszu stylów motywu.

Zmienne są zdefiniowane bezpośrednio na .jbi-widget, więc ustawiaj je selektorem co najmniej tak samo silnym, na przykład:

/* Morskie przyciski i kwadratowe narożniki, wszędzie */
body .jbi-widget {
	--jbi-primary: #0e5e6f;
	--jbi-on-primary: #ffffff;
	--jbi-radius: 4px;
}

/* Ciemne pole rezerwacji tylko w jednej sekcji */
.booking-dark .jbi-widget {
	--jbi-surface: #1f1d1a;
	--jbi-surface-2: #2a2723;
	--jbi-text: #f4f1ea;
	--jbi-muted: #b9b4aa;
	--jbi-border: #3a3631;
}

Ustawienie zmiennych tylko na body lub :root nic nie da, bo .jbi-widget ustawia własne wartości domyślne.

Strony wielojęzyczne (Polylang, WPML)

JetBookIn współpracuje z Polylang i WPML. Tłumaczenia typu pokoju lub obiektu to ten sam pokój: mają wspólną dostępność, ceny, rezerwacje, galerię i zdjęcie główne. Goście widzą wszystko w języku strony, na której rezerwują, i w tym języku otrzymują e-maile oraz stronę rezerwacji.

Co przetłumaczyć

• Typy pokoi i obiekty: przetłumacz je za pomocą wtyczki wielojęzycznej (tytuł, opis, zajawka). W tłumaczeniu obiektu wpisujesz też instrukcje zameldowania w danym języku.
• Stronę potwierdzenia rezerwacji oraz, jeśli z niej korzystasz, stronę rezerwacji / finalizacji: utwórz tłumaczenie każdej z nich z tym samym shortcode’em lub widżetem. W Ustawieniach podajesz tylko ID oryginału; JetBookIn kieruje gości do tłumaczenia w ich języku.
• Strony regulaminu i polityki prywatności oraz stronę opinii: przetłumacz je w ten sam sposób. Finalizacja otwiera wersję w języku gościa.
• Strony z wyszukiwarką, pokojami i opiniami: tłumacz je jak zwykłe strony; shortcody i widżety pozostają takie same.

Jeśli strona nie ma tłumaczenia, używany jest oryginał.

Nazwy wpisywane w panelu

Nazwy planów cenowych, dodatki (nazwa i opis), promocje, własne opłaty i dane do przelewu bankowego są rejestrowane jako ciągi znaków: w Polylang w Języki → Tłumaczenia (grupa JetBookIn), w WPML w String Translation (domena JetBookIn). Plany cenowe, dodatki i promocje mają też w panelu pola W innych językach tuż pod nazwą; oba miejsca są ze sobą zsynchronizowane. Puste tłumaczenie oznacza wyświetlenie oryginału.

E-maile

Treści e-maili edytujesz osobno dla każdego języka w Ustawienia → E-maile, a nie we wtyczce wielojęzycznej. Zobacz E-maile → Jedna treść na język.

Dla programistów: REST API

Wszystko, co robi panel, przechodzi przez REST API w przestrzeni nazw jetbookin/v1, np. https://example.com/wp-json/jetbookin/v1/availability/search. Punkty końcowe dla personelu wymagają zalogowanego użytkownika z uprawnieniem manage_jetbookin (administratorzy i rola Menedżer rezerwacji) – ciasteczka z nonce REST albo Hasła aplikacji dla aplikacji i innych serwerów. Najczęściej używane publiczne punkty końcowe (finalizacja, wyceny, działania gości, opinie) mają limit zapytań na klienta.

Główne publiczne punkty końcowe

Punkty końcowe dla personelu to m.in. /bookings (lista, tworzenie, PUT /bookings/{id}, anulowanie, płatności, prośby o płatność, wiadomości), /calendar, /quote, /settings, /emails, /reviews i /ical/connections. Operatorzy płatności wywołują własne trasy webhooków w tej samej przestrzeni nazw.

Dla programistów: hooki

Wszystkie hooki JetBookIn zaczynają się od jbi/. Używaj ich w małej wtyczce lub w pliku functions.php motywu potomnego.

Akcje

Filtry

// Zezwól na dwie nieopłacone rezerwacje na adres e-mail.
add_filter( 'jbi/max_open_holds', fn() => 2 );

// Wysyłaj każdą potwierdzoną rezerwację do innego systemu.
add_action( 'jbi/booking_confirmed', function ( array $booking ) {
	wp_remote_post( 'https://example.com/hook', [ 'body' => [ 'ref' => $booking['ref'] ] ] );
} );

// Dla wyszukiwarek pokoje są pokojami hotelowymi.
add_filter( 'jbi/structured_data_room_type', fn() => 'HotelRoom' );

Stałe e-maile z alertami możesz nadpisać, kopiując admin-conflict.php, admin-sync-failing.php lub admin-late-payment.php do yourtheme/jetbookin/emails/.

Dla programistów: WP-CLI

Na działających stronach zalecany jest prawdziwy cron serwera zamiast crona WordPressa uruchamianego przez odwiedziny, na przykład co 5 minut:

*/5 * * * * cd /path/to/wordpress && wp jetbookin run-jobs --quiet

O zadaniach w tle przeczytasz w rozdziale Ustawienia zaawansowane.

Pytania

Pole rezerwacji nic nie pokazuje.

Poza stroną danego typu pokoju wymaga ono atrybutu room="ID" (w Elementorze: wybierz Typ pokoju). Sprawdź też, czy typ pokoju jest opublikowany i ma ceny.

Wyszukiwarka kieruje gości na złą stronę.

Ustaw w wyszukiwarce results_url (albo Strona wyników w widżecie) na stronę z [jetbookin_results]. Bez tego wyniki pojawiają się pod formularzem.

Moje kolory się nie zmieniają.

Ustaw zmienne na .jbi-widget (na przykład body .jbi-widget { … }), a nie tylko na body lub :root. Potem wyczyść pamięć podręczną CSS lub wtyczki optymalizującej.

Czy mogę używać shortcode’ów w Gutenbergu, Divi lub Bricks?

Tak. Dodaj blok Shortcode (lub element shortcode swojego kreatora) i wklej shortcode.

Czy potrzebuję osobnej strony finalizacji?

Nie. Jeśli ID strony finalizacji rezerwacji jest puste, pole rezerwacji przechodzi na stronę potwierdzenia rezerwacji. Osobna strona Rezerwuj z wynikami przydaje się, gdy chcesz mieć także stronę wyszukiwania.

Przez pomyłkę usunąłem stronę Potwierdzenie rezerwacji.

Utwórz stronę z [jetbookin_confirmation], opublikuj ją i wpisz jej ID jako ID strony potwierdzenia rezerwacji w Ustawienia → Ogólne. Linki w wysłanych wcześniej e-mailach nadal prowadzą pod stary adres, więc w razie potrzeby wyślij gościom, których to dotyczy, link do rezerwacji jeszcze raz.