# Ismétlő mezők használata

> Ismétlő mező megjelenítése listázásként, beágyazott ismétlők felvétele és lekérdezése, valamint az ismétlő elemeinek mentése külön mezőkként.

Az **Ismétlő** mezőtípus (a beállításait a [Metamező-típusok](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-mezotipusok/) fejezet írja le) többértékű adatra való: képgaléria, szolgáltatások listája, előadók, menüpontok. Itt azt találod, hogyan jelenítheted meg az ismétlő elemeit rácsként, hogyan építhetsz egymásba két ismétlőt, és hogyan kérdezhetsz le bejegyzéseket az ismétlő almezői alapján.

Az ismétlő mezőt a JetEngine-nel vagy az ACF-fel is létrehozhatod. Felvehető egyedi bejegyzéstípusokhoz, egyedi tartalomtípusokhoz (CCT), egyedi taxonómiákhoz, metaboxokhoz és beállítási oldalakhoz.

## Listázási sablon ismétlő mezőből

A példában egy „Orvosi konferenciák” bejegyzéstípushoz tartozik egy „Előadók” ismétlő mező, négy almezővel: **Előadó neve**, **Szakterület** és **Előadás témája** (mind **Szöveg**), valamint **Profilkép** (**Média**).

### Az ismétlő mező felvétele és kitöltése

1. Nyisd meg a bejegyzéstípust (**JetEngine → Bejegyzéstípusok**), és a **Metamezők** részben kattints az **Új metamező** gombra.
2. Add meg a **Címke** és a **Név/ID** értéket, a **Mező típusa** legyen **Ismétlő**.
3. Az ismétlő belsejében az **Új metamező** gombbal vedd fel az almezőket.
4. Mentsd a bejegyzéstípust.
5. Szerkeszd a bejegyzéseket, töltsd ki az ismétlő elemeit, és frissítsd a bejegyzést.

### A listázási elem létrehozása

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új elem hozzáadása** gombra.
2. A **Listázás forrása** mezőben válaszd az **Ismétlő mező** értéket, és add meg a beállításokat:

| Beállítás | Mit csinál |
| --- | --- |
| **Bejegyzéstípusból** | Az a bejegyzéstípus, amelyhez az ismétlő mezőt felvetted. |
| **Ismétlő forrása** | **JetEngine** vagy **ACF**, aszerint, hogy melyikkel hoztad létre a mezőt. |
| **Ismétlő mező** | Az ismétlő mező neve. |
| **Ismétlő opció** | Ha az ismétlő egy beállítási oldalhoz tartozik, itt választod ki. |
| **Listázási elem neve** | A sablon neve. |
| **Listázás nézete** | A szerkesztő: Elementor, Bricks, Timber/Twig vagy blokkok (Gutenberg). |

3. A szerkesztőben dinamikus widgetekkel jeleníted meg az elemeket. Húzz be egy **Dynamic Field** widgetet, a **Forrás** mezőben válaszd az **Ismétlő mező** értéket, és az **Objektum mező / Meta mező / Ismétlő kulcs / Komponens tulajdonság / API tulajdonság útvonala** mezőbe írd az almező nevét. Minden almezőhöz másolj egy widgetet.
4. Ha szöveget szeretnél az érték elé vagy mögé, kapcsold be az **A mező kimenetének testreszabása** beállítást, és a **Mező formátuma** mezőben a `%s` helyére kerül az érték.
5. A **Média** almezőnél kapcsold be az **A mező kimenetének szűrése** beállítást, és a **Visszahívás** listában válaszd a **Get image by ID** értéket (kép lekérése azonosító alapján).
6. Tedd közzé a sablont.

### Megjelenítés az oldalon

A **Listing Grid** widget az ismétlő mezős sablonnal csak az egyedi bejegyzés oldalán jeleníthető meg. Nyisd meg az egyedi bejegyzés sablonját (JetThemeCore, Elementor Pro vagy hasonló), húzd be a **Listing Grid** widgetet, és válaszd ki az ismétlő sablonját. A bejegyzés ismétlő elemei rácsban jelennek meg.

## Az ismétlő mező létrehozása és megjelenítése Dynamic Repeaterrel

Az ismétlő akkor kell, ha egy adatból több is lehet, és darabszámuk bejegyzésenként más: például egy bejegyzésnek több szerzője van, mindegyiknek neve, vezetékneve és fotója. A **Dinamikus ismétlő** (Dynamic Repeater) widget vagy blokk jeleníti meg az ismétlő elemeit bejegyzéstípusoknál és taxonómiáknál.

### Az ismétlő felvétele

1. Nyisd meg a **JetEngine → Metaboxok** oldalt, és kattints az **Új hozzáadása** gombra.
2. Add meg a doboz címét, válaszd ki a **Meta doboz célja** értékét, és rendeld hozzá a kívánt bejegyzéstípushoz vagy taxonómiához. Görgess a **Metamezők** részig.
3. Kattints az **Új metamező** gombra. Add meg a **Címke** és a **Név/ID** értéket, a **Mező típusa** legyen **Ismétlő**.
4. Az **Új ismétlődő mező** gombbal vegyél fel almezőket: mindegyiknek adj **Címke** és **Név/ID** értéket, és válaszd ki a típusát (például képhez **Média**). Annyi almezőt veszel fel, amennyi kell.
5. Kattints a **Metabox hozzáadása** gombra.

Jegyezd meg az almezők neveit: a megjelenítésnél szükséged lesz rájuk.

A bejegyzés szerkesztőoldalán a tartalom alatt megjelenik az ismétlő. Töltsd ki az almezőket, és az **Elem hozzáadása** gombbal vegyél fel további elemeket. Végül kattints a **Frissítés** gombra.

### A Dinamikus ismétlő widget beállításai

Húzd be a **Dinamikus ismétlő** widgetet vagy blokkot az oldal sablonjába (Elementorban és a blokkszerkesztőben a beállítások ugyanazok). A **Forrás** listában válaszd ki az ismétlő mezőt, az **Elem formátuma** mezőbe pedig írd a makrókat (a `%almezo_neve%` formában), amelyek az elemek tartalmát adják.

| Beállítás | Mit csinál |
| --- | --- |
| **Elem HTML-címke** | Az elemek HTML-burkolója. A `tr` táblázatos, az `li` listás elrendezést ad. |
| **Elemek elválasztója** | Az elemek közé kerülő jel vagy szöveg. |
| **Before item markup** | Szöveg, amely minden elem előtt megjelenik. |
| **A tételek utáni jelölés** | Szöveg, amely minden elem után megjelenik. |
| **Számláló hozzáadása az ismétlődő tételekhez** | Bekapcsolva az elemek előtt sorszám látszik. |
| **Elrejtés, ha az érték üres** | Elrejti a mezőt, ha nincs érték. |

A megjelenést a **Stílus** (blokknál a **Blokk stílus**, ha telepítve van a JetStyleManager) részben állítod:

- **Általános**: az értékek **Iránya** (vízszintes vagy függőleges), az **Igazítás** (balra, középre, jobbra) és a tipográfia;
- **Elemek**: a **Rögzített elemméret**, valamint a szín, a keret, a belső és a külső margó a normál és a lebegő (hover) állapotra;
- **Elválasztó**: az elválasztó színe és margója.

Végül frissítsd a sablont.

## Beágyazott ismétlők

A beágyazott ismétlővel egy **Ismétlő** mezőbe egy másik **Ismétlő** mezőt teszel. A kapcsolódó adatok így egy értékben maradnak, és nem kell sok külön mezőbe szétszórni őket. A beágyazás egy szintet támogat: egy ismétlő belsejében lehet ismétlő, abban már nem.

Példák: rendezvény programja (napok, azon belül előadások), útitervek (helyszínek, azon belül tevékenységek), étlap (kategóriák, azon belül ételek), csapatlista (részlegek, azon belül munkatársak), tanfolyam (modulok, azon belül leckék), GYIK (témák, azon belül kérdések és válaszok).

A meglévő ismétlő mezők változatlanul működnek, a beágyazás használata nem kötelező.

### Beágyazott ismétlő felvétele

1. Nyisd meg a bejegyzéstípus, a taxonómia, a metabox, a beállítási oldal vagy más támogatott objektum mezőbeállításait.
2. Vegyél fel egy **Ismétlő** mezőt, például „Program” néven, és az almezői közé tedd például a „Nap” mezőt.
3. Az ismétlő almezőlistájában vegyél fel még egy mezőt, és állítsd a **Mező típusa** értékét **Ismétlő** típusra, például „Elemek” néven. Ennek almezői lehetnek az előadás címe, az előadó és a kezdési idő.
4. Mentsd a beállításokat.

![A Program ismétlő mező egy szöveges almezővel és egy beágyazott ismétlővel](./kepek/meta-mezok-beagyazott-ismetlo.webp)

*A Program ismétlő mező egy szöveges almezővel és egy beágyazott ismétlővel* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-meta&cpt_meta_action=add)

A képen a „Program” ismétlő belsejében a „Nap” szöveges almező és az „Elemek” nevű beágyazott ismétlő látszik. A mezők fa szerkezetben jelennek meg, így jól látszik, mi mihez tartozik.

A mezők nevének csak ugyanazon az ismétlő-szinten kell egyedinek lennie, tehát például a „Cím” név a szülő és a beágyazott ismétlőben is használható.

### Az elrendezés megadása

Minden ismétlőnek saját **Elrendezés** beállítása van:

- **Blokk**: a szokásos, kártyás szerkesztő, címekkel és összecsukható sorokkal;
- **Táblázat**: a közvetlen almezők oszlopokként jelennek meg, sok rövid, szerkezetes elemnél hasznos.

Az elrendezések keverhetők: a szülő lehet **Táblázat**, a beágyazott ismétlő **Blokk**, vagy fordítva. Az elrendezés csak a szerkesztést érinti, a mentett adatot nem módosítja és nem törli.

### Az értékek felvétele

A szerkesztőoldalon vegyél fel egy szülő elemet (például az 1. napot), majd az elemen belül kattints a beágyazott ismétlő hozzáadás gombjára (a felirat az ismétlő beállításától függ), és töltsd ki az adatokat. Vegyél fel újabb szülő elemeket is, mindegyikhez saját beágyazott elemekkel.

A műveletek mindig arra az ismétlő-részre vonatkoznak, amelyben dolgozol: az elemek átrendezése csak a kiválasztott szülő elemeit érinti. Egy szülő elem törlésekor a benne lévő minden beágyazott elem is törlődik. A szülő ismétlő marad az elsődlegesen mentett érték, külön mezőket nem kell kezelned.

### Megjelenítés Dynamic Repeaterrel

Ha tömör kimenet kell, és a HTML-formátumot közvetlenül a widgetben akarod megadni, használd a **Dinamikus ismétlő** widgetet. A példában a „Képzési program” bejegyzéstípus „Foglalkozás” ismétlő mezőjében van egy „Foglalkozás neve” szöveges almező, a „Foglalkozás részletei” beágyazott ismétlő („Előadó”, „Kezdési idő”, „Terem” almezőkkel) és az „Órarend” beágyazott ismétlő („Nap címe”, „Dátum” almezőkkel). A „Foglalkozás részletei” az **Elrendezés** szerint **Blokk**, az „Órarend” lehet **Table** is.

1. Hozz létre listázási sablont ahhoz a forráshoz, amelyhez az ismétlő mező tartozik (itt „Képzési program”), és húzd be a **Dinamikus ismétlő** widgetet.
2. A **Forrás** listában válaszd ki a szülő ismétlőt („Foglalkozás”).
3. Az **Elem formátuma** mezőbe írd a fő elem HTML-jét. A beágyazott ismétlők nevét is százalékjelek közé kell tenni:

```html
<div style="display: block; width: 100%;">
  <h3 style="margin: 0 15px 10px 0;">%foglalkozas_neve%</h3>
  %foglalkozas_reszletei%
  %orarend%
</div>
```

A `%foglalkozas_neve%` egy beágyazott elemet nem tartalmazó almező, a másik kettő beágyazott ismétlő, amelyek megjelenését a következő lépésben adod meg.

4. A **Nested Repeaters Templates** szakaszban kattints az **Elem hozzáadása** gombra: ez egy sablont vesz fel a beágyazott elemek megjelenítéséhez.
5. A **Nested Repeater Name** mezőbe írd a gyermek ismétlő nevét (itt `foglalkozas_reszletei`).
6. A **Nested Repeater Template** mezőben add meg a beágyazott elemek formátumát HTML-lel, százalékjeles mezőnevekkel és statikus szöveggel:

```html
<div style="margin-bottom: 4px;">
  <strong>Előadó:</strong> %eloado%<br>
  <strong>Kezdési idő:</strong> %kezdesi_ido%<br>
  <strong>Terem:</strong> %terem%
</div>
```

7. Megadhatod az **Elemek elválasztója** értéket a beágyazott elemek közé, és az **Empty output** mezőben azt a tartalmat, amely akkor jelenik meg, ha nincs beágyazott elem.
8. Ugyanígy vegyél fel sablont az `orarend` ismétlőhöz, itt például listaként:

```html
<ul>
<li>%nap_cime% - %datum%</li>
</ul>
```

### Megjelenítés Ismétlő lekérdezéssel és Listing Griddel

A beágyazott adatok teljes, formázott elrendezéséhez az **Ismétlő lekérdezés** és a **Listing Grid** együttes használata ajánlott. Elengedhetetlen, hogy előbb a gyermek (beágyazott) elemek sablonja készüljön el.

**1. A gyermek ismétlő lekérdezé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 **Ismétlő lekérdezés**, a forrás a **JetEngine meta mező**, majd válaszd ki a szülő ismétlőt („Program”).
3. A **Beágyazott útvonal** listában válaszd a gyermek ismétlőt, például a „Program > Elemek” értéket. Így csak a gyermek elemek jelennek meg.
4. Mentsd a lekérdezést.

**2. A gyermek elemek listázási sablonja**

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra.
2. A **Listázás forrása** legyen **Lekérdezéskészítő**, válaszd ki az előző lépés lekérdezését, add meg a sablon nevét, és válaszd ki a nézetet (például Elementor).
3. A sablonban **Dynamic Field** widgetekkel jeleníts meg minden mezőt: a **Forrás** legyen **Metaadat**, és az **Objektum mező / Meta mező / Ismétlő kulcs / Komponens tulajdonság / API tulajdonság útvonala** mezőbe a gyermek ismétlő almezőjének nevét írd.
4. Tedd közzé a sablont.

A szerkesztő előnézete nem mutatja a mezők értékét. Ez várt viselkedés, mert az előnézet a főismétlőből venne adatot, ott pedig nincs beállítva semmi. A frontenden rendben megjelenik.

**3. A szülő ismétlő lekérdezése és sablonja**

1. Hozz létre egy másik **Ismétlő lekérdezést** ugyanazzal a mezővel, a **Beágyazott útvonal** értéke maradjon a **Legfelső szintű sorok**.
2. Készíts hozzá lekérdezéskészítős listázási sablont. A **Dynamic Field** widgettel jelenítsd meg a szülő mezőit (például a dátumot, a **Dátum formázása** visszahívással a kívánt formátumban).
3. Ugyanebbe a sablonba húzz be egy **Listing Grid** widgetet, és válaszd ki benne a gyermek elemek sablonját.

Az előnézet itt sem mutatja a beágyazott listát, a frontenden viszont igen.

**4. Az oldalra helyezés**

Az egyedi bejegyzés sablonjában (vagy bármely oldalon, ahol a bejegyzés adatai elérhetők) húzz be egy **Listing Grid** widgetet, és válaszd ki a szülő elemek sablonját. A frontenden minden szülő elem (például nap) után a saját gyermek elemei (az aznapi előadások) látszanak, a sablonok szerint formázva.

### Gyakori kérdések

- **Beágyazhatok kettőnél több szintet?** Nem, egyetlen szint (ismétlő az ismétlőben) támogatott.
- **Át kell alakítanom a meglévő ismétlőimet?** Nem, azok változtatás nélkül működnek.
- **Mi a különbség a Dynamic Repeater és az Ismétlő lekérdezés plusz Listing Grid között?** A **Dynamic Repeater** egyszerű, sűrű kimenethez jó, a HTML-formátumot közvetlenül a widget beállításában adod meg. Az Ismétlő lekérdezés és a Listing Grid rugalmasabb: teljes elrendezést, képeket, gombokat, dinamikus hivatkozásokat, feltételes megjelenítést és összetett stílust tesz lehetővé.
- **Módosítja az elrendezés (Blokk vagy Táblázat) a mentett adatot?** Nem.

## Az ismétlő elemei külön mezőkként

A **Mentés külön mezőkként** kapcsolóval az ismétlő minden almezőjét külön mezőként is elmenti az adatbázisba. Így a bejegyzések lekérdezhetők az ismétlő almezői szerint is.

A példa egy orvosi konferencia regisztrált csapatait követi. Minden csapat egy-ötven résztvevővel érkezik, ezért a **Résztvevő** ismétlő mezőt használjuk **Név**, **Útlevélszám** és **Beosztás** almezőkkel. A cél: csak azok a csapatok jelenjenek meg, amelyekben van „sebész” beosztású résztvevő.

### A bejegyzéstípus beállítása

1. A **JetEngine → Bejegyzéstípusok** oldalon hozz létre egy „Regisztrált csapatok” bejegyzéstípust.
2. Vegyél fel egy „Weboldal” **Szöveg** mezőt és egy „Klinika logója” **Média** mezőt.
3. Vegyél fel egy „Résztvevő” **Ismétlő** mezőt, almezői három **Szöveg** mező: „Név”, „Útlevélszám”, „Beosztás”.
4. Kapcsold be a **Mentés külön mezőkként** kapcsolót.
5. Mentsd a bejegyzéstípust, majd vegyél fel bejegyzéseket, és töltsd ki a résztvevőket.

Bekapcsolt kapcsolónál minden almező külön metakulccsal is tárolódik, és emellett marad egy mező, amely az összes elemet tömbként együtt tárolja. Így az ismétlő mezővel egészként és almezőnként külön is dolgozhatsz.

Ha az **Egyéni meta tárolás** be van kapcsolva az általános beállításoknál, a **Mentés külön mezőkként** beállítás nem érhető el.

Ha szeretnéd, JetFormBuilder-űrlappal is felvehetők a csapatok és résztvevők, így a klinikák képviselői maguk regisztrálhatnak.

### A lekérdezés

1. A **JetEngine → Lekérdezéskészítő** oldalon kattints az **Új hozzáadása** gombra, és nevezd el a lekérdezést (például „Klinikák sebészekkel”).
2. A **Lekérdezés típusa** legyen **Bejegyzések lekérdezése**, az **Általános** fülön válaszd a „Regisztrált csapatok” bejegyzéstípust.
3. A **Meta lekérdezés** fülön kattints az **Új feltétel hozzáadása** gombra.
4. A **Mező kulcsa/neve** mezőbe a mező nevét és az almező nevét írd alulvonással összekötve, mert így képződik az adatbázis metakulcsa: `resztvevo_beosztas` (mezőnév_almezőnév).
5. Az **Összehasonlítás** legyen **Egyenlő (=)**. Ha a beosztás több szóból állhat, használhatod a **Kedvelés** értéket is.
6. Az **Érték** mezőbe írd: `sebész`.
7. Kattints a **Lekérdezés hozzáadása** gombra.

### A listázás és az oldal

Hozz létre egy lekérdezéskészítős listázási sablont a lekérdezéssel (például **Dynamic Image** a logóhoz, **Dynamic Field** a csapat nevéhez és a weboldalhoz), tedd közzé, majd egy oldalon a **Listing Grid** widgetben válaszd ki. A frontenden csak azok a csapatok látszanak, amelyekben van sebész beosztású résztvevő.
