Foglalási példányok megjelenítése rácsban

A foglalható tételeket (a Foglalási példányok bejegyzéstípusa bejegyzései, például „Ingatlanok”) a JetEngine Listing Grid elemével jelenítheted meg rácsban. Minden tételhez külön kártya tartozik a címével, képével, mezőivel és egy „Foglalás” gombbal, amely felugró ablakban nyitja meg a foglalási űrlapot.

Szükséges bővítmények: JetBooking, JetEngine és a felugró ablakhoz a JetPopup (Bricksben a Bricks saját felugró ablaka). A listázási sablont Elementorral, a blokkszerkesztővel, Brickkel vagy Timber/Twig nézettel is elkészítheted.

A listázási sablon létrehozása

A lépések mind a négy szerkesztőben azonosak, csak a nézet értéke más.

1. Nyisd meg a JetEngine → Listázások/komponensek oldalt, és kattints az Új hozzáadása gombra.
2. A listaforrás maradjon „Posts” (Bejegyzések).
3. A bejegyzéstípus listából válaszd ki a foglalási példányok bejegyzéstípusát.
4. Add meg a listaelem nevét, és válaszd ki a nézetet: „Elementor”, „Blocks (Gutenberg)”, „Bricks” vagy „Timber/Twig”.
5. Hozd létre a listaelemet.

Adatok kiírása a kártyán

Elementor és blokkszerkesztő

Mit jelenítesz meg	Elem és beállítás
Cím	Dynamic Field, a Source maradjon „Post/Term/User/Object”, a mező a „Title”
Kiemelt kép	Dynamic Image; alapból a bejegyzés kiemelt képe, egyéni képmezőt a Source listából választhatsz
Egyéni mező (ár, cím, szobaszám)	Dynamic Field, Source: „Meta Data”, majd a mező a listából
Mező kiegészítő szöveggel	Kapcsold be a Customize field output kapcsolót, és írd be a szöveget; a %s helyére kerül a mező értéke, ezt hagyd benne

A mezők értékét kiírhatod Headline, Heading vagy Text Editor elemmel is, ha a szövegmezőnél a Dynamic Tag ikonnal választod ki a mezőt. Így az ár elé fix szöveget is tehetsz.

Ha azt szeretnéd, hogy az egész kártya kattintható legyen, nyisd meg a sablon beállításait a fogaskerék ikonnal, és kapcsold be a Make listing item clickable kapcsolót.

Bricks

A Bricksben a Dynamic Field, Dynamic Image és Dynamic Link elemeket, vagy a Bricks saját elemeit használhatod a Dynamic Data funkcióval.

• A cím a Dynamic Field alapbeállításával megjelenik.
• Kattintható cím: Dynamic Link elem, a Source maradjon „Permalink”, a szöveget a Dynamic Data ikonnal válaszd ki („Post Title”).
• Kép: Dynamic Image, alapból a kiemelt képet írja ki.
• Egyéni mező: Dynamic Field, Source: „Meta Data”, a mezőt a listából választod.
• Foglalási ár: Dynamic Field, Source: „Meta Data”, és az Object field / Meta field / Repeater key / Component prop mezőbe a tételhez tartozó ármező kulcsát írd (például _apartment_price).

Timber/Twig

1. A Dynamic Data gombbal válaszd a „Post” csoportot, majd a „Post Title” értéket, és kattints az Insert gombra. A beszúrt {{ post.title }} kézzel is beírható.
2. A kiemelt képhez a Dynamic Data gombbal válaszd a „Dynamic Data” lehetőséget, a Source legyen „Meta Data”, a Custom Field Key pedig _thumbnail_id. Az Add filter to result gombbal adj hozzá szűrőt: „JetEngine Callback”, azon belül a „Get image by ID” callback, ahol a képméretet is kiválaszthatod.
3. Egyéni mezőt ugyanígy szúrsz be („Meta Data” forrás, a mező a listából). Fix szöveget a helyőrző elé írhatsz:

Rooms:{{ jet_engine_data(args={source:'meta',meta_key:'_rooms'}) }}

A helyőrzőket <div> elemekbe tedd, hogy mindegyik külön sorba kerüljön. A stílust a sablon CSS beállításai között adod meg.

Felugró ablak a foglalási űrlappal

A kártyán lévő gomb a foglalási űrlapot tartalmazó felugró ablakot nyitja meg. Az űrlapot előbb készítsd el: a beállítási varázsló automatikusan létrehozza (Beállítási varázsló), egyébként a Foglalási űrlap fejezet szerint kell megcsinálnod. Az űrlap a JetFormBuilder mintái (pattern) közül is felépíthető, ilyenkor a minta tartalmazza a dátumválasztót és a többi beállítást.

Elementor

1. Készíts dinamikus felugró ablakot a JetPopuppal, és tedd bele a foglalási űrlapot. Kattints a Publish gombra.
2. A felugró ablaknak állíts be megjelenítési feltételeket, különben nem működik.
3. A listázási sablonban adj hozzá egy Button elemet, és írd át a feliratát (például „Foglalás most”).
4. A Haladó fülön, a JetPopup szakaszban válaszd ki az Attached Popup listából a felugró ablakot, kapcsold be a JetEngine Listing popup beállítást, a Trigger Type pedig legyen „Click On Widget”.

Blokkszerkesztő

1. Készíts felugró ablakot a JetPopuppal a blokkszerkesztőben, és mentsd el. Állítsd be a megjelenítési feltételeit.
2. A listázási sablonba tegyél egy Button blokkot. A Haladó fülön válaszd ki az ATTACHED POPUP értékét, a TRIGGER TYPE legyen „Click”, és kapcsold be a JetEngine Listing Popup kapcsolót.

Bricks

A JetPopup dinamikus felugró ablaka a Bricksben nem működik, ezért a Bricks saját felugró ablakát használd.

1. Készítsd el a felugró ablakot a Bricksben, tedd bele a foglalási űrlapot.
2. A felső sávban a fogaskerék ikon alatt, a Conditions fülön add meg, mikor jelenjen meg.
3. A listázási sablonban adj hozzá egy Button elemet, kattints az Interaction gombra. A Trigger legyen „Click”, az Action „Show Element”, a Target „Popup”, és a megjelenő mezőben válaszd ki a felugró ablakot.

Timber/Twig

Készítsd el az űrlapot és a dinamikus felugró ablakot, majd illeszd be a sablonba ezt a HTML-t. A data-popup-id értéke a felugró ablak azonosítója, ezért a saját ablakodét írd be.

<button
    class="jet-popup-trigger"
    type="button"
    data-popup-id="6806"
    data-object-id="{{ post.ID }}"
    data-object-type="post"
  >
  Foglalás most
</button>

{{ button | raw }}

A rács kirakása az oldalra

1. Nyisd meg azt az oldalt, ahol a rácsot meg szeretnéd jeleníteni (a Timber/Twig sablont bármelyik szerkesztőben kirakhatod).
2. Add hozzá a Listing Grid widgetet, blokkot vagy elemet, és a Listing mezőben válaszd ki az elkészített sablont.
3. Tedd közzé az oldalt.

A frontenden a bejegyzések kártyákként jelennek meg, a gombra kattintva pedig megnyílik a foglalási űrlap felugró ablakban.