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

> Két WordPress-oldal összekötése REST API-val, hogy CCT-elemeket hozz létre, kérj le és szerkessz távolról JetFormBuilder űrlapokkal.

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.

![A CCT szerkesztője a REST API-végpontok kapcsolóival](./kepek/cct-szerkeszto.webp)

*A CCT szerkesztője a REST API-végpontok kapcsolóival* (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.

![A REST API-végpontok fül a JetEngine vezérlőpultján](./kepek/cct-rest-vegpontok.webp)

*A REST API-végpontok fül a JetEngine vezérlőpultján* (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.