# Láthatóság példákon: előfizetés, dátum, napok, bejelentkezés

> Dinamikus láthatóság gyakorlati példái: lejárt előfizetés tartalmának elrejtése, tartalom dátum szerint, adott napokon, és csak bejelentkezett felhasználóknak (termékárak).

Ezek a példák a **Dinamikus láthatóság** modulra épülnek. A modul bekapcsolását, a feltételek listáját és a beállítások helyét a [Dinamikus láthatóság](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-lathatosag/) fejezet írja le. Mindhárom szerkesztőben működik: Elementorban a **Speciális → Dinamikus láthatóság** szakaszban, a blokkszerkesztőben a blokk eszköztárának szem ikonjával, a feltétel- és értékmezők mellett pedig a **Dinamikus címkék** gombbal választod ki az adatot.

## Tartalom elrejtése lejárt előfizetésnél

Ha a felhasználóknak előfizetésük van, a lejárat dátumát egy felhasználói metamezőben tárolhatod, és a láthatósággal csak az érvényes előfizetőknek mutathatsz tartalmat (például a reklámot el is rejtheted előlük).

### A lejárat metamezője

1. Nyisd meg a **JetEngine → Metaboxok** oldalt, és kattints az **Új hozzáadása** gombra.
2. Add meg a metabox címét, a **Meta doboz célja** legyen **Felhasználó**.
3. A **Láthatósági feltételek** között a **Látható itt** értéke legyen **Felhasználó szerkesztése**: így a mező csak a felhasználó szerkesztő oldalán jelenik meg, és csak az adminisztrátor látja és szerkesztheti.
4. Az **Új metamező** gombbal vegyél fel mezőt. A **Címke** után a **Név/ID** mezőre kattintva a slug automatikusan kitöltődik. Ha átírod, ne legyen benne szóköz, csak betű, szám, kötőjel vagy aláhúzás, és egyedi legyen.
5. Az **Objektum típusa** maradjon **Mező**, a **Mező típusa** legyen **Dátum**, és kapcsold be a **Mentés időbélyegként** kapcsolót.
6. Kattints a **Metabox hozzáadása** (szerkesztésnél **Metabox frissítése**) gombra.

![A felhasználói metabox dátum típusú lejárat mezővel, bekapcsolt időbélyeges mentéssel](./kepek/dinamikus-tartalom-4-elofizetes-metabox.webp)

*A felhasználói metabox dátum típusú lejárat mezővel, bekapcsolt időbélyeges mentéssel* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-meta&cpt_meta_action=add)

A képen a **Meta doboz célja** „Felhasználó”, a mező típusa „Dátum”, és a **Mentés időbélyegként** kapcsoló be van kapcsolva.

Ezután nyisd meg a **Felhasználók** listát, kattints a **Szerkesztés** hivatkozásra a kívánt felhasználónál, az oldal alján add meg az előfizetés lejáratát, és kattints a **Felhasználó frissítése** gombra.

### A feltétel Elementorban

1. Szerkeszd az oldalt Elementorral, jelöld ki az elemet, és nyisd meg a **Speciális → Dinamikus láthatóság** részt. Kapcsold be.
2. A **Visibility condition type** legyen „Show element if condition met”, a **Condition** pedig **Nagyobb, mint**.
3. A **Field** mezőnél kattints a **Dinamikus címkék** gombra, és válaszd a „User Field” címkét. A címkére kattintva válaszd ki a lejárat metamezőjét.
4. A **Context** legyen „Current User (global)”.
5. A **Value** mezőnél válaszd a JetEngine **Macros** címkét, és a **Macros** listából a **Today** makrót.
6. A **Data type** legyen **Numeric**.
7. Az **+ Add Item** gombbal vegyél fel egy új, „User logged in” feltételt.

Az elem azoknak látszik, akiknek a lejárati dátuma még nem érte el a mai napot. Akinek üres a mezője vagy lejárt az előfizetése, annak rejtve marad.

### A feltétel a blokkszerkesztőben

Példa: videóreceptek csak az előfizetőknek.

1. Jelöld ki a blokkot, kattints az eszköztár szem ikonjára, és kapcsold be az **Enable** kapcsolót. A **Visibility condition type** legyen „Show element if condition met”.
2. Az **Add new item** gombbal adj hozzá feltételt, a **FELTÉTEL** értéke legyen **Nagyobb, mint**.
3. A **Field** mezőnél a **Dinamikus címkék** gombbal válaszd a **Source** értékének „Custom data” elemet, a **Select data to show** listában a „Current user meta” elemet, a **Meta field** sorba a mező nevét írd (példa: `expiration-date`). A **Data Context** legyen „Current User (global)”, majd **Apply**.
4. A **Value** mezőnél válaszd ismét a „Custom data” forrást és a **Today** makrót, **Apply**.
5. A **Data type** legyen **Numeric**.
6. Az **Add new item** gombbal adj hozzá egy „User logged in” feltételt, a **Relation** pedig legyen **AND**.
7. Frissítsd az oldalt. A videó csak az érvényes előfizetéssel rendelkezőknek látszik, a többieknek rejtve marad.

## Tartalom megjelenítése és elrejtése dátum szerint

Különleges ajánlatot mutathatsz, vagy lejárt tartalmat rejthetsz el egy bejegyzés dátum mezője alapján.

### A dátummező

1. Nyisd meg a **JetEngine → Bejegyzéstípusok** oldalt, és kattints a típus melletti **Szerkesztés** gombra.
2. A metamezők között kattints az **Új metamező** gombra. A **Név/ID** csak kisbetűt, számot, kötőjelet és aláhúzást tartalmazhat. Az **Objektum típusa** legyen **Mező**, a **Mező típusa** **Dátum** (ha időpontot is kell, **Dátum és idő**), és kapcsold be a **Mentés időbélyegként** kapcsolót.
3. Mentsd a bejegyzéstípust, majd töltsd ki a dátumot a bejegyzéseknél. Dátum és idő típusnál a **Done** gombbal rögzíted az értéket, a bejegyzést pedig a **Frissítés** gombbal mented.

### Elem megjelenítése, ha a dátum még nem járt le

Példa: egy „Közelgő esemény” szalag csak a jövőbeli eseményeknél látszik. A feltételt Elementorban az egyedi oldal sablonján, vagy egy listázási sablonon állítod be.

1. Jelöld ki az elemet, a **Speciális → Dinamikus láthatóság** részben kapcsold be a láthatóságot.
2. A **Visibility condition type** legyen „Show element if condition met”, a **Condition** **Nagyobb, mint**.
3. A **Field** mezőnél a **Dinamikus címkék** gombbal válaszd a JetEngine „Custom Field” címkét, és a dátummezőt.
4. A **Value** mezőnél válaszd a **Macros** címkét és a **Today** makrót.
5. A **Context** maradjon **Default**, a **Data type** legyen **Numeric**.
6. Frissítsd az oldalt. A jövőbeli esemény oldalán a szalag látszik, a lejárt eseménynél nem.

### Elem elrejtése lejárt dátumnál

Listázási sablonban (**JetEngine → Listázások/komponensek**) egy elemet elrejthetsz, ha a dátum elmúlt. Példa: a „Foglalás” gomb vagy a cím elrejtése lejárt eseménynél.

1. Jelöld ki az elemet (a példában egy **Heading**), és kapcsold be a **Speciális → Dinamikus láthatóság** részt.
2. A típus legyen „Hide element if condition met”, a **Condition** **Kisebb, mint**.
3. A **Field** mezőnél a „Custom Field” címkével válaszd ki a dátum mezőt.
4. A **Value** mezőnél a **Macros → Today** értéket használd, a **Context** maradjon **Default**, a **Data type** legyen **Numeric**.
5. Frissítsd a sablont, és a **Listing Grid** elemmel jelenítsd meg az oldalon.

### A blokkszerkesztőben

A listázási sablont blokkszerkesztővel (**Listing View**: „Blocks (Gutenberg)”) is elkészítheted. Példa: az „Közelgő esemény!” felirat csak a jövőbeli eseményeknél látszik, a lejárt eseményeknél „A túra véget ért!” felirat jelenik meg gomb helyett.

1. Jelöld ki a blokkot, kattints a szem ikonra, és kapcsold be az **Enable** kapcsolót. A típus „Show element if condition met”.
2. Az **Add new item** gombbal adj hozzá feltételt, a **FELTÉTEL** legyen **Nagyobb, mint**.
3. A **Field** mezőnél a **Dinamikus címkék** gombbal válaszd a „Custom data” forrást, a **Select data to show** listában a „JetEngine meta field” elemet, és add meg a dátum mezőt. A **Return** értéke legyen „Field value”, majd **Apply**.
4. A **Value** mezőnél a „Custom data” forrással válaszd a **Today** makrót, **Apply**.
5. A **Data type** legyen **Numeric**.
6. A „Vége” felirathoz ugyanezt állítsd be, de a feltétel **Kisebb, mint** legyen.
7. Elrejtéshez (például a gombnál) a típus legyen „Hide element if condition met”, és add meg a kívánt feltételt.
8. Frissítsd a sablont, tedd a **Listing Grid** blokkot az oldalra, és válaszd ki a sablont.

## Tartalom megjelenítése adott napokon

### Elementor Pro: a Current Date Time címkével

Az Elementor Pro **Current Date Time** dinamikus címkéjével a nap neve alapján rejthetsz el elemet. Példa: egy hirdetés csak hétfőn látszik.

1. A **Speciális → Dinamikus láthatóság** részben kapcsold be a láthatóságot, és válaszd a megjelenítés vagy elrejtés típusát.
2. A **Condition** legyen **Egyenlő**.
3. A **Field** mezőnél a **Dinamikus címkék** gombbal válaszd a **Current Date Time** címkét (csak az Elementor Pro-val érhető el).
4. A címkére kattintva a **Date Format** legyen **Custom**, a **Custom Format** mezőbe írd az `l` (kisbetűs L) karaktert: ez a hét napja.
5. A **Value** mezőbe írd a nap nevét a weboldal nyelvén, nagy kezdőbetűvel (például „Hétfő”). Több napot vesszővel választhatsz el.
6. Frissítsd az oldalt.

A dátumformátum további karakterei: `F` a hónap teljes neve (a **Value** mezőbe a hónap nevét írd), `j` a nap sorszáma, `Y` az év négy számjeggyel (a kisbetűs `y` az év utolsó két számjegye). Ezeket kombinálhatod: az `l, F j, Y` formátumnál az értéknek a teljes dátumnak kell lennie a megadott formában.

### Elementor (ingyenes): a String to timestamp makróval

1. Kapcsold be a **Dinamikus láthatóságot**, a típus legyen „Show element if condition met”, a **Condition** **Egyenlő**.
2. A **Field** mezőnél a **Dinamikus címkék** gombbal válaszd a **Macros** címkét, azon belül a **String to timestamp** makrót, és a **String to convert** mezőbe írd: `this Friday`.
3. A **Value** mezőnél is válaszd a **Macros** címkét, és a **Today** makrót.
4. Frissítsd az oldalt. Az elem csak pénteken látszik, másnap eltűnik.

### Blokkszerkesztő

1. Jelöld ki a blokkot, kattints a szem ikonra, kapcsold be az **Enable** kapcsolót, a típus „Show element if condition met”.
2. Az **Add new item** gombbal adj hozzá feltételt, a **FELTÉTEL** **Egyenlő** legyen.
3. A **Field** mezőnél a **Dinamikus címkék** gombbal válaszd a „Custom data” forrást, a **Select data to show** listában a „String to timestamp” elemet, és a **String to convert** mezőbe írd: `this Friday`. **Apply**.
4. A **Value** mezőnél a „Custom data” forrással válaszd a **Today** makrót.
5. Alkalmazd a beállításokat, és frissítsd az oldalt.

## Tartalom csak bejelentkezett felhasználóknak

Példa: a WooCommerce akciós termékek árát csak a bejelentkezett felhasználók látják. Ehhez az Elementor Pro és a Dinamikus láthatóság kell.

### A modul bekapcsolása

A **JetEngine → JetEngine** vezérlőpulton kapcsold be a **Dinamikus láthatóság** kapcsolót (lásd: [Dinamikus láthatóság](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-lathatosag/)), és kattints a **Mentés** gombra.

### Megkülönböztető jelölő

A szabály csak akkor működik megbízhatóan, ha a rejtendő termékeket valami megkülönbözteti a többitől: egy címke vagy kategória. A példában az akciós termékek a „Sale” címkét kapták. A címkéket a **Termékek → Címkék** oldalon ellenőrizheted, és ha nincs ilyen, hozz létre egyet, és rendeld a termékekhez. Jegyezd meg a címke slugját.

### Az egyedi termék ára

1. Nyisd meg a **Crocoblock → Woo Page Builder** oldalt, keresd meg az egyedi termék sablonját, és szerkeszd Elementorral.
2. Duplikáld a **Single Price** widgetet (jobb gomb, **Duplicate**): két ármezőre van szükség, mert mindkettőhöz más szabály tartozik.
3. Az első ármezőnél a **Speciális → Dinamikus láthatóság** részben kapcsold be a láthatóságot, a típus legyen „Show element if condition met”, és vegyél fel két feltételt: „User logged in” és „Post Has Terms”. Utóbbinál a **Taxonomy** legyen „Product tags”, a **Value** mezőbe pedig a címke slugja kerüljön. A **Relation** legyen **AND**.
4. A második ármezőnél a típus legyen „Hide element if condition met”, és egyetlen feltétel kell: „Post Has Terms”, ugyanazzal a **Taxonomy** és **Value** értékkel.
5. Kattints a **Frissítés** gombra.

### Az üzlet oldala

Ugyanezt végezd el a bolt archív sablonjain: a **Crocoblock → Woo Page Builder** oldalon nyisd meg a megfelelő elemet (a példában „Shop Grid”), duplikáld a **Single Price** widgetet, és állítsd be mindkét mezőre a fenti szabályokat. Ha a **Products Loop** widgetet használod, a lista (**Shop List**) és a rács (**Shop Grid**) sablont is módosítsd. Mentsd az összes változást. A weboldalon a nem bejelentkezett látogatónak az akciós termékek ára sem az üzlet oldalán, sem az egyedi termék oldalon nem látszik.

### Felugró ablak a magyarázathoz

A látogató nem fogja tudni, miért nincs ár. Egy felugró ablakkal jelezheted, hogy be kell jelentkeznie.

1. Hozz létre felugró ablakot (a könyvtárból előre elkészített elrendezést is választhatsz), és írd át a szövegét Elementorban.
2. A **Crocoblock → Woo Page Builder** oldalon nyisd meg szerkesztésre a sablonokat, ahol az árak szabályát beállítottad (a „Shop List”, a „Shop Grid” és az egyedi termék sablont).
3. Húzz az oldalra egy **Icon List** widgetet, és a **Tartalom** fülön adj neki ikont és szöveget.
4. A **Speciális** fülön nyisd meg a **JetPopup** részt, az **Attached Popup** mezőben válaszd ki a felugró ablakot, és állítsd be a **Trigger Type** értékét.
5. A **Dinamikus láthatóság** résznél: kapcsold be, a típus „Show element if condition met”, a feltételek: „User not logged in” és „Post Has Terms” (a **Taxonomy** „Product tags”, a **Value** `sale`), a **Relation** pedig **AND**.

Az akciós terméknél a nem bejelentkezett látogató így a felugró ablakot nyitó szöveget látja az ár helyett.

### Blokkszerkesztő

1. Jelöld ki a blokkot (például az ár blokkját), és kattints az eszköztár szem ikonjára.
2. Kapcsold be az **Enable** kapcsolót, a típus legyen „Show element if condition met”.
3. Az **Add new item** gombbal adj hozzá feltételt, és a listában válaszd a „User logged in” elemet.
4. Frissítsd az oldalt: a nem bejelentkezett látogatónak az ár rejtve marad.

További feltételeket ugyanúgy veheted fel, ahogy az Elementoros példában.