# Dinamikus vásárlási értesítés AI-val generált SQL-lekérdezéssel

> WooCommerce-értesítés az utolsó vásárlásról: SQL-lekérdezés generálása az AI-val a Lekérdezéskészítőben, listázási sablon és felugró ablak.

Ebben a példában az **SQL/AI Query** típusú lekérdezést az AI-val generálod, és vele megmutatod a látogatóknak a webhely legutóbbi vásárlását: magát a terméket és azt, mikor teljesült a rendelés.

## Követelmények

- az Elementor (az ingyenes változat elég);
- a WooCommerce telepítve és aktiválva, néhány létrehozott termékkel;
- a JetEngine (legalább 3.2.0-s verzió) telepítve és aktiválva;
- a JetPopup telepítve és aktiválva.

Mielőtt nekilátsz, győződj meg róla, hogy a webhelyen van néhány teljesített rendelés.

## Az SQL-lekérdezés létrehozása

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra. Az űrlapon a **Lekérdezés típusa** lista található (lásd a [Makrók a Lekérdezéskészítőben](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-makrok-lekerdezeskeszitoben/) fejezet képét).
2. Adj nevet a lekérdezésnek, és a típus legyen **SQL/AI Query**.
3. Kapcsold be az **Advanced/AI mode** kapcsolót. A beállítások ekkor mások lesznek, mint a kézi SQL-íráskor.
4. Az AI használatához kattints a varázspálca ikonra: megjelenik az SQL-lekérdezés generálásának ablaka.
5. A **Describe your query** szövegmezőbe írd le, mit szeretnél. A példában ez volt a leírás: „WooCommerce. Select all product IDs from latest order. Add to the response product_ID and order_date. Limit 1.” A lényeg, hogy a kérést helyesen fogalmazd meg, hogy az AI megértse.
6. Kattints a **Generate query** gombra, ellenőrizd a generált lekérdezést, és kattints a **Use this query** gombra. A lekérdezés megjelenik az **SQL Query** mezőben.
7. Az oldal tetején kapcsold be a **Preview results** kapcsolót. Az előnézeti ablak alján látszanak az utolsó rendelés adatai: az `order_item_name` megegyezik a webhely legutóbbi rendelésének termékével.
8. Kattints az **Add/Update Query** gombra.

**Fontos:** az AI-kérések száma korlátozott. Az élethosszig tartó előfizetési csomaggal havonta 30, más előfizetéssel havonta 5 kérést indíthatsz.

## A listázási sablon

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új hozzáadása** gombra.
2. A **Setup Listing Item** ablakban válaszd a **Query Builder** forrást, és a lekérdezést. Add meg a **Listing item name** értéket, a **Listing view** legyen **Elementor**, majd kattints a **Create Listing Item** gombra.
3. A „Valaki vásárolt” felirathoz használd a **Header** (címsor) widgetet. A rendelés adataihoz a **Dynamic Field** widgetet használd (lásd a [Dynamic Field](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-dinamikus-mezo/) fejezetet).
4. A termék neve: a **Source** legyen **Post/Term/User/Object Data**, az **Object Field** pedig `order_item_name`.
5. A vásárlás óta eltelt idő: a **Source** legyen **Post/Term/User/Object Data**, az **Object Field** `post_date`. Kapcsold be a **Filter field output** kapcsolót, és a **Callback** legyen **Human readable time difference**. Használhatod a **Customize field output** lehetőséget is.
6. A termék bélyegképe: a **Source** legyen **Post/Term/User/Object Data**, az **Object Field** `meta_value`. Kapcsold be a **Filter field output** kapcsolót, és a **Callback** legyen **Get post/page thumbnail**.
7. Kattints az **Update** gombra.

## A felugró ablak

1. Nyisd meg a **JetPopup → Create New Popup** oldalt.
2. A **Create a Popup** ablakban válaszd az **Elementor** tartalomtípust és a **Bordering** előbeállítást, majd kattints a **Create** gombra.
3. Húzd be a **Listing Grid** widgetet a konténerbe. A listában válaszd ki a listázást, a **Columns Number** és a **Post Number** értéke legyen 1.
4. Kattints a **Settings** (beállítások) ikonra, és a **Settings** fülön szabd testre a felugró ablakot. A példában az **On page load(s)** nyitási eseményt használtuk: az oldal betöltése után késleltetéssel nyílik meg az ablak.
5. A **Display Conditions** mellett kattints az **Edit** gombra, és állítsd be a megjelenési feltételeket. A példában: **Include**, **Entire**, **Entire Site**. Kattints a **Save Conditions** gombra.
6. A **Style** fülön testre szabhatod a felugró ablak megjelenését: a példában a **Popup Container** fülön módosítottuk a **Width** értékét, a **Close Button** fülön az **Icon Transform** beállítással a bezáró gomb helyzetét, a **Popup Overlay** fülön pedig kikapcsoltuk az **Use Overlay** opciót (bekapcsolva a felugró ablakon kívüli képernyőrészt sötétíti).
7. Kattints az **Update** gombra.

A frontenden a feltétel szerint a felugró ablak a teljes webhelyen megnyílik, a nyitási esemény beállításai szerint. Ha új vásárlás történik, az értesítés azonnal megváltozik.