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

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.

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), 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.

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.