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

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.

   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.