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

> A foglalható bejegyzések listázása JetEngine Listing Grid elemmel Elementorban, a blokkszerkesztőben, Brickben és Timber/Twig nézettel, foglalási űrlapot tartalmazó felugró ablakkal.

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:

```twig
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ó](https://hub.hellowp.io/hu/plugins/jet-booking/beallitasi-varazslo/)), egyébként a [Foglalási űrlap](https://hub.hellowp.io/hu/plugins/jet-booking/foglalasi-urlap/) 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.

```html
<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.