# CCT-elemek megjelenítése másik oldalon REST API-val

> A CCT elemeit lekérő végpont, a paraméterei, a két oldal összekötése és a lekért elemek listázása Elementorral vagy blokkszerkesztővel.

A REST API-val egy CCT elemeit az egyik WordPress-oldalról (az adatbázisoldalról) átveheted egy másikra (a kiegészítő oldalra), és ott listázásban jelenítheted meg. Az elemek létrehozásáról és szerkesztéséről a [CCT-elemek távoli kezelése REST API-val](https://hub.hellowp.io/hu/plugins/jet-engine/cct-rest-api/) fejezet szól.

## 1. A lekérdező végpont regisztrálása az adatbázisoldalon

1. A **JetEngine → JetEngine → Modulok** fülön kapcsold be a **REST API-listázások** kapcsolót, és kattints a **Mentés** gombra.
2. Menj a **JetEngine → Egyedi tartalomtípusok** oldalra. Új CCT-nél kattints az **Új hozzáadása** gombra, és add meg a nevet, a menüikont, a pozíciót és a kezelési jogosultságot. Meglévő CCT-nél nyisd meg a szerkesztését.
3. Az **Általános beállítások** alatt négy kapcsoló regisztrál végpontot a lekérdezéshez, létrehozáshoz, szerkesztéshez és törléshez. Kapcsold be a **Tétel/tételek lekérdezésére szolgáló REST API-végpont regisztrálása** kapcsolót.
4. Az **Endpoint URL** mezőben két URL látszik. Az első a teljes listához tartozik, a második példa egyetlen elem lekérésére.
5. Ha kell, állítsd be a **Hozzáférési jogosultság** mezőt. Alapból nincs korlát, bárki lekérheti az elemeket. A `edit_pages` érték például csak a szerkesztőknek és az adminisztrátoroknak engedi.
6. Vedd fel a szükséges metamezőket, és kattints a **Tartalomtípus hozzáadása** (meglévő CCT-nél a frissítés) gombra. Hozz létre néhány elemet is, mert üres CCT-nél a kapcsolat hibát adhat.

Ha a végpontnak korlátozott a hozzáférése, kell egy alkalmazásjelszó is: a **Felhasználók** menüben nyisd meg a profilodat, az **Alkalmazásjelszavak** részen add meg a jelszó nevét az **Új alkalmazásjelszó neve** mezőben, add hozzá, és másold ki a jelszót. Később nem jelenik meg újra.

### Az URL paraméterei

Az **Endpoint URL** alatt a **Paraméterek áttekintése** lehetőség mutatja a használható paramétereket. A paramétereket az URL végére, `?` jel után írd, többet `&` jellel kapcsolj össze.

| Paraméter | Mit csinál |
| --- | --- |
| `_ID` | Az URL végére írt azonosítóval csak az adott elem adatait kapod. |
| `cct_author_id`, `cct_created`, `cct_modified` | Az elem szerzője, létrehozása és módosítása. Az URL-ben nem működnek paraméterként, csak a lekérhető mezők listájában szerepelnek, a saját metamezőiddel együtt. Ezek a listázásban megjeleníthetők. |
| `_cct_search` | Csak azokat az elemeket adja, amelyekben a megadott szó szerepel (minden mezőben keres), például `_cct_search=valami`. |
| `_cct_search_by` | Csak a `_cct_search` mellett működik. A mezők nevét vesszővel elválasztva felsorolva a keresést ezekre szűkíti. |
| `_limit` | A lekért elemek száma, csak szám lehet. |
| `_offset` | Hány elemet hagyjon ki az elejéről, például `_offset=2`. |
| `_orderby` | A rendezés mezője. Mellé kell a `_ordertype` is. |
| `_order` | `asc` (növekvő) vagy `desc` (csökkenő). |
| `_ordertype` | Az érték típusa a rendezéshez: egész szám, tört szám, időbélyeg, dátum vagy szöveg. |
| `_filters` | JSON-formátumú szűrők. |

Példa több paraméterre:

```
http://127.0.0.1/proba/wp-json/jet-cct/team/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer
```

Figyelem: a lekért elemek számát a **Listing Grid** widget elemszám-beállítása nem módosítja. A korlátot csak a `_limit` paraméterrel lehet kiterjeszteni vagy szűkíteni.

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

1. A kiegészítő oldalon is kapcsold be a **REST API-listázások** modult, és mentsd. A JetEngine vezérlőpultján megjelenik a **REST API-végpontok** fül.
2. Nyisd meg a fület. Két lehetőséged van: az **+ Új végpont** gomb és a **Mintavégpont hozzáadása** hivatkozás (kész példa, amely a Crocoblock-elemek listázását mutatja). Kattints az **+ Ú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. Töltsd ki a mezőket:

| Beállítás | Mit csinál |
| --- | --- |
| Név | A végpont címe a listában. |
| API Endpoint URL | Az adatbázisoldal **Endpoint URL** mezőjéből kimásolt cím, szükség esetén a fenti paraméterekkel. |
| Tételek útvonala | Ha az URL olyan oldalra vezet, ahol csak az elemek vannak, hagyd a `/` jelet. Ha több szint van, add meg az elemeket tartalmazó mappa útvonalát, például `/items`. |
| Authorization | Kapcsold be, ha a CCT hozzáférési jogosultsága nem az alapérték. Az **Authorization type** listából válaszd az **Application Password** értéket, a **User:password string** mezőbe pedig a felhasználónevet és a jelszót írd kettősponttal elválasztva, szóköz nélkül. |
| Cache | Bekapcsolva a válaszokat a lekérdezési argumentumok szerint gyorsítótárazza, ami csökkenti a válaszidőt. A **Gyorsítótár időtartama** listában az egységet (perc, óra, nap), mellette az értéket adhatod meg. |

4. Kattints a **Send Request** gombra. Ha a kapcsolat él, a **Status** mezőben a **Connected** felirat látszik.
5. Kattints a **Mentés** gombra, és a végpont bekerül a listába.

## 3. Megjelenítés Elementorban

1. Menj a **JetEngine → Listázások/komponensek** oldalra, kattints az **Új hozzáadása** gombra, és a listázás forrásának válaszd a **REST API Endpoint** értéket. Válaszd ki a végpontot, add meg a sablon nevét, és kattints a listázási elem létrehozására.
2. Az Elementorban a mezőket **Dynamic Field** widgettel add hozzá. Kétféleképpen adhatod meg a mezőt:
   - A **Source** listában válaszd a **Post/Term/User/Object Data** értéket, és az **Object Field** listából a CCT mezőjét.
   - Vagy a **Source** értéke legyen **Meta Data**, a **Custom meta field/repeater key** mezőbe pedig írd be a mező slugját.
3. Tedd közzé a sablont, nyisd meg az oldalt, ahová a lista kerül, és húzd be a **Listing Grid** widgetet. A **Listing** listában válaszd ki a sablont. A megjelenést a **Content** és a **Style** fülön állíthatod.

A REST API csak a mezők értékét adja át. Egy Média típusú mezőből így csak a kép azonosítója jön át, nem maga a kép. Kép megjelenítéséhez:

1. Az adatbázisoldalon a CCT Média típusú mezőjénél az értékformátum legyen **Média URL**. Az azonosító használata ütközést okozhat, ha a kiegészítő oldalon ugyanazzal az azonosítóval már van másik kép.
2. A kiegészítő oldal listázási sablonjába húzz be egy **Dynamic Image** widgetet, a forrás legyen **Post/Term/User/Object Data**, az objektummező pedig a médiamező.
3. Kapcsold be a **Customize field output** kapcsolót, és a **Field format** mezőbe írd: `<img src="%s">`.

## 4. Megjelenítés blokkszerkesztőben

1. A listázás létrehozásakor a **REST API Endpoint** forrás és a végpont kiválasztása után a **Listing view** listában válaszd a **Blocks** értéket.
2. A blokkszerkesztőben a mezőket **Dynamic Field** blokkal add hozzá, ugyanúgy, mint Elementornál: **Post/Term/User/Object Data** forrással az **Object Field** listából, vagy **Meta Data** forrással a mező slugjával.
3. Tedd közzé a sablont, nyisd meg a célodat szolgáló oldalt, add hozzá a **Listing Grid** blokkot, és válaszd ki a sablont. A megjelenést a blokk stílusbeállításaiban állíthatod, végül kattints a **Frissítés** gombra.