Dinamikus mezők: Dynamic Select, Hidden Label, JS Field, Live HTML

Az Űrlapmezők Típus listájában a bővítmény több új mezőtípust is ad. Ez a fejezet a négy dinamikus mezőt írja le.

Dynamic Select

A Dynamic Select egy legördülő lista, amelynek elemei egy másik mező értékétől függően változnak. Ha például az első mezőben országot választasz, a másodikban csak az adott ország városai jelennek meg.

https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor

Beállítás:

1. Add hozzá a vezérlő mezőt (például egy Választó típusú Ország mezőt).
2. Add hozzá a Dynamic Select típusú mezőt.
3. A Hivatkozási mező ID-ja mezőbe írd be a vezérlő mező azonosítóját (a képen orszag).
4. A Beállítások mezőbe írd az elemeket: a hivatkozási mező értékét szögletes zárójelbe teszed, utána sorokban jönnek a hozzá tartozó elemek.

[Kanada]
Winnipeg
Toronto
Vancouver
[Mexikó]
Mexikóváros
Tijuana
Puebla
[Brazília]
São Paulo
Rio de Janeiro
Brasília

A szögletes zárójelben az érték áll, amelyet a hivatkozási mező ad vissza (a Beállítások mezőben az opciók felirat|érték alakban is megadhatók, ilyenkor az értéknek kell a zárójelbe kerülnie). A mezőn van Többszörös kijelölés kapcsoló is.

Hidden Label

Ha egy legördülő lista elemeinek van felirata és értéke is (például Margherita|1000), az űrlap adataiban csak az érték szerepel, a felirat elvész. A Hidden Label (rejtett felirat) mező ezt oldja meg: a másik mező kiválasztott elemének feliratát adja vissza.

https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor

1. A Pizza mező Beállítások szövege legyen például: Margherita|1000, Salami|1200, Burgonyás|1200 (egy sorban egy elem).
2. Add hozzá a Hidden Label típusú mezőt, egyedi azonosítója legyen például pizza_felirat.
3. A Mező ID mezőbe írd a legördülő lista azonosítóját (itt pizza).

A felirat ezután felhasználható az e-mailben, az üzenetben vagy a többi műveletben a {form:...} shortcode-dal:

Ezt a pizzát választottad: {form:pizza_felirat}, ára {form:pizza} Ft.

JS Field

A JS Field olyan mező, amelynek értékét egy JavaScript-függvény számolja ki a többi mezőből.

https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor

A JS kód mezőben egy függvényt kell visszaadnod, ami az eredményt adja vissza. A függvényt a mező értékének minden változásakor újra lefuttatja a bővítmény.

return () => { return "Szia " + getField("nev") + "!"; }

A getField(mezoId) függvény egy másik mező aktuális értékét adja vissza. Fontos tudnivalók:

• Az érték mindig szövegként érkezik. A getField("kor") + 2 ezért 212, ha a kor 21.
• Ha számként kell, a második paraméter legyen true: getField("kor", true) + 2 eredménye 23.
• Ha a mező üres, az eredmény NaN. Ilyenkor alapértéket a harmadik paraméterrel adhatsz: getField("kor", true, 25).
• Jelölőnégyzetnél és többszörös kijelölésű választónál a getField a kiválasztott opciók tömbjét adja vissza; ha nincs kijelölve semmi, üres szöveget.
• Ha az értéket aszinkron kódból kell frissíteni, használd az updateSelf("új érték") függvényt.

A panel egyszerű, rövid formája is elfogadott, például a képen: return getField("kor", true, 0) + 2;.

Az Elrejtés kapcsoló nem jeleníti meg a mezőt az űrlapon, az értéke viszont megmarad a műveletekhez (például e-mail küldéséhez). A Frissítés minden billentyűleütéskor kapcsoló nélkül az érték akkor frissül, amikor a másik mező elveszíti a fókuszt.

ACF-mező értékének használata

ACF-mező értékét a JS Field nem éri el közvetlenül. Hozz létre egy Elementor Rejtett mezőt, állítsd be az értékét dinamikus címkével az ACF-mezőre, majd a JS Field-ben a rejtett mező azonosítóját add át a getField-nek.

Live HTML

A Live HTML olyan, mint az Elementor HTML mezője, de be tudsz szúrni bele más mezők értékét, és az az űrlap kitöltése közben élőben frissül.

https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor

A mező értékét {{form.mezo-id}} alakban írd, dupla kapcsos zárójelben:

Szia <b>{{form.nev}}</b>!

A Frissítés minden billentyűleütéskor kapcsoló nélkül a tartalom akkor frissül, amikor a mező elveszíti a fókuszt.

Ismétlődő rész több választásnál

Ha egy mezőben több elem is kiválasztható (például jelölőnégyzetek), sablont adhatsz, amely minden választott elemre megismétlődik:

Ezeket választottad:
<ul>
  {{#form.mezo-id}}
    <li>{{.}}</li>
  {{/form.mezo-id}}
</ul>

A {{#form.mezo-id}} nyitja az ismétlődést, a {{.}} az aktuális elemet írja ki, a {{/form.mezo-id}} zárja.

Megjelenítés feltételhez kötve

Hasonló szintaxissal egy részt csak akkor jelenítesz meg, ha a mező ki van töltve (vagy be van jelölve), és mást, ha nincs:

{{# form.elfogadas }}
  Köszönjük, hogy elfogadtad a feltételeket.
{{/ form.elfogadas }}
{{^ form.elfogadas }}
  A továbblépéshez el kell fogadnod a feltételeket.
{{/ form.elfogadas }}

Feltöltött fájlok képként

Fájlfeltöltő mezőnél a feltöltött képet és a fájlnevét meg tudod jeleníteni: a kép elérési útja {{form.feltolto_id.url}}, a fájlnév {{form.feltolto_id.name}}.

Szia {{form.nev}}, ezeket a képeket töltötted fel:
{{#form.feltolto_id}}
  <figure>
    <img src="{{ url }}">
    <figcaption>{{ name }}</figcaption>
  </figure>
{{/form.feltolto_id}}

Ha csak akkor akarsz képet mutatni, amikor a feltöltött fájl valóban kép, tedd a kódot ebbe a blokkba:

{{# form.feltolto_id.is_image }}
  <!-- ide jön a kép megjelenítése -->
{{/ form.feltolto_id.is_image }}