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

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

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.