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

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