# Komponensek használata a Query Loopban és a Listing Gridben

> Hogyan teszel JetEngine-komponenst a Bricks Query Loopjába vagy a Listing Gridbe, és hogyan állítod be a komponens környezetét (Context).

A JetEngine komponensei újrahasználható, saját widgetek, elemek vagy blokkok, amelyeket különböző oldalakon és sablonokban is elhelyezhetsz. A komponenst a JetEngine **Listing Grid** elemébe, widgetjébe vagy blokkjába, illetve a Bricks téma **Query Loopjába** is beteheted.

Előfeltétel: Elementor (az ingyenes változat elég), a blokkszerkesztő vagy Bricks, és az aktív JetEngine. A példa Bricksben készül.

A példában egy felhasználói adatokat mutató komponenst teszünk a bejegyzések Query Loopjába vagy **Listing Gridjébe**. A bejegyzések lehetnek alap WordPress-bejegyzések vagy egyéni bejegyzéstípus elemei. A komponens **Context** (környezet) beállításával minden bejegyzésnél a szerzőjének adatai jelennek meg.

## Komponens létrehozása

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új komponens hozzáadása** gombra.
2. A beállító ablakban add meg a komponens nevét (például „Felhasználói adatok”), és a **Komponens nézete** listában válaszd ki a szerkesztőt: **Elementor**, **Bricks**, **Timber/Twig** vagy **Blokkok (Gutenberg)**. A példában a **Bricks** a választott nézet.
3. Kattints a **Komponens létrehozása** gombra.
4. A szerkesztőoldalon helyezz el három **Dynamic Field** elemet. Mindháromnál a forrás (**Source**) legyen **Post/Term/User/Object Data**, az objektummező (**Object field**) pedig sorban **Login**, **ID** és **Email**.
5. Mindhárom **Dynamic Field** elemnél kapcsold be a **Customize field output** beállítást, és add meg a **Field format** értékét (például `Email: %s`).
6. Mentsd a komponens beállításait.

A felhasználói metamezők felvételéről és a felhasználói adatok megjelenítéséről a [Listázási sablon felhasználókhoz](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-felhasznalok-sablon/) fejezetben olvashatsz. A komponens tartalmi és stílusvezérlőit a komponensek áttekintése írja le.

## Komponens a Query Loopban

1. Nyiss meg egy új vagy meglévő oldalt a Bricks szerkesztővel (**Oldalak** menü).
2. A „+” ikonnal adj hozzá egy új szakaszt, és a jobb oldali **Structure** fülön kattints a **Container** elemre.
3. A **CONTENT** fülön kapcsold be a **Use query loop** kapcsolót, és kattints a „végtelen” ikonra.
4. A megjelenő ablakban módosíthatod a lekérdezést. A példában a **Type** értéke **Posts**, a bejegyzéstípus **Posts**; más forrást is választhatsz.
5. Az ablakon kívülre kattintva zárd be, és töltsd meg a konténert a kívánt tartalommal, például dinamikus elemekkel: **Dynamic Field** (**Post/Term/User/Object Data** forrással, **Title** és **Content** mezővel) és **Dynamic Image** (**Post thumbnail** forrással).
6. A bal oldali panelen keresd meg a létrehozott komponenst a neve alapján, és húzd az oldalra.
7. A **GENERAL** fülön a **Component Context** mezőnél válaszd a **Current Post Author** (a bejegyzés szerzője) lehetőséget. A Query Loop első eleménél a szerkesztőben a jelenlegi felhasználó adatai látszanak a szerző helyett, de a frontenden már helyesen működik.
8. Mentsd az oldalt, és nyisd meg a frontenden.

## Komponens a Listing Gridben

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra.
2. Az ablakban válaszd a **Bejegyzések** listaforrást és a bejegyzéstípust, add meg a **Listázási elem neve** mezőt, és válaszd ki a **Listázási nézet** értékét (például **Bricks**).
3. Kattints a **Listázási elem létrehozása** gombra.
4. A szerkesztőben helyezz el dinamikus elemeket: **Dynamic Field** (**Post/Term/User/Object Data** forrással, **Title** és **Content** mezővel) és **Dynamic Image** (**Post thumbnail**).
5. A bal oldali panelen keresd meg a komponenst, és húzd a sablonra.
6. A **General** fülön a **Component Context** mezőnél válaszd a **Current Post Author** lehetőséget. A szerkesztőben a komponens itt is a jelenlegi felhasználó adatait mutatja, a **Listing Grid** oldalán azonban a környezet a várt módon működik.
7. Mentsd a sablont.
8. Hozz létre egy oldalt (vagy szerkessz egy meglévőt), kattints az **Edit with Bricks** gombra, és húzd be a **Listing Grid** elemet (Elementorban a widgetet, a blokkszerkesztőben a blokkot). Válaszd ki az imént készített sablont, szabd testre, és mentsd.