Foglalások megjelenítése dinamikus naptárban

A JetEngine Dynamic Calendar elemével a korábban felvett foglalásokat naptárban jelenítheted meg a frontenden. Az elem egyszerű módban működik, a WooCommerce-szal és anélkül is. Szükséges bővítmények: JetEngine (egy bejegyzéstípussal, bejegyzésekkel, és bekapcsolt Calendar modullal), JetBooking, JetThemeCore és JetFormBuilder, elkészített foglalási űrlappal. Az oldalakat Elementorral vagy a blokkszerkesztővel építheted.

1. A JetBooking beállítása

1. A Foglalások → Beállítások → Általános fülön a Foglalási mód legyen az egyszerű mód, a Foglalási példányok bejegyzéstípusa pedig az a típus, amelynek a foglalásait mutatni szeretnéd (például „Ingatlanok”).
2. Az Ütemezés fülön állítsd be a hét napjaira és az időre vonatkozó szabályokat (Időválasztó a be- és kijelentkezéshez).

2. JetEngine lekérdezés

1. A JetEngine → Query Builder oldalon kattints az Add New gombra.
2. A Name mezőbe írd a lekérdezés nevét (például „Foglalások lekérdezése”), a Query Type listából válaszd a „JetBooking Query” lehetőséget.
3. A General fülön a Status listából válaszd ki a mutatni kívánt foglalási állapotot (például „On hold”, „Pending”).
4. A User ID mezőnél kattints a Dynamic Tag ikonra, és válaszd a „Current user ID” makrót.
5. Mentsd az Add Query / Update Query gombbal.

3. A foglalási űrlap

Készíts űrlapot, vagy nyisd meg a meglévőt (Foglalási űrlap).

1. Vedd fel az adatgyűjtő mezőket (például keresztnév, vezetéknév, e-mail).
2. Vegyél fel egy Check-in/check-out dates mezőt: a Field label mezőben a felirata, a Fields position legyen „Inline”, a Layout pedig „Separate fields for check in and check out dates”. Állítsd be a dátumformátumot, az elválasztót és a hét első napját.
3. Az űrlap utólagos műveleteinél vedd fel az Apartment Booking műveletet: az Apartment ID Field mezőben válaszd a rejtett mezőt (például property_id), a Check-in/Check-out Date Field és az E-mail Field mezőben a megfelelő mezőket. A DB columns map résznél rendeld az űrlap mezőit az adatbázisoszlopokhoz (például az e-mail mezőt a user_data oszlophoz).
4. Mentsd az űrlapot (Update), és tedd a bejegyzéstípus egyedi oldalára a JetForm elemmel (Foglalási naptár, dátumválasztó és az űrlap a tétel oldalán).
5. A frontenden küldd el az űrlapot. A foglalás a Foglalások → Foglalások oldalon jelenik meg.

4. Listázási sablon (Listing item)

1. A JetEngine → Listings/Components oldalon kattints az Add New Item gombra.
2. A Listing source listából válaszd a „Query Builder” lehetőséget, a Query listából az elkészített lekérdezést. Add meg a sablon nevét, és a Listing view listából válaszd ki a szerkesztőt. A Create Listing Item gombbal hozd létre.
3. Húzz a sablonra Dynamic Field elemeket. Az első elem Source értéke „Post/Term/User/Object Data”, az Object Field a JetBooking csoportban a „Booking ID”.
4. Ismételd meg az elemet a „Check In Date” mezőre. A dátum formázásához kapcsold be a Filter field output kapcsolót, a Callback legyen „Format date”, a formátum például „F j, Y” (hónap, nap, év).
5. A „Check In Time” mezőre ugyanígy, a Format mezőben például „g:i,a” szöveggel.
6. A „Check Out Date” és a „Check Out Time” mezőt ugyanígy vedd fel.
7. Ha a foglalást a Google Naptárba is fel szeretnéd venni, tegyél a sablonra Dynamic Link elemet, és a Source listából válaszd a „JetBooking: Add booking to Google Calendar” lehetőséget.
8. A Publish gombbal mentsd.

5. A Dynamic Calendar elem

1. Hozz létre új egyedi oldalt, vagy nyisd meg azt, amelyet a lekérdezéshez használtál.
2. Húzd az oldalra a Dynamic Calendar elemet.
3. A Listing listában válaszd ki az elkészített listázási sablont, a Group posts by mezőnél pedig a „Booking date” lehetőséget.
4. Frissítsd az oldalt, és nézd meg a frontenden: a naptárban a foglalások a napokhoz rendezve látszanak.
5. Az „Add to Google Calendar” hivatkozásra kattintva a foglalás felkerül a Google Naptárba.