# REST API elemek szűrése

> REST API végpont elemeinek szűrése több paraméter szerint JetSmartFilters szűrőkkel és a JetSmartFilters Query makróval.

A JetEngine REST API lekérdezésével kapott elemeket is szűrheted a JetSmartFilters szűrőivel. Ehhez egy **REST API Query** típusú lekérdezés kell a **JetSmartFilters Query** makróval, egy arra épülő listing sablon, valamint a Listing Grid és a szűrők az oldalon.

## Követelmények

- Elementor (ingyenes), Gutenberg vagy Bricks.
- JetSmartFilters és JetEngine aktív, a JetEngine **Rest API Listings** modulja bekapcsolva.

A példában egy végpont elemeit a „plugin” és a „topics” paraméter szerint szűrjük.

## A REST API végpont regisztrálása

1. Nyisd meg a **JetEngine → JetEngine → REST API Endpoints** oldalt, és kattints a **+ New Endpoint** gombra.
2. Add meg a nevet és a végpont URL-jét, állítsd be az **Items path** értékét.
3. A **Send Request** gombbal próbáld ki a kapcsolatot. Ha a **Status** mezőben zöld **Connected** felirat jelenik meg, mentsd a végpontot a **Save** gombbal.

## A szűrők

1. Az **Intelligens szűrők → Új hozzáadása** oldalon add meg a nevet, és válaszd ki a szűrő típusát: **Kiválasztás**, **Választógomb**, **Vizuális** vagy **Jelölőnégyzetek listája**.
2. Az **Adatforrás** mezőben azt a forrást válaszd, amelyből az opciók jönnek. A példában a JetEngine-szójegyzék szolgál: elkészítettük a bővítmények listáját szójegyzékként, és a **Szójegyzék kiválasztása** listában azt jelöltük ki. Bármilyen más, az igényeidnek megfelelő forrás is jó.
3. A **Lekérdezési változó** mellett kattints az adatbázis ikonra, és válaszd a **Plain Query Variable** lehetőséget. A **Variable Name** legyen a REST API paraméter neve (a példában „plugin”).
4. Készíts hasonló módon egy második szűrőt a másik paraméterhez („topics”).

## A REST API Query

1. Nyisd meg a **JetEngine → Query Builder → Add New** oldalt.
2. Add meg a nevet, és a **Query Type** legyen **REST API Query**.
3. A **REST API Query** szakasz **From Endpoint** listájában válaszd ki a végpontot.
4. A **Query** szakaszban az **Add new** gombbal vegyél fel két feltételt (clause).
5. A **Key** mezőbe írd a szűrendő paraméter nevét („plugin”, illetve „topics”).
6. 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** pontosan az, amit a szűrő **Lekérdezési változó** mezőjében megadtál, a **Result Format** pedig **Plain**.
7. Mentsd a feltételt az **Apply** gombbal, és vedd fel ugyanígy a másodikat.
8. Mentsd a lekérdezést az **Add Query** vagy **Update Query** gombbal.

## A listing sablon

1. Nyisd meg a **JetEngine → Listings/Components** oldalt, és kattints az **Add New Item** gombra.
2. A **Setup Listing Item** ablakban a **Listing source** legyen **Query Builder**, a **Query** mezőben válaszd ki az imént készített lekérdezést, add meg a **Listing item name** értékét, és válaszd ki a **Listing view** típusát (**Elementor**, **Bricks**, **Timber/Twig** vagy **Blocks (Gutenberg)**).
3. Kattints a **Create Listing Item** gombra.
4. A szerkesztőben állítsd össze az elrendezést a dinamikus widgetekkel. Dinamikus mezőnél (**Dynamic Field**) a **Source** legyen **Post/Term/User/Object Data**, az **Object Field** listában pedig a „REST API: (a végpont neve)” csoportból válaszd ki a mezőket.
5. Mentsd a sablont.

Ha a mező a szójegyzék értékeit tartalmazza, a dinamikus mező az értéket mutatja. A felirat megjelenítéséhez kapcsold be a **Filter field output** kapcsolót, válaszd a **Get labels by glossary data** visszahívást (callback), és a **Get labels by glossary** listában jelöld ki a szójegyzéket.

Biztonsági megjegyzés a képekhez: a JetEngine a dinamikus mező kimenetét a `wp_kses_post()` függvénnyel tisztítja, ezért a REST API végponton át érkező képek nem biztos, hogy megjelennek. Ez védi az oldalt a káros kódoktól, például a rosszindulatú felhasználók által beszúrt JavaScripttől. Ha biztos vagy abban, hogy az adott esetben ez nem kockázat, a tisztítást kikapcsolhatod egy kódrészlettel (a sablon `functions.php` fájljában vagy egy kódrészlet-bővítménnyel), majd a dinamikus mező **Advanced** fülén a **CSS Classes** mezőbe írd a `disable-sanitize` osztályt.

## Az oldalon

1. Nyiss meg egy oldalt vagy sablont a szerkesztőben.
2. Tedd rá a **Listing Grid** widgetet a kész listinggel, és két szűrőt. Mindkét szűrőn a **This filter for** értéke **JetEngine** legyen.
3. Mentsd az oldalt, és próbáld ki a nyilvános oldalon: a szűrők kiválasztott értékei a REST API paramétereiként kerülnek a lekérdezésbe, és a lista a megfelelő elemekre szűkül.