# Dinamikus popup JetEngine listázáshoz, beállítási oldalhoz és naptárhoz

> Popup, amely a JetEngine listázások, beállítási oldalak és a dinamikus naptár adatait jeleníti meg.

A dinamikus popup nem fix szöveget mutat, hanem adatot húz ki a JetEngine-ből: egy listázás elemének mezőit, egy beállítási oldal értékeit vagy a naptárban kiválasztott bejegyzés adatait. Ez a fejezet három használati esetet ír le.

## Követelmények

- Elementor (az ingyenes változat elég), a naptáras példához blokkszerkesztő vagy Bricks is jó.
- Aktív **JetPopup** és **JetEngine** bővítmény.
- Listázáshoz egy már elkészített listázás (**JetEngine → Listázások/komponensek**).

> **Megjegyzés**
>
> A dinamikus popup csak a JetPopup saját popupjaival működik, és a REST API-val nem használható.

## Dinamikus popup listázás elemeihez

### 1. A popup elkészítése

1. Nyisd meg a **JetPopup → Minden felugró ablak** oldalt, és kattints a **Create New Popup** gombra.
2. Válaszd a tartalomtípust, adj nevet (ha üresen hagyod, a név automatikusan készül), válassz elrendezést, majd kattints a **Create** gombra.
3. Töröld az alapértelmezett elemeket, ha nincs rájuk szükség.
4. Keresd meg a dinamikus widgeteket, és tedd az oldalra a kellőket. Például a **Dinamikus kép** a bejegyzés képét, a **Dinamikus mező** a címet és a meta mezőket, a **Dinamikus kifejezések** a hozzárendelt kategóriákat mutatja.
5. A widgetek ezen a ponton még üresek, a tartalom a megnyitáskor töltődik be.
6. Kattints az Elementor panel bal alsó sarkában lévő fogaskerékre, a JetPopup beállításai jelennek meg. A beállítások blokkban kapcsold be a **Loading content with Ajax** kapcsolót, hogy a tartalom Ajaxszal töltődjön.
7. Kapcsold be a **Force Loading** kapcsolót is, hogy a tartalom a popup minden megnyitásakor újra betöltődjön.
8. A **Megjelenítési feltételek** mellett kattints a **Szerkesztés** gombra. Új lap nyílik a feltételek ablakával. Állítsd be a feltételeket, majd kattints a **Save Conditions** gombra.
9. Térj vissza a szerkesztőbe, és tedd közzé a popupot.

A feltételek nélkül a popup nem jelenik meg, ezért ezt a lépést ne hagyd ki.

### 2. A popup csatolása a listázáshoz

Két módon nyílhat meg a popup a listázás elemein.

**A teljes listázáselem kattinthatóvá tétele:**

1. Nyisd meg a listázás szerkesztőjét.
2. Kattints a bal alsó fogaskerékre, és nyisd meg a listázás beállításait.
3. Kapcsold be a **Make listing item clickable** (Listázáselem kattinthatóvá tétele) kapcsolót.
4. A **Link source** (Hivatkozás forrása) mezőben válaszd az **Open JetPopup** lehetőséget, alatta pedig a kívánt popupot.

Ezután a popup megnyílik, amikor a látogató egy elemre kattint.

**Gombbal:**

1. Tegyél a listázásra egy alap **Gomb** widgetet a kívánt felirattal.
2. A gomb beállításainak **Speciális** fülén nyisd meg a **JetPopup** blokkot.
3. Add meg a **Csatolt felugró ablak** mezőben a popupot, és kapcsold be a **JetEngine Listing popup** kapcsolót, hogy a popup a listázás rácsához kötődjön.
4. Az **Indító típusa** legyen **Click on Widget**.
5. Kattints a **Közzététel** gombra.

Végül tedd a **Listázás rács** widgetet a kívánt oldalra, és mentsd az oldalt. A weboldalon a gombra kattintva megnyílik a popup, benne a dinamikus widgetek az adott elem adataival.

## Dinamikus popup beállítási oldal értékeivel

A popup a JetEngine beállítási oldalának meta mezőiből is dolgozhat.

1. Hozz létre egy beállítási oldalt a **JetEngine → Beállítási oldalak** menüben, meta mezőkkel.

   ![Új beállítási oldal létrehozása a JetEngine-ben](./kepek/dinamikus-popupok-beallitasi-oldal.webp)

   *Új beállítási oldal létrehozása a JetEngine-ben* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-options-pages&cpt_action=add)

   A képen az új beállítási oldal űrlapja látszik: az oldalcím, a slug, a menü neve és a hozzáférési jogosultság itt adható meg.

2. Nyisd meg a létrehozott oldalt a WordPress menüjében, és töltsd ki a mezőket.
3. A **JetPopup** menüben készíts egy popupot, vagy válassz egyet az elrendezéskönyvtárból.
4. Az Elementor szerkesztőben tegyél a popupra egy dinamikus widgetet (például **Dinamikus mező**). A tartalombeállításokban a **Forrás** legyen **Beállítások** (Options), az alatta lévő mezőben pedig válaszd ki a kívánt egyéni mezőt. A kinézetét a **Stílus** fülön állíthatod.
5. Ha dátum mezőből számszerű értéket jelenítesz meg, kapcsold be a **Mező kimenetének szűrése** opciót, és válaszd a **Format date** visszahívást.
6. A **JetPopup beállításai** között add meg az általános beállításokat és azt, hol jelenjen meg a popup.
7. Mentsd, és nézd meg a weboldalon.

## Popup a dinamikus naptárhoz

Ezzel a módszerrel a naptárban megjelenő bejegyzések további adatait mutathatod popupban. A példában a bejegyzéstípus az „Orvosok”.

1. **A popup:** a fenti listázásos leírás szerint készíts popupot, amely a bejegyzéstípus további meta mezőit mutatja. Kapcsold be a **Loading content with Ajax** és a **Force Loading** kapcsolót.
2. **A feltételek:** a **Megjelenítési feltételek** mellett kattints a **Szerkesztés** gombra, és állítsd be a feltételeket. Ha a popup egyetlen oldalon kell, válaszd: **Include**, **Singular**, **Page**, majd azt az oldalt, ahol a naptár van. Mentsd a feltételeket.
3. **A listázás:** készíts listázást a dinamikus naptárhoz.
4. **A csatolás:** a listázás szerkesztőjében kattints a fogaskerékre, nyisd meg a listázáselem beállításait, és kapcsold be a **Make listing item clickable** kapcsolót. A **Link source** mezőben válaszd az **Open JetPopup** lehetőséget, a JetPopup mezőben pedig az elkészített popupot. Kattints a **Közzététel** gombra.
5. **A naptár az oldalon:** nyisd meg a kívánt oldalt Elementorban, és tedd rá a **Dinamikus naptár** widgetet. A **Listázás** mezőben válaszd ki a listázást. A **Bejegyzések csoportosítása** (Group posts by) listában add meg, hogyan kerüljenek a naptárba az események. A „Dátum egyéni mezőből” (Date from custom field) választásnál megjelenik a **Meta mező neve** mező, ide a dátumot tároló mező nevét írd (a példában `available_date`). Állítsd be a stílust, majd kattints a **Közzététel** gombra.

A weboldalon a naptárban egy bejegyzésre kattintva megnyílik a popup a bejegyzés további adataival.