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

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.

   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.