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

> A felhasználók portfóliójának felvétele, szerkesztése és törlése a fiókoldalon CCT-vel, JetFormBuilder-űrlapokkal és JetPopup felugró ablakokkal, és megjelenítése a profiloldalon.

Á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](https://hub.hellowp.io/hu/plugins/jet-engine/profil-fiokoldal-sablonmodok/) és [egyedi felhasználói oldallal](https://hub.hellowp.io/hu/plugins/jet-engine/profil-egyedi-felhasznaloi-oldal/);
- 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.