# Dinamikus felugró ablak SQL-lekérdezéses listázáshoz

> Lépésről lépésre: a felhasználó időpontjainak listája a profiloldalon, részletekkel egy dinamikus felugró ablakban SQL-lekérdezés, Dynamic Field és JetPopup segítségével.

Ez az útmutató egy példán mutatja meg, hogyan készíthetsz dinamikus felugró ablakot egy SQL-lekérdezésre épülő listázási sablonhoz. A példában a bejelentkezett felhasználó időpontfoglalásai jelennek meg a profiloldalán. A listában csak néhány adat látszik minden foglalásnál, a gombra kattintva pedig az összes részlet egy felugró ablakban nyílik meg.

## Követelmények

- Elementor (ingyenes változat) vagy a WordPress blokkszerkesztője (Gutenberg)
- A JetEngine telepítve és aktiválva
- A JetPopup bővítmény telepítve és aktiválva
- Időpontfoglaló bővítmény (a példában JetAppointment), a varázslóval beállítva, és néhány foglalással. A foglalásokat az irányítópultról is felvehetsz.

A JetPopup a JetEngine listázási sablonjaiból tud adatot kiolvasni egy dinamikus felugró ablakban, az SQL-lekérdezés forrásából is.

## 1. Az SQL-lekérdezés létrehozása

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az új lekérdezés hozzáadása gombra.
2. Az **Általános beállítások** szakaszban add meg a lekérdezés nevét, a lekérdezés típusa pedig legyen „SQL/AI Query”.
3. Az **Egyedi SQL-lekérdezés** (Custom SQL Query) szakasz **From table** mezőjében válaszd a `jet_appointments` táblát.
4. A **Where (query clauses)** lapon kattints az új elem hozzáadása gombra, és állítsd be:
   - **Column**: `user_id`
   - **Compare**: „Equal (=)”
   - **Value**: kattints az érmeoszlop ikonra, és válaszd a „Current User ID” makrót
   - **Type**: „Numeric”

   Ez a beállítás leszűri az eredményt: a felhasználó csak a saját foglalásait látja.
5. Az **Order & Order By** lapon az „Add new sorting parameter” gombbal rendezési feltételeket adhatsz meg. Egy lekérdezéshez több is tartozhat.
6. Ha elkészültél, kattints az **Add/Update Query** gombra.

## 2. A felugró ablak létrehozása

1. Nyisd meg a **JetPopup → Create New Popup** oldalt.
2. Válaszd a „Block Editor” vagy az „Elementor” tartalomtípust, add meg a nevet, válaszd ki az előbeállítást, és kattints a **Create** gombra.
3. A listázási sablon csak néhány foglalási adatot mutat (a dátumot és a szolgáltatás nevét), a többi adat a felugró ablakban jelenik meg. Helyezz el a szerkesztőoldalon **Dynamic Field** widgetet vagy blokkot.
4. A **Source** (forrás) legyen „Post/Term/User/Object Data”, az **Object Field** listában pedig válaszd ki azt az oszlopot, amelynek adatát meg akarod jeleníteni. Annyi Dynamic Fieldet vegyél fel, ahány adatot mutatni akarsz.
5. A **Customize field output** kapcsolóval szöveget fűzhetsz az érték elé és mögé.
6. Bizonyos oszlopok értékét csak szűrővel jelenítheted meg helyesen. Kapcsold be a **Filter field output** kapcsolót:
   - dátum és idő megjelenítéséhez válaszd a „Format date” (Dátum formázása) callbacket; enélkül időbélyegként látszik;
   - a szolgáltatás vagy a szolgáltató címének megjelenítéséhez válaszd a „Get post titles from IDs” (Bejegyzéscímek lekérése ID-k alapján) callbacket; enélkül a bejegyzés azonosítója látszik.

A blokkszerkesztőben a **Dynamic Field** blokk beállításai ugyanezek. A callbackek részletes leírását a [Dinamikus widgetek és blokkok, a Dynamic Field](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-dinamikus-mezo/) fejezetben találod.

Elementorban a felugró ablak szerkesztésekor kattints a bal alsó sarokban a **Beállítások** ikonra, és kapcsold be a **Loading content with Ajax** és a **Force Loading** kapcsolót. A blokkszerkesztőben a jobb felső sarokban a JetPopup ikonra kattintva nyílnak meg a beállítások, ott ugyanezt a két kapcsolót kapcsold be.

Végül kattints a **Frissítés** gombra.

## 3. A listázási sablon létrehozása

1. Nyisd meg a **JetEngine → Listázások/komponensek** menüt, és kattints az új elem hozzáadására.
2. A **Setup Listing Item** ablakban a **Listing source** legyen „Query Builder”, válaszd ki az imént létrehozott lekérdezést, add meg a sablon nevét, és válaszd az „Elementor” vagy a „Blocks (Gutenberg)” megjelenítést. Kattints a **Create Listing Item** gombra.
3. Helyezz el két **Dynamic Field** widgetet vagy blokkot: az egyikkel a foglalás dátumát, a másikkal a szolgáltatás nevét jelenítsd meg. A **Customize field output** kapcsolóval szöveget fűzhetsz az értékhez. A **Filter field output** kapcsolóval és a „Format date”, illetve a „Get post titles from IDs” callbackkel a dátum és a szolgáltatás címe megfelelően jelenik meg.
4. Húzz a szerkesztőoldalra egy gombot: az alapértelmezett WordPress-gombot, vagy (csak Elementorban) a JetElements **Gomb** widgetjét. Stílusozd tetszés szerint.
5. Elementorban nyisd meg a **Speciális** fület, és nyisd ki a **JetPopup** részt. Az **Attached Popup** mezőben válaszd ki az imént létrehozott felugró ablakot, a **Trigger Type** legyen „Click on Button”, és kapcsold be a **Jet Engine Listing popup** beállítást.
6. A blokkszerkesztőben a **Speciális** részben szintén az **Attached Popup** mezőben válaszd ki a felugró ablakot, a **Trigger Type** legyen „Click”, és kapcsold be a **JetEngine Listing popup** kapcsolót.
7. Kattints a **Frissítés** gombra.

## 4. A foglalások megjelenítése a profiloldalon

1. Nyisd meg a **JetEngine → Profile Builder** oldalt, kapcsold be a **Single user page** kapcsolót, és add meg az egyedi felhasználói oldalt. Kattints a **Mentés** gombra.
2. Nyisd meg az **Oldalak** menüben a profiloldalt, és szerkeszd Elementorban vagy a blokkszerkesztőben.
3. Elementorban húzz az oldalra egy **Listing Grid** widgetet, a blokkszerkesztőben helyezz el egy **Listing Grid** blokkot, és válaszd ki az imént létrehozott listázási sablont.
4. Kattints a **Frissítés** gombra.

Ha megnyitod a profiloldalt a webhelyen, a listában minden foglaláshoz tartozik egy gomb. A gombra kattintva megnyílik a dinamikus felugró ablak a foglalás további adataival, és a második elem gombja a második foglalás részleteit mutatja.