Tartalom feloldása a haladás alapján

A JetEngine-nel tagsági oldalt is építhetsz. Ebben a példában a leckéket a felhasználó haladása szerint oldod fel: a következő lecke akkor nyílik meg, ha a felhasználó a JetEngine- vagy a JetFormBuilder-űrlapban jól válaszol. A megoldás a Dinamikus láthatóságot köti az űrlap válaszához.

Példa: egy oldal az összes leckét mutatja. Minden zárt lakatot ábrázoló képhez felugró ablak tartozik egy űrlappal, és a kép láthatósága az űrlap lehetőségeihez kötött. Ha a felhasználó az „Igen” lehetőséget választja, feloldja a következő leckét. Az űrlapmező feltételes láthatósága miatt a felhasználó csak akkor látja a következő kérdést, ha az előzőre helyesen válaszolt.

Feloldás Elementorban

Szükséges: az Elementor, a JetEngine, a bekapcsolt Dinamikus láthatóság modul és (a felugró ablakhoz) a JetPopup. Az űrlapot JetEngine vagy JetFormBuilder bővítménnyel is készítheted.

1. Bejegyzések vagy új bejegyzéstípus a leckékhez

Hozz létre bejegyzéseket a tananyaggal, vagy külön egyedi bejegyzéstípust a leckebejegyzésekhez.

2. Metamező a metaboxban

Hogy az űrlap és a Dinamikus láthatóság együtt működjön, kell egy metamező. Mivel az űrlapot az oldalon jeleníted meg, az Oldalak számára hozz létre metaboxot.

1. Nyisd meg a JetEngine → Metaboxok oldalt, és kattints az Új hozzáadása gombra.
2. Add meg a Meta doboz címe értékét, és a Meta doboz célja mezőben válaszd a Bejegyzés lehetőséget.
3. A Láthatósági feltételek részben a Bekapcsolás bejegyzéstípusoknál mezőben válaszd az Oldalak bejegyzéstípust.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-meta&cpt_meta_action=add

A képen a metabox címe, célja és a láthatósági feltétel mezői látszanak, alul az Új metamező gombbal.

4. Kattints az oldal alján az Új metamező gombra. Mivel a Dinamikus láthatósági feltételt a felhasználó „Igen” vagy „Nem” választásához kötöd, hozz létre Rádió típusú metamezőt ezekkel a lehetőségekkel. (Más mezőt is létrehozhatsz az igényeid szerint.)
5. A rádió lehetőségeit kézzel is felveheted az Új mezőlehetőség gombbal, vagy a szójegyzékből is kitöltheted a Lehetőségek lekérése a szójegyzékből kapcsolóval.
6. Mentsd a metaboxot (Metabox hozzáadása, szerkesztésnél a frissítés gombbal).

3. JetEngine-űrlap

1. Nyisd meg a JetEngine → Űrlapok oldalt, és kattints az Új hozzáadása gombra. Adj címet az új űrlapnak.
2. A Hidden (rejtett) mező beállításait hagyd alapértelmezetten. Az Add Field gombbal vegyél fel egy új mezőt a rejtett mező és a küldés gomb közé.
3. Az új mező beállításainál a Type legyen ugyanaz, mint a létrehozott metamezőé: Radio. Add meg a Name és a Label értékét. A Name az űrlap beállításaiban szerepel, a Label a látogatók számára megjelenő felirat, ide írhatod a kérdést.
4. A Fill Options From mezőben válaszd a Manual Input lehetőséget, és add hozzá ugyanazokat a lehetőségeket, mint a metamezőnél („Yes”, „No”). Ha a metamezőnél szójegyzéket használtál, itt is választhatod a Glossary lehetőséget.
5. Kattints az Apply Changes gombra.
6. Jelöld be a Pre-set form field values jelölőnégyzetet. A Source legyen Post, a Get post ID from mezőben pedig Current post.
7. A Fields Map táblázatban a rejtett mező (a példában post_id) mellett válaszd a Post ID lehetőséget; a rádió- (vagy más, a láthatósághoz használt) mező mellett pedig a Post Meta lehetőséget, és a mellette lévő mezőbe írd be az imént létrehozott metamező nevét.
8. A Post-submit Actions / Notifications Settings fülön kattints a ceruza ikonra a művelet szerkesztéséhez. A Type legyen Insert/Update Post, a Post Type az Oldalak, a Post Status pedig Published.
9. A Fields Map táblázatban a rejtett mezőnél válaszd a Post ID (will update post) lehetőséget, a rádiómezőnél pedig a Post Meta lehetőséget a metamező nevével.
10. Kattints az Apply Changes gombra.

Fontos: az űrlapon belül minden mezőnév egyedi legyen, és csak kisbetűs latin betűt tartalmazzon, szóköz nélkül. A szavakat „-” vagy „_” jellel választhatod el.

Több kérdést is felvehetsz az űrlapba, hogy ellenőrizd a tanulók tudását, és feltételes szabályokat állíthatsz rájuk. A példában három rádiómező van (az „Igen”/„Nem” mezővel együtt), és az utolsó kettőre alkalmaztunk szabályokat:

1. Kattints a Set up conditional rules gombra, majd a + New Rule gombra.
2. Az Edit conditional logic for ablakban a Type legyen Show this field if…, válaszd ki az előző kérdés mezőjét, az Operator legyen Equal, a Value to compare mezőbe pedig a helyes lehetőség értékét írd.
3. Például az előző kérdés: „Melyik bővítmény kell az egyedi bejegyzéstípus létrehozásához?”, két manuálisan megadott lehetőséggel, „jetengine” és „jetelements” értékkel. A helyes válasz „JetEngine”, ezért a Value to compare mezőbe jetengine kerül. A felhasználó csak akkor látja a következő kérdést, ha helyesen válaszolt.
4. Kattints az Apply Changes gombra, és szükség szerint állíts be feltételt a többi mezőhöz.

A kérdések válaszait nem akarjuk menteni, ezért ezeknél a Fields Map beállításai a Pre-set és a Post-submit Action műveletnél változatlanok maradnak. Végül kattints a Közzététel vagy a Frissítés gombra.

4. JetFormBuilder-űrlap

Ha az űrlapot a JetFormBuilder bővítménnyel készíted:

1. Nyisd meg a JetFormBuilder → Add New oldalt, és adj címet az űrlapnak.
2. A Hidden Field beállításait hagyd alapértelmezetten, a Text Field mezőt töröld, ha nincs rá szükséged.
3. A Toggle block inserter gombbal helyezz el egy Radio Field mezőt a Hidden Field és az Action Button közé.
4. A mező Block General fülén add meg a Field Label és a Form field name értékét. A Field Label a látogatóknak megjelenő felirat (a kérdés), a Form field name az űrlap beállításaiban szerepel. A mezőnevekre ugyanaz a szabály vonatkozik, mint fent.
5. A Fill Options From mezőben válaszd a Manual Input lehetőséget, és a Manage Items gombbal vedd fel ugyanazokat a lehetőségeket, mint a metamezőnél. Szójegyzéknél a Glossary választható. Kattints az Update gombra.
6. A JetForm settings fül Preset Settings részén kapcsold be a kapcsolót, a Source legyen Post, a Get post ID from pedig Current post. A rejtett mező mellett válaszd a Post ID értéket, a rádió (vagy más, a láthatósághoz használt) mező mellett pedig a Post Meta értéket, és írd be az imént létrehozott metamező nevét.
7. A Post Submit Actions fülön válaszd az Insert/Update Post típust, és kattints a ceruza ikonra. A felugró ablakban válaszd a Post Type értékét (Pages) és a Published állapotot. A Fields Map táblázatban a rejtett mezőnél válaszd a Post ID (will update post) lehetőséget, a rádiómezőnél a Post Meta értéket a metamező nevével. Kattints az Update gombra.
8. Több kérdéshez a további mezőket Conditional Block blokkká alakíthatod: jelöld ki a mezőblokkot, kattints az ikonjára az eszköztáron, és válaszd a Conditional Block elemet az átalakítási listából. A beállítóablakot a felső eszköztáron, az Options gombtól balra lévő, keresztbe nyilas ikonnal nyithatod meg.
9. A Conditional Logic ablakban a Type legyen Show this field if…, válaszd ki az előző kérdés mezőjét, az Operator legyen Equal, a Value to compare mezőbe pedig a helyes lehetőség értékét írd (például jetengine). Kattints az Update gombra.
10. A kérdések válaszait itt sem mented, ezért a Pre-set és a Post-submit Action beállításai változatlanok maradnak. Végül kattints a Publish vagy az Update gombra.

5. Felugró ablak

A felugró ablakhoz a JetPopup bővítmény kell. Ha nem akarsz felugró ablakot, az űrlapot közvetlenül az oldalra is teheted, és ezt a lépést kihagyhatod.

1. Nyisd meg a JetPopup → Create New Popup oldalt. A JetPopup előbeállítási könyvtárából is telepíthetsz sablont, de itt a nulláról készítünk egyet.
2. Adj címet a felugró ablaknak, kattints a Publish, majd az Edit with Elementor gombra.
3. Húzd be a Form widgetet (JetEngine és JetFormBuilder űrlaphoz), vagy a JetForm widgetet (JetFormBuilder űrlaphoz).
4. A Content beállításoknál válaszd ki a Provider bővítményt, amellyel az űrlapot készítetted, majd az űrlap nevét.
5. Fontos: hogy a Dinamikus láthatóság működjön az űrlappal, a Submit type legyen Reload: így az oldal újrarenderelése után lép életbe a láthatóság.
6. Kattints az Update gombra.

6. Oldal a tartalommal

1. Nyisd meg a Oldalak → Új oldal menüpontot, adj címet, és kattints az Edit with Elementor gombra.
2. Mivel minden bejegyzéshez más űrlap és láthatósági feltétel tartozik, ezen az oldalon nem használható a Listing Grid.
3. Az első lecke anyagát (Title és Video widget) tedd ki kézzel, Dinamikus láthatóság nélkül, hogy minden tanuló lássa.
4. Minden további leckéhez vegyél fel egy Title, egy zárt lakatot ábrázoló Image, egy Video és egy Button widgetet.
5. A zárt lakat Image widgetjénél nyisd meg az Advanced részt. A JetPopup fülön az Attached Popup mezőben válaszd ki a felugró ablakot, a Trigger Type maradjon Click on Widget.
6. A Dynamic Visibility fülön kapcsold be az Enable kapcsolót. A lakatnak el kell tűnnie, amikor a felhasználó az „Igen” választ adja („Szeretnél továbblépni a 2. leckére?”), ezért a Visibility condition type legyen Hide element if condition met, a Condition pedig Equal.
7. A Field mezőnél kattints a Dynamic Tag gombra, és válaszd a Custom Field lehetőséget. A beállításaiban válaszd ki az Oldalak metaboxban létrehozott mezőt.
8. A Value mezőbe írd be a rádió „Yes” lehetőségének értékét: yes.
9. A feloldás után megjelenő widget (a bejegyzés kiemelt képe, nyitott lakat vagy videó) láthatósága hasonló, de a Visibility condition type itt Show element if condition met legyen. Ugyanezt a felugró ablakot ehhez a widgethez is csatolhatod, hogy a felhasználó a „Nem” választásával visszazárhassa a leckét. Ez nem kötelező.

7. Átirányítás a leckére

Ha azt szeretnéd, hogy a felhasználó a videó vagy a kép megnyitása után a lecke bejegyzésére lépjen:

• Gomb widget: tedd az oldalra a JetElements Button (vagy az alap Elementor Button) widgetet, és a Button Link (vagy Link) mezőbe írd a lecke bejegyzésének linkjét.
• Redirect to Page utóművelet az űrlapon: nyisd meg a láthatósághoz készült űrlapot, és a Post-submit Actions / Notification Settings részen kattints az Add Notification gombra. A Type legyen Redirect to Page, a Redirect to mezőben Custom URL, az Redirect URL mezőbe pedig írd a linket. Kattints az Apply Changes, majd az Update gombra. JetFormBuilder-űrlapnál a + New Action gombbal vedd fel a Redirect to Page műveletet, szerkeszd a ceruza ikonnal, válaszd a Custom URL értéket, és add meg az Redirect URL címet; majd kattints az Update gombra.

Feloldás a blokkszerkesztőben

A Dinamikus láthatóság a blokkszerkesztő blokkjaira is alkalmazható. Előbb végezd el az Elementoros leírás első lépéseit (bejegyzések vagy bejegyzéstípus, metaboxmező és űrlap).

1. Nyisd meg az oldalt a blokkszerkesztőben. A videó mellett egy rövid JetFormBuilder-űrlap áll, a kért tartalom a „Proceed” gombra kattintás után oldódik fel.
2. Döntsd el, mit akarsz feloldani (szöveg, videó vagy egy egész szakasz), és add hozzá a szükséges blokkot. A példában ez egy gomb a következő videós lecke linkjével.
3. Jelöld ki a blokkot, és kattints a blokk feletti eszköztár szem alakú ikonjára.
4. A felugró ablakban kapcsold be az Enable kapcsolót, de előbb ellenőrizd, hogy a Visibility condition type értéke Show element if condition met.
5. Kattints az Add new item gombra, és a Condition listában válaszd az Equal értéket.
6. A Field mezőnél kattints a Dynamic Tags gombra, és válaszd a Custom data forrást. A Select data to show listában válaszd a JetEngine meta field lehetőséget, alatta a Field listában pedig a korábban létrehozott metabox mezőjét.
7. A Return beállítás legyen Field value. Ne felejtsd el alkalmazni a beállításokat.
8. A Value mezőbe írd be: yes.
9. A Button blokkban add meg a lecke bejegyzésének linkjét.
10. Hozzáadhatsz további elemeket is ugyanazokkal vagy más feltételekkel. A példában egy lakattal ellátott kép is van a következő lecke indexképével, amely a gombbal együtt jelenik meg.
11. Frissítsd az oldalt, és nézd meg a frontenden: a kép és a második gomb rejtve van. Ha a felhasználó az „Igen” lehetőséget választja, és a „Proceed” gombra kattint, a rejtett elemek láthatóvá válnak.

Ezek a lépések a második lecke eléréséhez valók. A következő leckékhez ismételd meg őket: hozz létre új metamezőt az oldalak metaboxában, űrlapot a további kérdésekkel, felugró ablakot, és csatold a Dinamikus láthatóságot a következő képhez vagy videóhoz, valamint az oldalon az űrlap lehetőségeihez. Így minden leckéhez külön láthatóságot állíthatsz be.

Az általános láthatósági beállításokat a Dinamikus láthatóság fejezet írja le.