# Dinamikus popup SQL-lekérdezéses listázáshoz

> Foglalások listája a felhasználói profiloldalon, részletekkel egy dinamikus popupban, JetEngine SQL-lekérdezés forrással.

Ez a példa azt mutatja meg, hogyan jelenítheted meg a bejelentkezett felhasználó foglalásait a profiloldalán. A listázás csak a foglalás dátumát és a szolgáltatás nevét mutatja, a többi adat egy gombbal nyíló dinamikus popupba kerül. A listázás forrása egy JetEngine SQL-lekérdezés.

## Követelmények

- Elementor (az ingyenes változat elég) vagy a WordPress blokkszerkesztője.
- Aktív **JetEngine** és **JetPopup** bővítmény.
- A példához a JetAppointment bővítmény: fusson le a beállítóvarázslója, és vegyél fel néhány foglalást a WordPress vezérlőpultjáról.

## 1. Az SQL-lekérdezés

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra.

   ![Új lekérdezés hozzáadása a Lekérdezéskészítőben](./kepek/dinamikus-popupok-lekerdezes.webp)

   *Új lekérdezés hozzáadása a Lekérdezéskészítőben* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

   A képen az új lekérdezés űrlapja látszik: a **Név** és a **Lekérdezés típusa** mező itt adható meg.

2. Az **Általános beállítások** részben írd be a lekérdezés nevét, a **Lekérdezés típusa** legyen az **SQL/AI Query**.
3. Az egyéni SQL-lekérdezés részben a **From table** mezőben válaszd a `jet_appointments` táblát.
4. A **Where** (lekérdezési feltételek) fülön kattints az **Új hozzáadása** gombra.
5. Válaszd az `user_id` oszlopot és az **Equal (=)** összehasonlítást. A **Value** mezőben kattints a pénzérmékből álló ikonra, és válaszd a **Current User ID** makrót. A típus legyen **Numeric**. Így a felhasználó csak a saját foglalásait látja.
6. Az **Order & Order By** fülön az **Add new sorting parameter** gombbal rendezési szabályt adhatsz hozzá, akár többet is.
7. Ha készen vagy, kattints az **Add/Update Query** gombra.

## 2. A popup

1. Nyisd meg a **JetPopup → Create New Popup** oldalt.
2. A tartalomtípus legyen **Elementor** vagy **Block Editor**. A nevet és az elrendezést megadhatod, majd kattints a **Create** gombra.
3. Tedd a szerkesztőre a **Dinamikus mező** widgetet vagy blokkot. A **Forrás** legyen a bejegyzés, kifejezés, felhasználó vagy objektum adata (Post/Term/User/Object Data). Az objektummező (Object Field) listából bármelyik oszlopot kiválaszthatod.
4. A **Customize field output** opcióval szöveget fűzhetsz az érték elé és mögé.
5. Egyes oszlopokhoz be kell kapcsolnod a **Filter field output** opciót:
   - dátum és idő megjelenítéséhez válaszd a **Format date** visszahívást, enélkül időbélyeg látszik;
   - a szolgáltatás vagy a szolgáltató címéhez válaszd a **Get post titles from IDs** visszahívást, enélkül a bejegyzés azonosítója látszik.
6. Blokkszerkesztőben a **Dinamikus mező** blokk beállításai ugyanezek.
7. Elementorban kattints a bal alsó sarokban lévő beállítások ikonra, és kapcsold be a **Loading content with Ajax** és a **Force Loading** kapcsolót.
8. Blokkszerkesztőben kattints a jobb felső sarokban a JetPopup ikonra, és ott kapcsold be ugyanezt a két kapcsolót.
9. Kattints a **Frissítés** gombra.

## 3. A listázás

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új hozzáadása** gombra.
2. A listázáselem beállítóablakában a **Listing source** legyen a **Query Builder**, válaszd ki az elkészített lekérdezést, add meg a listázáselem nevét, a nézet legyen **Elementor** vagy **Blocks (Gutenberg)**. Erősítsd meg a létrehozást.
3. Tegyél a sablonra két **Dinamikus mező** widgetet vagy blokkot: az egyik a foglalás dátumát, a másik a szolgáltatás nevét mutatja. A **Customize field output** opcióval szöveget adhatsz az értékhez, a **Format date** és a **Get post titles from IDs** visszahívással pedig a dátum és a bejegyzéscím jelenik meg.
4. Húzz a sablonra egy gombot: az alap WordPress **Gombot**, vagy a JetElements **Gomb** widgetét (csak Elementorban). Állítsd be a kinézetét.
5. Elementorban nyisd meg a **Speciális** fület, és a **JetPopup** blokkban állítsd be: **Csatolt felugró ablak** = az elkészített popup, **Indító típusa** = **Click on Button**, és kapcsold be a **Jet Engine Listing popup** opciót.
6. Blokkszerkesztőben a **Speciális** panelen a **Csatolt felugró ablak** az elkészített popup, az indító típusa **Click**, és kapcsold be a **JetEngine Listing popup** kapcsolót.
7. Kattints a **Frissítés** gombra.

## 4. A foglalások a profiloldalon

1. A **JetEngine → Profile Builder** oldalon kapcsold be a **Single user page** kapcsolót, és add meg az egyedi felhasználói oldalt. Mentsd a beállítást.
2. Az **Oldalak** menüben nyisd meg szerkesztésre a profiloldalt Elementorban vagy a blokkszerkesztőben.
3. Elementorban húzd az oldalra a **Listázás rács** widgetet, blokkszerkesztőben a **Listing Grid** blokkot, és válaszd ki az elkészített listázást.
4. Kattints a **Frissítés** gombra.

A profiloldalon minden foglaláshoz egy gomb tartozik. A gombra kattintva megnyílik a dinamikus popup az adott foglalás további adataival. A második elem gombja a második foglalás adatait nyitja meg.