# Lista szűrőkkel és lapozással AI-építővel (Bolt, Lovable)

> WordPress-adatok megjelenítése a Bolt és a Lovable AI-építővel: REST API-végpont, a prompt felépítése, szűrők, egyedi oldalak és lapozás.

A JetEngine háttérként, a Bolt AI-építő előtérként használható: így oldalszerkesztő nélkül is létrehozhatsz katalógusszerű weboldalt. A példában bögréket mutatunk be termékként, a bögrék egyéni tartalomtípus (CCT) elemei. Előfeltétel a Bolt és az aktív JetEngine.

A tartalom a Lekérdezéskészítővel készített végpontokon át is megjeleníthető, de ez a fejezet a CCT változatot írja le.

## A CCT előkészítése

1. Hozz létre egyéni tartalomtípust, és vegyél fel elemeket (lásd [Egyéni tartalomtípusok áttekintése](https://hub.hellowp.io/hu/plugins/jet-engine/cct-attekintes/)).
2. Ha a CCT-ben **Média** mező van, a **Value format** (érték formátuma) legyen **Media URL**.
3. A CCT általános beállításai között kapcsold be a **Register get items/item REST API Endpoint** kapcsolót.
4. Az **Endpoint URL** mezőben megjelenő címeket add meg a promptban. Az első az összes elemet adja a listázáshoz, a második egyetlen elemet az egyedi oldalhoz.
5. Kattints a **Parameters Overview** hivatkozásra, és az ablak teljes tartalmát illeszd a promptba: így az AI-építő jobban érti az adatszerkezetet, mert ezek a paraméterek mondják meg, hogyan lehet a mezők és a tartalomtípus adatait kérni vagy szűrni.

## A prompt felépítése

Egy jó prompt tartalmazza:

- **A projekt leírását**: a webhely típusa, célja, fő funkciói, hasonló webhelyek példái.
- **Az adatforrást**: a REST API használata és a címek. A visszaadott adatok leírása; a CCT-nél a metamezők listája.
- **A szűrőket**: milyen szűrők kellenek és milyen típusúak (jelölőnégyzet, választógomb, legördülő lista), a lehetséges értékekkel, vagy hogy az értékek dinamikusan jönnek az API-ból.
- **Az egyedi oldalakat**: ha kellenek, írd le, és add meg a végpont URL-jét.

Példa prompt:

```
I want to build a website that showcases mugs as products.

You can grab the data from the API here:
https://example.com/wp-json/jet-cct/mugs

The website should display a listing of mugs with filters for material (ceramic, glass, porcelain) and price range.

Here is a description of all API response props (which also can be used as request parameters in _filters):
_ID - Item ID;
mug_name - Mug name;
mug_desc - Mug desc;
mug_image - Mug image;
product_url - Product URL;
regular_price - Regular price;
mug_materials - Mug materials;
cct_author_id - Item Author;
cct_created - Created Date;
cct_modified - Modified Date;
cct_status - Status;
_cct_search - Search string, type: string;
_cct_search_by - Comma separated field names list to search only by these fields, type: string;
_limit - Items limit, type: number;
_offset - Items offset, type: number;
_orderby - Order items by field, type: string;
_order - Order - asc or desc, type: string;
_ordertype - Order value type - integer, float, timestamp, date, string, type: string;
_filters - JSON-encoded filters string, type: string;

Request URL with parameters example:
https://example.com/wp-json/jet-cct/mugs/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer

When displaying the price, make sure to cast it to a number before formatting, for example:
Number(mug.regular_price).toFixed(2)
```

Az ár **Szám** mezőben van, de az API szöveggé alakítja, ezért az új weboldal nem kapja meg számként. Ezt a promptban kell jelezni: az ár számmá alakítását a példa utolsó sora kéri.

Egyedi oldalhoz add hozzá ezt a sort a prompthoz, ahol az `{_ID}` az elem azonosítóját jelzi:

```
To create a single page for a website, use the API endpoint:
https://example.com/wp-json/jet-cct/websites/{_ID}. Replace {_ID} with the actual item ID to retrieve the data for that specific website.
```

A prompt beírása után a Bolt elkészíti a listázást és a szűrőket. Ellenőrizd a szűrők működését.

## Lapozás hozzáadása

A CCT beépített `_limit` és `_offset` paramétereit kell a promptban megadni. Az új promptnak három dolgot kell tartalmaznia:

- **Elemek száma oldalanként**: a `_limit` paraméter az API-kérésben.
- **Oldalváltás**: itt az `_offset` paraméter.
- **Az összes elem száma**: az API-válasz fejlécéből. Általában a `Jet-Query-Total` fejlécet használjuk, bizonyos esetekben a `Jet-Query-Pages` is jó. Ezekből az AI kiszámolja az oldalak számát.

Példa prompt:

```
Also, let's add pagination. You can retrieve the total results count from the API response header Jet-Query-Total. Also API supports the `_offset` parameter to change the page. Set 6 items per page using `_limit` API parameter.
```

Ennek beírása után a generált weboldal listázása lapozót kap.

## Lovable AI-építő és Lekérdezéskészítős végpont

Ugyanez a megoldás a Lovable AI-építővel is működik. Előfeltétel a Lovable-fiók, az aktív JetEngine és egy létrehozott egyéni tartalomtípus. Itt a végpontot nem a CCT beállításai, hanem a **Lekérdezéskészítő** adja, ezért a szűrők és a lapozás is a lekérdezésben állítható.

### A lekérdezés előkészítése

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra.
2. Add meg a **Nevet**, a **Lekérdezés típusa** legyen **Egyéni tartalomtípus-lekérdezés**.
3. Kapcsold be a **REST API-végpont regisztrálása** kapcsolót, és add meg a végpont névterét és útvonalát. Az így kapott **REST API Endpoint URL**-t jegyezd fel, a promptban szükség lesz rá.

![Az Új lekérdezés hozzáadása oldal Egyéni tartalomtípus-lekérdezés típussal, a REST API-végpont regisztrálása kapcsolóval](./kepek/listazas-2-cct-lekerdezes-rest.webp)

*Az Új lekérdezés hozzáadása oldal Egyéni tartalomtípus-lekérdezés típussal, a REST API-végpont regisztrálása kapcsolóval* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

A képen az **Általános beállítások** között a **REST API-végpont regisztrálása** kapcsoló látszik, ezt kell bekapcsolnod.

### Szűrőparaméterek a lekérdezésben

A **Query Arguments** (lekérdezési argumentumok) közé azokat a paramétereket vedd fel, amelyek szerint a lista szűrhető.

- Többválasztós szűrőhöz (például „type” és „format”) a **Default Value** oszlopba több értéket írj.
- Ársávhoz két paraméter kell: „price_from” és „price_to”.
- Dátumszűrőhöz szintén kettő: „date_from” és „date_to”.

Ezután a lekérdezés lapján, a **Query** részben kattints az **Add New** gombra minden paraméterhez:

1. A **Field** mezőben add meg azt a mezőt, amelyhez a paraméter tartozik.
2. A **Compare** értéke többválasztós mezőnél **In the list**. Ársávnál az alsó határhoz **Greater or equal (>=)**, a felsőhöz **Less or equal (<=)**.
3. A **Value** mezőnél kattints a dinamikus címke ikonra, és válaszd a **Query Variable** elemet. A **Variable Name** egyezzen a megfelelő lekérdezési argumentum nevével.
4. Kapcsold be az **Exclude this clause from the query if the dynamic value is empty** lehetőséget, hogy az üres szűrő ne korlátozza az eredményt.
5. Mentsd a lekérdezést.

Jegyezd fel a végpont URL-jét, a felvett paraméterek listáját és a paraméterekkel kiegészített példa URL-t is: ezek a promptba kerülnek.

### A prompt Lovable-hoz

A prompt felépítése ugyanaz, mint fent: a webhely típusa és célja, az adatforrás URL-je (REST API), a visszaadott adatok leírása, a szűrők és az egyedi oldal végpontja. Ha a lekérdezés az adatforrás, az **Eredmények előnézete** egyik elemét kimásolhatod a promptba, hogy az AI lássa az adatszerkezetet; CCT esetén a metamezők listája elég. Szűrőknél nevezd meg a típust (legördülő lista, ársáv, választógomb) és a lehetséges értékeket; dinamikus értékeket az API-ból is lekérhet. A prompt egy példa, a céljaidhoz igazítható. Beírása után kattints a nyíl alakú ikonra vagy nyomj **Entert**.

Ha minden jól megy, a lista megjelenik a szűrőkkel az oldal szélén, és a szűrők a megfelelő találatokat adják.

### Lapozás a Lekérdezéskészítős végponttal

A lapozás módja a lekérdezés típusától függ. Egyszerű CCT-végpontnál (a CCT saját végpontja) a beépített `_limit` és `_offset` paraméter elég, ezt kell megemlíteni a promptban. Bejegyzés-lekérdezésnél elég az oldalszámot átadni, a CCT-lekérdezésnél az `offset` paraméterrel dolgozol.

A CCT-lekérdezés lapozása:

1. Vedd fel az `offset` paramétert a **Query Arguments** közé.
2. Görgess lejjebb, add meg a **Content Type** mezőt, a **Number** mezőbe pedig fix számot írj: ez adja meg az oldalankénti elemszámot.
3. Az **Offset** mezőbe a paramétert makróval add át. Ehhez nincs gomb, a makrót kézzel kell beírnod:

```
%query_var|offset%
```

Az `offset` itt a korábban felvett lekérdezési argumentum neve.

A promptban akkor is írd le az oldalankénti elemszámot, ha a lekérdezésben már beállítottad. A teljes elemszámot az API-válasz `Jet-Query-Total` fejléce adja; bejegyzés-lekérdezésnél, ahol oldalszámot adsz át, a `Jet-Query-Pages` is használható. Példa prompt a Lekérdezéskészítős forráshoz:

```
Also, let's add pagination. You can get the total results count from the API response header Jet-Query-Total. Also API supports the `offset` parameter to change the page. I've already set up the API on the server side to return 6 items per page.
```

A közvetlen CCT-végpontnál a promptban a `_limit` paraméter adja az oldalankénti elemszámot, az `_offset` az oldalváltást:

```
Also, let's add pagination. You can get the total results count from the API response header Jet-Query-Total. Also API supports the `_offset` parameter to change the page. Set 6 items per page using `_limit` API parameter.
```

A generált oldalon a lista lapozóval jelenik meg, és az oldalak között lehet lépni.