Portfólió felvétele a nyilvános űrlappal

Állásportálon a felhasználók nemcsak önéletrajzot, hanem portfóliót is közzétehetnek. Ez a fejezet azt mutatja be, hogyan vehetik fel, szerkeszthetik és törölhetik a portfóliójukat a fiókoldalon egy nyilvános űrlappal, és hogyan jelenik meg a profiloldalon.

Előfeltételek:

• Elementor (az ingyenes is elég);
• aktív JetEngine, beállított fiókoldallal és egyedi felhasználói oldallal;
• JetFormBuilder bővítmény;
• JetPopup bővítmény a felugró ablakokhoz.

Portfólió egyedi tartalomtípus

A portfóliót külön egyedi tartalomtípusban (CCT) érdemes tárolni. Új CCT új SQL-táblát is létrehoz, így több felhasználó portfóliója sem lassítja a webhelyet.

1. A JetEngine → JetEngine → Modulok fülön kapcsold be az Egyedi tartalomtípusok modult.
2. Az Egyedi tartalomtípusok menüpontban kattints az Új hozzáadása gombra.
3. Az általános beállításoknál a Név kötelező; a Slug és az adatbázistábla neve magától kitöltődik. A többi beállítás igény szerint.
4. A Mezők fülön vedd fel az egyedi mezőket. A példában négy mező van: „Munka neve” (szöveg), „Média” (kép, Media típus), „Munka hivatkozása” (szöveg) és „Munka leírása” (Textarea).
5. Az Admin oszlopok fülön bekapcsolhatod, mely mezők értékei látsszanak a CCT-elemek háttérbeli listájában.
6. Mentsd a CCT-t.

Űrlap az elemek felvételéhez

A CCT szerkesztőjében a Create new form gomb nyilvános űrlapot generál az elemek felvételéhez, és átvisz az űrlap szerkesztőjébe. Az űrlap mezői a CCT metamezőivel azonos címkéjűek, nevűek és típusúak.

1. Egy mezőt kötelezővé a mellette lévő csillag ikonnal teszel: ha a felhasználó nem tölti ki, az űrlap nem küldhető be.
2. Ha az űrlapban Media Field blokk van, a blokk beállításainál a Field fülön kapcsold be az Insert attachment kapcsolót, és a FIELD VALUE igazodjon a metamező beállításához: ha a metamezőnél a „Media ID” értékformátumot választottad, itt az „Attachment ID” kell. Enélkül nem lehet fájlt feltölteni. A User access itt is megadható.
3. A JetForm → Post Submit Actions fülön alapból ott van az „Insert/Update Custom Content Type Item” művelet. A ceruza ikonnal nyisd meg a beállításait:
   • CONTENT TYPE: a létrehozott „Portfólió” CCT;
   • ITEM STATUS: a beküldés után az elem „Draft” vagy „Publish” állapotot kap;
   • FIELDS MAP: az űrlapmezők és a CCT-metamezők összerendelése; a beküldéskor ezekkel az értékekkel jön létre az elem;
   • DEFAULT SETTINGS: a CCT alapértelmezett mezőinek értékei. Módosítás után kattints az Update gombra.
4. Hogy a felhasználó a beküldés után a fiókoldalra jusson, kattints a + New Action gombra, válaszd a „Redirect to Page” műveletet, a ceruza ikonnal nyisd meg, a Redirect to legyen „Static Page”, a Select page pedig „Fiókom”. Update.
5. Az űrlapot tovább szerkesztheted, például Heading blokkal szöveget adhatsz hozzá. Végül kattints az Update gombra.

Űrlap az elemek szerkesztéséhez

1. A JetFormBuilder → Forms oldalon a felvevő űrlapot másold a Duplicate gombbal, és nevezd át.
2. Szúrj be egy Hidden Field blokkot: változtasd meg a nevét, a Field Value legyen „Manual Input”.
3. A blokk DEFAULT VALUE mezője fölötti ikonnal nyisd meg a Edit Preset ablakot: a Source „Custom Content Type”, a Get Item ID from „Current post”, a CCT-érték „Item ID”. Update.
4. A többi, a CCT-mezőket másoló mezőt nem kell módosítani.
5. A JetForm → Post Submit Actions fülön a ceruza ikonnal nyisd meg az „Insert/Update Custom Content Type Item” műveletet, és a rejtett mezőhöz válaszd az „Item ID (will update the item)” értéket. Update.
6. Nyisd le a Preset Settings szakaszt, kapcsold be a kapcsolót, a SOURCE legyen „Custom Content Type”, a GET ITEM ID FROM pedig „Current Post”. Alatta az űrlapmezők mellett legördülőben kiválaszthatod az összetartozó CCT-metamezőt. Szerkesztéskor a preset az aktuális CCT-elem adataival tölti ki a mezőket, így a felhasználónak nem kell újra beírnia mindent.
7. Update.

Felugró ablakok az űrlapokhoz

A JetPopup segítségével két felugró ablakot készítesz, amelyeket gombokhoz kötsz: egyet a felvételhez, egyet a szerkesztéshez.

1. A JetPopup → Create New Popup oldalon a Create a Popup ablakban válaszd ki a tartalom típusát (Elementor vagy blokkszerkesztő), add meg a nevet, válaszd az előbeállítást, és kattints a Create gombra.
2. Tedd a szerkesztőbe a JetForm widgetet vagy a Form blokkot, és a Choose Form listában válaszd a felvevő űrlapot. Szabd testre, és Update.
3. Készíts egy második felugró ablakot ugyanígy a szerkesztő űrlappal.
4. A szerkesztő ablak fogaskerék ikonjával nyisd meg a beállításokat, és kapcsold be a Loading content with Ajax és a Force Loading kapcsolót. Enélkül az űrlap preset nem működik a felugró ablakban.

CCT-lekérdezés

Hogy a profiloldalon csak a lekérdezett felhasználó portfóliója jelenjen meg, egyéni lekérdezés kell.

1. A JetEngine → Lekérdezéskészítő oldalon kattints az Új hozzáadása gombra.
2. Add meg a lekérdezés nevét, a típus legyen „Custom Content Type Query”.
3. A Content Types Query fülön a From Content Type értéke a „Portfólió”. Megadhatod a megjelenített elemek számát, és a Status értéke legyen „Publish”, hogy csak a közzétett elemek jelenjenek meg.
4. A Query fülön kattints az Új hozzáadása gombra: a Field „Item Author”, a Compare „Equal (=)”, az érték ikonjával válaszd a „Queried user ID” makrót, a Type pedig „Numeric”.
5. Kattints a Lekérdezés hozzáadása/frissítése gombra.

Listázási sablon

1. A JetEngine → Listázások/komponensek oldalon kattints az Új elem hozzáadása gombra.
2. A Lista forrása legyen „Custom Content Type”, a From content type a „Portfólió”, adj nevet, a nézet legyen Elementor, és kattints a létrehozás gombra.
3. Dynamic Image widget: a Source a CCT Media metamezője.
4. Dynamic Field widget a névvel: a Source „Post/Term/User/Object Data”, az Object Field a „Munka neve”.
5. Még egy Dynamic Field a leírással. Kapcsold be a Filter field output kapcsolót, és a Callback legyen „Trim string by charts or words”, hogy a leírás egy része rejtve maradjon. Ez a callback csak akkor érhető el, ha a JetEngine → JetEngine → Modulok → Külső modulok alatt bekapcsoltad a Trim string callback modult. Itt adod meg a megjelenített szavak vagy karakterek számát.
6. Dynamic Link widget a munka hivatkozásával: a metamező a „Munka hivatkozása”.
7. Másik Dynamic Link, amellyel a felhasználó törölheti a portfóliót: a Source „Delete current post link”, töltsd ki a Confirm deletion message mezőt, a Redirect after delete mezőbe írd a fiókoldal webcímét, így a törlés után oda érkezik a felhasználó. A felirat módosítható; a példában csak ikon van, a felirat törölve. Kapcsold be az Add Query Arguments kapcsolót, és írd be: _cct_id=%current_id%. A Field Icon a „Trash”, az Alignment az „End”.
8. A törlés gomb Advanced fülén a Dynamic Visibility alatt kapcsold be a kapcsolót, a feltételtípus „Show element if condition met”, a feltétel a JetEngine-specifikus „Is Profile Page”, a Profile Page mezőben pedig az a fiók-aloldal, amelyen a felhasználó adatai és a portfóliós rács lesz. Így a törlés gomb csak a fiókoldalon látszik, a profiloldalon nem.
9. Szerkesztés gomb: tegyél be Elementor Button vagy JetElements Button widgetet, és szabd testre. Az Advanced fül JetPopup szakaszában az Attached Popup a szerkesztő űrlapot tartalmazó ablak, a Trigger Type „Click On Widget”, és kapcsold be a Jet Engine Listing popup kapcsolót. A Dynamic Visibility a törlés gombéval azonos beállítású: „Show element if condition met”, „Is Profile Page”, ugyanaz az aloldal.
10. Frissítés.

A rács a fiókoldalon

Szerkeszd a fiókoldalnak azt az aloldal-sablonját, amelyik a felhasználó adatait mutatja.

1. Tegyél be egy Heading widgetet „Portfólió” szöveggel.
2. Tegyél be egy gombot (Elementor Button vagy JetElements Button), amely a felvevő űrlapos ablakot nyitja: Advanced → JetPopup, az Attached Popup a felvevő ablak, a Trigger Type „Click On Widget”.
3. Tedd be a Listing Grid widgetet, és válaszd ki a most elkészített listázást. A Dynamic Visibility beállítások miatt a rács a szerkesztőben még nem mutatja a szerkesztő és törlő gombokat, a fiókoldalon viszont látszanak majd.
4. A Custom Query fülön kapcsold be a kapcsolót, és a legördülőben válaszd ki a CCT-lekérdezést. Mivel még nincs portfólió, a rács üres.
5. Frissítés.

A rács a nyilvános profiloldalon

Szerkeszd a profiloldal aloldal-sablonját.

1. A belső szekció oszlopába tegyél egy Heading widgetet „Portfólió” szöveggel.
2. Tedd be a Listing Grid widgetet a listázással, és a Custom Query fülön kapcsold be az egyéni lekérdezést, válaszd ki a CCT-lekérdezést.
3. A belső szekció Advanced fülén a Dynamic Visibility alatt kapcsold be a kapcsolót: a feltételtípus „Show element if condition met”, a feltétel „Query Has Items”, a Query to check mezőben ugyanaz a CCT-lekérdezés. Így a szekció csak akkor látszik, ha a felhasználónak van legalább egy portfóliója.
4. Frissítés.

Ellenőrzés

Nyisd meg a fiókoldalt a nyilvános felületen. A felvevő gombra kattintva megjelenik az űrlap; kitöltés és beküldés után az új elem megjelenik a rácsban. A Szerkesztés gombra kattintva megnyílik a szerkesztő űrlap, a mezők a CCT-elem értékeivel előtöltve; módosítás és beküldés után a változás megjelenik a rácsban. A Törlés gomb megerősítést kér: az OK töröl, a Mégse megtartja az elemet. Törlés után a rács újra üres.

A profiloldalon, amíg a felhasználónak nincs portfóliója, a szekció rejtve marad. Amint a fiókoldalról felvesz egyet, a szekció megjelenik, de a hozzáadás, szerkesztés és törlés gombok a Dynamic Visibility beállítások miatt nem látszanak.