Adatok dinamikus lekérése komponenssel

A komponens (Component) modullal újrafelhasználható elemeket készíthetsz, amelyeknek az értékeit minden használatnál más forrásból adhatod meg. Ez a példa egy dinamikus gombot készít, amely az egyedi bejegyzéstípus metamezőiből veszi az ikont és a linket. A gombot a Dynamic Field elem rajzolja ki, és Elementorban, a blokkszerkesztőben és Bricksben is elkészíthető.

Előfeltétel, hogy létezzen egy egyedi bejegyzéstípus.

Metamezők felvétele

1. Nyisd meg a JetEngine → Bejegyzéstípusok listát, és kattints a bejegyzéstípus mellett a Szerkesztés gombra.
2. A Metamezők részben kattints az Új metamező gombra, és vegyél fel egy Text típusú mezőt a linkhez.
3. Vegyél fel még egyet Iconpicker mezőtípussal az ikonhoz.
4. Kattints a bejegyzéstípus frissítése gombra, majd a bejegyzéseknél töltsd ki az új mezőket, és mentsd.

A komponens elkészítése

1. Nyisd meg a JetEngine → Listázások/komponensek oldalt, és kattints az Új komponens hozzáadása gombra.
2. A megjelenő ablakban add meg a komponens nevét, és válaszd ki a komponens nézetét (szerkesztőt), majd kattints a Komponens létrehozása gombra.
3. A felső panelen kattints a fájl alakú ikonra, és a Component Content Controls fülön hozz létre három Text vezérlőt: a gomb szövegéhez, a linkjéhez és az ikonjához.
4. A komponensen belül add hozzá a Dynamic Field elemet. A FORRÁS legyen „Component Content Value”, az OBJECT FIELD / META FIELD / REPEATER KEY / COMPONENT PROP mezőbe pedig az ikon vezérlőjének nevét írd (a név a Component Content Controls beállításainál látszik).
5. Kapcsold be a Filter field output kapcsolót, és a Callback listából válaszd az „Ikon beágyazása az Iconpickerből” elemet.

Makrók a vezérlőkhöz

A gomb szövegét és linkjét egy makróval illeszted a kimenetbe. A makrót a Makrógenerátor készíti el.

1. Nyisd meg a webhelyet egy új lapon, majd a JetEngine → JetEngine → Makrógenerátor oldalt.
2. A Makró mezőben válaszd a „Component Control Value” elemet, a Control Name mezőbe pedig a link vezérlő nevét. Másold ki a kapott makrót.
3. Cseréld a Control Name értékét a gomb szövegének vezérlőjére, és másold ki a második makrót is.
4. Menj vissza a komponens beállításaihoz, kapcsold be a Customize field output kapcsolót, és a Field format mezőbe írd:

<a href='%a link makrója%'>%s %a felirat makrója%</a>

A két helyre illeszd be a fent kimásolt makrókat. A %s az ikon, amelyet a callback állít elő.

5. Tedd közzé a sablont.

A Makrógenerátor részletei a Shortcode- és makrógenerátor fejezetben vannak.

A komponens használata az oldalon

1. Nyisd meg az egyedi oldal sablonját, ahová a gombot szánod, és add hozzá a komponenst a neve alapján.
2. Állítsd be a vezérlőket. A gomb szövegét (például „Tovább”) egyszerűen beírhatod, ha minden bejegyzésnél ugyanaz.
3. A link és az ikon mellett kattints a Dinamikus címke ikonra, válaszd az „Egyéni mező” (Custom Field) elemet, és válaszd ki a korábban létrehozott link- és ikonmezőt.
4. Tedd közzé az oldalt.

Eredmény

A bejegyzéstípus egyik bejegyzésének oldalán a gomb a megadott szöveggel és az adott bejegyzés ikonjával jelenik meg, és rákattintva a bejegyzés linkjére visz.