# A komponens környezete (Component Context)

> Egy komponens újrahasználata különböző oldalakon: felhasználói adatokat megjelenítő komponens listában, bejegyzésoldalon és a nyilvános profiloldalon, Bricksben.

A **Component Context** beállítás azt dönti el, melyik objektum adatait jeleníti meg az egész komponens. Így ugyanazt a komponenst használhatod különböző oldalakon és sablonokban, és nem kell mindegyikhez külön másolatot csinálnod. A példa egy „Felhasználói adatok” komponens, amely felhasználó adatait mutatja, Bricksben.

Előfeltétel: Elementor (az ingyenes változat elég), a blokkszerkesztő vagy a Bricks, és az aktív JetEngine.

## A komponens felépítése

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új komponens hozzáadása** gombra.
2. A **Komponens neve** legyen „Felhasználói adatok”, a **Komponens nézete** a **Bricks**, majd kattints a **Komponens létrehozása** gombra.
3. Az első oszlopba tegyél egy **Dynamic Image** elemet, a forrása legyen a „User avatar” **Média** típusú metamező, a **Dynamic image size** értéke **Bélyegkép** (Thumbnail).
4. A második oszlopba tegyél három **Dynamic Field** elemet. A **Forrás** mindhárom elemnél **Post/Term/User/Object Data**, az **Objektummező** értéke rendre **Login**, **ID** és **E-mail**.
5. Mindhárom **Dynamic Field** elemnél kapcsold be a **A mező kimenetének testreszabása** kapcsolót, és add meg a mező formátumát, például `E-mail: %s`.
6. Mentsd a komponens beállításait.

A komponens környezetét még nem adtad meg, ezért felhasználókra vonatkozóan alapból mindig az aktuális felhasználó adatait kéri le. A környezetet akkor állítod be, amikor a komponenst egy oldalra vagy sablonba helyezed. A felhasználói metamezők és az avatar beállításáról a [Metaboxok felhasználókhoz](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-felhasznalok/) fejezetben olvashatsz.

## Komponens a felhasználók listájában

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra.
2. A **Lista forrása** legyen **Felhasználók**, add meg a **Listázási elem nevét**, a **Listázási nézet** pedig legyen **Bricks**. Kattints a **Listázási elem létrehozása** gombra.
3. A szerkesztő bal oldali paneljén keresd meg a komponenst a nevével, és tedd a szerkesztőoldalra.
4. Az **Általános** fülön a **Component Context** értéke legyen **Current User (for current scope)**. Mentsd a sablon beállításait.
5. Hozz létre egy új oldalt (vagy nyiss meg egy meglévőt), és kattints a **EDIT WITH BRICKS** gombra.
6. Húzz az oldalra egy **Listing Grid** elemet (widgetet vagy blokkot, a szerkesztőtől függően), és válaszd ki az előbb létrehozott listázási elemet. Mentsd az oldalt.

Az oldalon a lista minden felhasználónál a saját adatait mutatja.

## Komponens a bejegyzésoldalon vagy bejegyzéslistában

Ha egy szerzőkártyát akarsz a bejegyzés oldalára vagy a bejegyzések listájába tenni, a **Current Post Author** környezetet használd.

1. Nyisd meg a **Bricks → Templates** oldalt, és kattints az **Edit with Bricks** gombra az elkészített egyedi bejegyzés sablon alatt.
2. A bal oldali panelen keresd meg a komponenst, és tedd a sablonra.
3. A **Component Context** alapértéke a **Default Object**, ami az aktuális felhasználót mutatja. Állítsd át **Current Post Author** értékre: ettől kezdve a bejegyzés szerzőjének adatai jelennek meg.
4. Mentsd a sablont.

## Komponens a nyilvános profiloldalon

A nyilvános felhasználói oldal beállítását a [Egyedi felhasználói oldal](https://hub.hellowp.io/hu/plugins/jet-engine/profil-egyedi-felhasznaloi-oldal/) fejezet írja le.

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra.
2. A **Lista forrása** legyen **Felhasználók**, a **Listázási elem neve** például „Profil adatai”, a **Listázási nézet** pedig **Bricks**. Kattints a **Listázási elem létrehozása** gombra.
3. Tedd a komponenst a szerkesztőoldalra, és a **Component Context** értéke legyen **Queried User**. Mentsd a beállításokat.
4. Nyisd meg a **Profile Builder → Felhasználói oldal** fület, és kattints az **+ Add New Subpage** gombra.
5. Az új ismétlő elemben add meg a **Címet** és a **Slugot**, a **Sablon** listában pedig válaszd ki az új listázási elemet.
6. Kattints a **Mentés** gombra.

Egy tetszőleges felhasználó profiloldalát megnyitva a felhasználó saját adatait látod.