CCT-elemek távoli kezelése REST API-val

A CCT elemei két WordPress-oldal között is kezelhetők a REST API-n keresztül. A példában egy kiegészítő oldal („Esemény”) űrlapot mutat a résztvevőknek, az adatok pedig egy adatbázisoldalon („Főoldal”) gyűlnek. A résztvevők a kiegészítő oldalon az adataikat szerkeszthetik is: egy űrlapban, amelyet hivatkozás nyit meg, vagy dinamikus felugró ablakban.

Előfeltétel: Elementor, blokkszerkesztő vagy Bricks; aktív JetEngine; aktív JetFormBuilder; két WordPress-oldal.

1. A végpontok regisztrálása az adatbázisoldalon

Az alábbi lépések a „Főoldalon” történnek.

A CCT beállítása

1. A JetEngine → JetEngine → Modulok fülön kapcsold be az Egyedi tartalomtípusok kapcsolót, és kattints a Mentés gombra.
2. Menj a JetEngine → Egyedi tartalomtípusok oldalra, és kattints az Új hozzáadása gombra. Add meg a nevet (a példában „Résztvevők”), a Slug és az Adatbázistábla neve magától kitöltődik.
3. A Mezők részben vedd fel a mezőket az Új mező gombbal. A példában: „Név” és „Elérhetőség” szöveges mező, és „Fénykép” Média mező. A médiamezőnél az Média URL értékformátumot válaszd, mert az adatok JSON-ként mennek a REST-en át, a képek pedig URL-ként, szövegként kerülnek át.
4. A példában egy Ismétlő mező is van („Kísérők”) egy szöveges almezővel („Kísérő neve”), amellyel további adat (például kísérők) vihető fel.
5. Az Általános beállítások között regisztráld a szükséges végpontokat. A példában a felhasználók űrlapokkal hoznak létre és frissítenek elemeket, ezért be van kapcsolva az Elem létrehozására szolgáló REST API-végpont regisztrálása, a Tétel/tételek lekérdezésére szolgáló REST API-végpont regisztrálása és az Elem frissítésére szolgáló REST API-végpont regisztrálása.
6. Minden bekapcsolt kapcsoló alatt megjelenik az Endpoint URL és a Hozzáférési jogosultság mező. Másold ki és mentsd el a végpont URL-jét (alakja: https://…/wp-json/jet-cct/participants). A saját oldaladon a saját URL-ed lesz.
7. A Hozzáférési jogosultság alapból korlátozás nélküli. A példában manage_options kerül ide, így csak a Super Admin és az Adminisztrátor küldhet kérést a végpontnak. A jogosultságok kiosztásáról a WordPress szerepköreit és jogosultságait leíró dokumentációból tájékozódhatsz.
8. Kattints a Tartalomtípus hozzáadása (vagy frissítése) gombra.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-cct&cct_action=edit&id=4

Ha a látogatók számára is engedélyezed az elemek szerkesztését, ezeket vedd figyelembe:

• A frissítés nem szerkeszti a meglévő adatot, hanem felülírja. A felhasználónak minden mezőt újra ki kell töltenie, az új adat felváltja a régit.
• Az űrlapon szerepelnie kell egy mezőnek, amellyel a felhasználó kiválasztja, melyik elemet frissíti.
• Az elérhető elemek listájához külön listázás kell, amelyet a REST API-ból épít a rendszer (lásd a REST API-listázásokról szóló fejezeteket).
• A frissítéshez külön űrlap kell: a különböző REST API-URL-ekre irányuló kérések nem vonhatók össze egy űrlapban.

Alkalmazásjelszó

A JetEngine többféle hitelesítést támogat. A példa a WordPress Alkalmazásjelszavak funkcióját használja.

1. Menj a Felhasználók oldalra, és nyisd meg annak a felhasználónak a szerkesztését, aki a végpontot használhatja (azé a szerepkörű felhasználóé, amelyet a jogosultságnál megadtál).
2. Görgess az Alkalmazásjelszavak részhez, adj meg egy tetszőleges nevet az Új alkalmazásjelszó neve mezőben, és kattints a hozzáadás gombra.
3. A generált jelszó megjelenik a mező alatt. Másold ki és tárold el biztonságos helyen, mert többé nem jelenik meg.
4. Kattints a Felhasználó frissítése gombra.

2. A kapcsolat a kiegészítő oldalon

Az alábbi lépések az „Esemény” oldalon történnek.

1. A JetEngine → JetEngine → Modulok fülön kapcsold be a REST API-listázások kapcsolót, és mentsd.
2. A JetEngine vezérlőpultján megjelenik a REST API-végpontok fül. Nyisd meg, és kattints a + Új végpont gombra.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine

3. Add meg a végpont nevét (például „Résztvevők”), és az API Endpoint URL mezőbe illeszd be a főoldalról kimásolt URL-t. Az URL megjelenik a végpont címe mellett.
4. Ha beállítottál hozzáférési jogosultságot, kapcsold be az Authorization kapcsolót, és az Authorization type listából válaszd az Application Password értéket.
5. A User:password string mezőbe írd be a főoldali felhasználó nevét és a kimásolt jelszót, kettősponttal elválasztva, szóköz nélkül, például admin:KJUe 6HyZ ak7D I9ZK B09O npVh.
6. Kattints a Send Request gombra a mintakérésnél. Ha a kapcsolat él, a Status mezőben a Connected felirat látszik.
7. Kattints a Mentés gombra.

3. Űrlap a létrehozó végponthoz

Minden lépés a kiegészítő oldalon történik.

Az űrlap létrehozása

1. Készíts űrlapot a résztvevők adataihoz. Az űrlapmezők Form field name értékének (nem a címkéjének) és típusának pontosan egyeznie kell a főoldali CCT mezőinek nevével és típusával.
2. A médiamezőnél a User access legyen Any registered user (bármely regisztrált felhasználó), kapcsold be az Insert attachment kapcsolót, és a Field value legyen Attachment URL. Az Ismétlő mezőbe bármilyen mezőtípus tehető, például Media Field oklevelek vagy fényképek tárolására.
3. A JetForm fül Post Submit Action részében alapból ott van a Save Form Record művelet. Kattints a + New Action gombra, és válaszd a REST API Request műveletet.
4. A REST API URL mezőbe illeszd be a főoldalon a Elem létrehozására szolgáló REST API-végpont regisztrálása kapcsoló alatti Endpoint URL-t, a végén perjellel (https://…/wp-json/jet-cct/participants/).
5. A Custom Body mezőbe írd be a kérés JSON-kódját, ahol összekapcsolod az űrlapmezőket a CCT mezőivel. A bal oldalon a CCT mezők azonosítói, a jobb oldalon az űrlapmezők makrói állnak:

{
"name" : "%name%",
"contact_data" : "%contact_data%",
"photo" : "%photo%",
"accompanying_persons" : %accompanying_persons%
}

Egyes mezők (például az ismétlő) hozzárendelésének sajátosságai vannak, a makrók használatáról a makróleírásban találsz részleteket.

6. A szerkesztőablak alján kapcsold be az Authorization kapcsolót, válaszd az Application Password típust, és a User:password string mezőbe írd be a főoldali felhasználónevet és jelszót, ahogy a kapcsolat beállításánál.
7. Kattints a Frissítés gombra, és tedd közzé az űrlapot.

Ha a bevitt CCT-adatot a kiegészítő oldalon is tárolni szeretnéd, hozd létre ott is a megfelelő CCT-t, és a JetForm beállításai között a Preset fülön kapcsold be az Enable kapcsolót, a forrás legyen Custom Content Type, az azonosító forrása a Current post, az azonosítónak választott mezőnél (például a post_id rejtett mezőnél) pedig az Item ID értéket.

Az űrlap elhelyezése

Illeszd be az űrlapot egy oldalra a kedvelt szerkesztővel (a példában Elementor és JetForm widget). A kiegészítő oldalon a REST API-listázási sablonnal, Dynamic Field widgetekkel és a Listing Grid widgettel jeleníthetők meg a főoldali elemek, ugyanazon az oldalon, ahol a résztvevő hozzáadó űrlap is van.

A frontenden töltsd ki az űrlapot, és kattints a küldésre. Sikeres küldés után a lista megmutatja az új elemet.

Az eredmény ellenőrzése

• A JetFormBuilder → Form Records oldalon minden űrlapadat látszik, függetlenül attól, hogy a küldés sikeres volt-e. Egy rekordot kinyitva láthatod az adatokat.
• A főoldalon nyisd meg a CCT elemlistáját: az új elem ott van. A kép URL-ként látszik, a Média mező adata nem jelenik meg képként. Ha a főoldalon képet akarsz látni, készíts REST API-listázást.

4. Űrlap a lekérdező és frissítő végponthoz

Az elemek szerkesztéséhez először a főoldalról kérjük le őket a lekérdező végponttal, majd a kiegészítő oldalon JetFormBuilder űrlappal frissítjük.

Az űrlap módosítása

1. Duplikáld a meglévő űrlapot, és nevezd át („Résztvevő szerkesztése”).
2. Adj hozzá egy Number Field mezőt, és add meg a nevét (például item_id).
3. A főoldalon a CCT beállításaiban másold ki a Elem frissítésére szolgáló REST API-végpont regisztrálása kapcsoló alatti URL-t (alakja: https://…/wp-json/jet-cct/cct/{_ID}).
4. A REST API Request művelet (ceruza ikon) REST API URL mezőjének végére írd a %item_id% szöveget, így a szám mező értéke azonosítja az elemet: https://…/wp-json/jet-cct/participants/%item_id%.
5. Kattints a Frissítés gombra.
6. A Preset fülön kapcsold be az Enable kapcsolót, a forrás legyen az URL query Variable, rendeld az űrlapmezőket a CCT mezőihez, az azonosító mezőnél (itt item_id) pedig az Item ID értéket.
7. Tedd közzé, vagy frissítsd az űrlapot.

Szerkesztés a Dynamic Link widgettel

1. Add hozzá a „Current object property” makró kódrészletét (például a Code Snippets bővítménnyel), és mentsd.
2. Hozz létre egy oldalt a „Résztvevő szerkesztése” űrlappal, és másold ki az URL-jét.
3. A REST API-listázási sablonban a Dynamic Field widgetek alá tegyél egy Dynamic Link widgetet. A Source maradjon üresen, a Custom field/repeater key/component control mezőbe írj egy kitalált mezőnevet (például fff). A Label mezőben a „Read More” helyett írd: „SZERKESZTÉS”. Kapcsold be az Add Query Arguments kapcsolót.
4. A Query Arguments mezőbe írd:

item_id=%current_object_prop|_ID%
name=%current_object_prop|name%
photo=%current_object_prop|photo%

5. A URL Prefix mezőbe illeszd be az űrlapot tartalmazó oldal URL-jét.
6. Frissítsd a listázási sablont és a Listing Grid widgetet tartalmazó oldalt.

A frontenden a SZERKESZTÉS hivatkozás megnyitja az űrlapot. Írd be az új adatokat, küldd el, majd a listát tartalmazó oldalon ellenőrizd, hogy az adat frissült-e.

Szerkesztés dinamikus felugró ablakban

Ehhez a JetPopup bővítmény kell.

1. Add hozzá a dinamikus felugró ablak kódrészletét (például a Code Snippets bővítménnyel).
2. A JetEngine → Lekérdezéskészítő oldalon kattints az Új hozzáadása gombra. Nevezd el („REST API Résztvevők”), a típus legyen REST API Query, a From endpoint listában válaszd ki a létrehozott végpontot, és mentsd.
3. A „Résztvevő szerkesztése” űrlapon az előbeállítás itt nem működik, ezért minden űrlapmezőhöz rövidkód kell. A JetEngine → JetEngine → Shortcode-generátor fülön hagyd meg a JetEngine Data rövidkódot és a Post/Term/User/Object Data forrást, válaszd ki a megfelelő REST API-mezőt (például _ID), és másold ki a Context mező alatti rövidkódot. Illeszd be az űrlap megfelelő mezőjének Default value értékébe. Ismételd meg az összes mezőre, és mentsd az űrlapot.
4. Hozz létre felugró ablakot („Résztvevő szerkesztése”). Töröld a felesleges widgeteket, húzd be a JetForm widgetet, válaszd ki az űrlapot, és a beküldés típusa legyen AJAX. Ha kell, formázd. A Settings fülön kapcsold be a Loading content with Ajax és a Force loading kapcsolót. Állíts be megjelenítési feltételt (Visibility Condition), és frissítsd.
5. A listázási elemben tegyél egy Button widgetet, a feliratát írd át „Szerkesztés felugró ablakban” szövegre. Az Advanced fülön, a JetPopup részben az Attached popup listában válaszd ki a felugró ablakot, és kapcsold be a JetEngine Listing Popup kapcsolót. Mentsd a listázási elemet.
6. A Listing Grid widgetet tartalmazó oldalon a Content fül Custom Query részében kapcsold be a Use Custom Query kapcsolót, és válaszd ki a lekérdezést („REST API Résztvevők”). Tedd közzé az oldalt.

A frontenden a gombra kattintva megnyílik az ablak az űrlappal. Írd be az adatokat, küldd el, majd frissítsd az oldalt.

Gyakori kérdések

Megjeleníthetők a képek vagy más média a főoldalon a REST API-elemekből? Nem. A képek URL-ként látszanak, de a bélyegkép nem működik, mert a kiegészítő oldalakhoz vannak csatolva.

Szerkeszthetem a CCT-elem csak egy mezőjét? Igen. Bár a végpont felülírja a meglévő rekordot, a frissítési kérésben megadhatod az összes mezőt, amelyet meg akarsz tartani.

Létrehozhat és frissíthet ugyanaz az űrlap elemet? Nem. Külön űrlapot használj, mert a REST API-kérések eltérő végpont-URL-t és beállítást igényelnek.