# REST API-elemek listázása: egyedi oldal és szűrés

> Külső REST API-végpont elemeinek listázása: egyedi oldal egy elemhez, és a lista szűrése a JetSmartFilters szűrőivel.

A **REST API-végpont** modullal külső adatforrás elemeit listázhatod. Ez a fejezet két feladatot ír le: hogyan készíts egyedi („single”) oldalt egy végponti elemhez, és hogyan szűrd a listát a JetSmartFilters szűrőivel.

## Egyedi oldal egy REST API-elemhez

Az ötlet: az első oldal listázza az elemeket, és minden elem hivatkozása átadja az azonosítóját egy URL-paraméterben. A második oldal ezt a paramétert olvassa, és csak az adott elemet mutatja. Előfeltétel az Elementor (az ingyenes változat elég) vagy a blokkszerkesztő, valamint a JetEngine bekapcsolt **REST API** modullal és felvett végponttal.

### Előkészítés

1. A **JetEngine → JetEngine → Modulok** fülön kapcsold be az **Egyéni tartalomtípusok** modult, és mentsd.
2. A **REST API-végpontok** fülön ellenőrizd a végpontot: kapcsolódás után a **Status** mező előtt zöld **Connected** felirat látszik.

![Az Új lekérdezés hozzáadása oldal REST API lekérdezés típussal](./kepek/listazas-2-rest-api-lekerdezes.webp)

*Az Új lekérdezés hozzáadása oldal REST API lekérdezés típussal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

A képen a **Lekérdezés típusa** mezőben a **REST API lekérdezés** van kiválasztva; ennek beállításai adják a végponthoz kötött lekérdezést.

3. Hozz létre két üres oldalt az **Oldalak** között. Az első az összes elemet listázza, a második az éppen kiválasztott elem adatait mutatja. A második oldal hivatkozását másold ki.
4. A **JetEngine → Beállítási oldalak** oldalon hozz létre beállítási oldalt egy **Szöveg** típusú mezővel, mentsd, majd a beállítási oldalon illeszd be a második oldal hivatkozását a mezőbe.

### Az első oldal sablonja

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra. A **Listing source** legyen **REST API Endpoint**, válaszd ki a végpontot, add meg a nevet és a nézetet, majd kattints a **Create Listing Item** gombra.
2. Adj hozzá **Dynamic Field** widgetet a kiírandó adatokhoz: a **Source** legyen **Post/Term/User/Object Data**, az **Object Field** listából pedig válaszd ki a végpont mezőit.
3. Adj hozzá **Dynamic Link** widgetet. A **Source** legyen **Options**, és az **Option** listából válaszd ki a beállítási oldal szöveges mezőjét (a második oldal hivatkozását).
4. Kapcsold be az **Add Query Arguments** kapcsolót, és a megjelenő mezőbe írd: `item_id=%current_id%`.

### A második oldal sablonja

Készíts még egy sablont ugyanazzal a REST API-végponti forrással. Ez az egy elem „egyedi oldalas” megjelenése, ezért ide több **Dynamic Field** kerülhet, részletesebb elrendezéssel.

### Egyéni lekérdezés a Lekérdezéskészítőben

1. A **JetEngine → Lekérdezéskészítő** oldalon hozz létre REST API lekérdezést, és válaszd ki a végpontot.
2. A **Value** mező melletti dinamikus címke gombbal válaszd a **Query Variable** elemet. A kulcsot (a mező nevét, amelyben az azonosító van) a végpont előnézetében találod.
3. A **Variable Name** értéke egyezzen azzal, ami a **Dynamic Link** hivatkozásában az `item_id=` előtt áll, vagyis itt `item_id`.
4. Mentsd a lekérdezést.

### Az oldalak összeállítása

1. Az első oldalra húzd be a **Listing Grid** widgetet, és válaszd az első sablont.
2. A második oldalra is húzz **Listing Grid** widgetet, a második sablonnal. A **Custom Query** részben kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a REST API lekérdezést.
3. Mentsd mindkét oldalt.

A frontenden az első oldal hivatkozásai tartalmazzák a lekérdezési argumentumot, ezért a második oldalon a kattintott elem adatai látszanak: így jön létre az egyedi oldal.

## REST API-elemek szűrése JetSmartFilters szűrőkkel

Itt egy REST API-végpont elemeit több paraméter szerint szűröd. Szükséges a JetSmartFilters és az aktív JetEngine bekapcsolt **REST API** modullal; a szerkesztő lehet Elementor, blokkszerkesztő vagy Bricks. A példában a szűrés a „plugin” és a „topics” paraméter szerint megy.

### A végpont felvétele

1. A **JetEngine → JetEngine → REST API-végpontok** fülön kattints az **Új végpont** gombra.
2. Add meg a **Nevet** és az **API Endpoint URL**-t, állítsd be az **Items path** mezőt, és kattints a **Send Request** gombra.
3. Ha a **Status** mezőben megjelenik a zöld **Connected** felirat, kattints a **Save** gombra.

### A szűrők

1. A **Smart Filters → Add New** oldalon add meg a szűrő nevét, és válaszd ki a típusát: **Select**, **Radio**, **Visual** vagy **Checkboxes list**.
2. A **Data Source** legyen az az adatforrás, amelyből a szűrő opciói jönnek. A példában ez a **JetEngine Glossary**, amelyben a bővítmények listája van (lásd [Szószedetek](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-szojegyzekek/)), a **Select glossary** mezőben pedig a megfelelő szószedet.
3. A **Query Variable** mezőnél kattints az adatbázis gombra, válaszd a **Plain Query Variable** elemet, és a **Variable Name** legyen az API paramétere (például `plugin`).
4. Ugyanígy hozd létre a második szűrőt a másik paraméterhez (például `topics`).

### A REST API lekérdezés

1. A **JetEngine → Lekérdezéskészítő → Új hozzáadása** oldalon add meg a nevet, a **Lekérdezés típusa** legyen **REST API lekérdezés**.
2. A **From Endpoint** listában válaszd ki a végpontot.
3. A **Query** részben kattints az **Add new** gombra, és vegyél fel két feltételt. A **Key** mezőbe a szűrt paraméter neve kerül (itt „plugin” és „topics”).
4. A **Value** mezőnél kattints az adatbázis ikonra, és válaszd a **JetSmartFilters Query** makrót. A **Type** legyen **Plain Query Var**, a **Variable Name** egyezzen a szűrő **Query Variable** mezőjével, a **Result Format** pedig **Plain**. Kattints az **Apply** gombra.
5. A második feltételt ugyanígy állítsd be, majd mentsd a lekérdezést.

### A listázási sablon

1. A **JetEngine → Listázások/komponensek** oldalon az **Új elem hozzáadása** gombbal hozz létre sablont: a **Listing source** legyen **Query Builder**, a **Query** a most létrehozott lekérdezés, és válaszd ki a nézetet (Elementor, Bricks, Timber/Twig vagy Blocks).
2. A **Dynamic Field** widgetnél a **Source** legyen **Post/Term/User/Object Data**, és az **Object Field** listában a **REST API: (a végpont neve)** szakaszból válaszd ki a mezőket.
3. Ha a forrás szószedet, a mező az értéket mutatja. A címkék kiírásához kapcsold be a **Filter field output** kapcsolót, válaszd a **Get labels by glossary data** visszahívást, és a **Get labels by glossary** listában a megfelelő szószedetet.

A Dynamic Field kimenetét a JetEngine a `wp_kses_post()` függvénnyel tisztítja, ezért a REST API-n érkező képek nem biztos, hogy megjelennek. Ez védi az oldalt a káros kódtól (például egy rosszindulatú felhasználó által beküldött JavaScripttől). Ha biztos vagy benne, hogy az adott esetben nincs biztonsági kockázat, a tisztítás kikapcsolható: tölts be egy erre való kódrészletet (a téma szerkesztőjében vagy kódrészlet-bővítménnyel), majd a kívánt **Dynamic Field** **Advanced** fülén a **CSS Classes** mezőbe írd: `disable-sanitize`. Lásd még [Tisztítás kikapcsolása](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-szanitizalas-kikapcsolasa/).

### Az oldal összeállítása

1. Nyisd meg az oldalt vagy sablont a szerkesztőben.
2. Add hozzá a **Listing Grid** widgetet a sablonnal, és két szűrőt; mindkettőnél a **This filter for** (a szűrő célja) legyen **JetEngine**.
3. Mentsd, majd a frontenden próbáld ki a szűrőket: a lista a kiválasztott paraméterek szerint szűkül.