# Kedvencek oldal készítése adattárral

> Kedvencek vagy kívánságlista oldal lépésről lépésre: tár, hozzáadó és eltávolító gomb, lekérdezés, Listing Grid, számlálók Elementorban, blokkszerkesztőben és Bricksben.

Egy kedvencek vagy kívánságlista oldallal a látogatók egy külön tárba tehetik azokat az elemeket, amelyekhez később vissza akarnak térni. Ez a fejezet egy teljes példát mutat be: két oldal készül, az egyiken a lista minden elemével és egy „Kedvencekhez” gombbal, a másikon a „Kedvencek” oldalon a már mentett elemekkel és egy „Eltávolítás” gombbal.

Előfeltétel, hogy az [Adattárak modul be legyen kapcsolva](https://hub.hellowp.io/hu/plugins/jet-engine/adattarolo-adattarak/), és legyen egy listázási sablonod a megjelenítendő elemekhez.

## 1. lépés: a tár létrehozása

1. Nyisd meg a **JetEngine → JetEngine → Adattárak** fület, és kattints a **+ Új tár** gombra.
2. Add meg a **Nevet** (például „Kedvencek”) és a **Slugot**.
3. Válaszd ki az **Áruház típusát**. A kedvencek maradjanak meg a böngészőben vagy a fiókban? Bejelentkezett felhasználóknak a **Felhasználói metaadatok** a tartós megoldás.
4. Állítsd be a **Maximális méretet**. Túl sok tárolt elem lassíthatja az oldalt, túl kevés zavarhatja a látogatót. A **0** korlátlan.
5. Ha ki akarod írni, hányszor kedvelték az egyes elemeket, kapcsold be az **Elemek számolása** kapcsolót.
6. Kattints a **Mentés** gombra.

A beállítások részletes leírása az [Adattárak](https://hub.hellowp.io/hu/plugins/jet-engine/adattarolo-adattarak/) fejezetben van.

## 2. lépés: a „Kedvencekhez” gomb

A gombot a listázási sablonba teszed, így minden elem mellett megjelenik. Két eszköz is alkalmas rá: a **Data Store Button** ([beállításai külön fejezetben](https://hub.hellowp.io/hu/plugins/jet-engine/adattarolo-adattar-gomb/)) vagy a **Dynamic Link**.

### Dynamic Link Elementorban

1. Nyisd meg a listázási sablont szerkesztésre a **JetEngine → Listázások/komponensek** oldalról.
2. Húzd be a **Dynamic Link** widgetet.
3. A **Forrás** listában válaszd az **Add to store** értéket. Ez a hivatkozás az elemet a tárba teszi.
4. Válaszd ki a tárat, és add meg a címkét (például „Kedvencekhez”).

Az értékhez tartozó további beállítások:

| Beállítás | Mit csinál |
|---|---|
| **Select store** | Melyik tárba kerüljön az elem, ha több tárad van. |
| **Added to store text** | A felirat, amelyet a látogató a hozzáadás után lát. |
| **Added to store URL** | A hivatkozás címe a hozzáadás után. Ide a „Kedvencek” oldal címét írd, hogy a látogató egy kattintással odaléphessen. |
| **Added to store icon** | A hozzáadás utáni felirat melletti ikon, az ikontárból vagy saját SVG-ből. |

### Dynamic Link a blokkszerkesztőben

A listázási sablonban add hozzá a **Dynamic Link** blokkot, és írd be a tár slugját a **Set store slug** mezőbe. Ha a hozzáadás után hivatkozást akarsz a kedvencek oldalra, töltsd ki az **Added to store link text** és az **Added to store link URL** mezőt: a hivatkozás ekkor átalakul, és a tár oldalára visz. Add meg a hivatkozás címkéjét és az ikont, majd stílusozd a blokkot (a **Block Style** fül a Jet Style Manager bővítménnyel érhető el), és kattints a **Frissítés** gombra.

## 3. lépés: az „Eltávolítás” gomb

Az eltávolító gombot külön listázási sablonba érdemes tenni, amelyet csak a „Kedvencek” oldalon használsz. Így a gomb csak a már mentett elemeken látszik.

1. Készíts vagy nyiss meg egy listázási sablont.
2. Add hozzá a **Dynamic Link** widgetet vagy blokkot.
3. A **Forrás** értéke legyen **Remove from store**.
4. Add meg a címkét (például „Eltávolítás a kedvencekből”), állítsd be a stílust, és mentsd a sablont.

## 4. lépés: a tár tartalmát lekérdező Posts Query

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra.
2. Adj nevet a lekérdezésnek, és válaszd a **Bejegyzések lekérdezése** típust.
3. Az **Általános** fülön válaszd ki azt a bejegyzéstípust, amelyhez a tárat létrehoztad.
4. A **Bejegyzés és oldal** fülön kattints a **Post In** mező melletti érmehalom alakú gombra.
5. A legördülő listában válaszd a **Get store** makrót, jelöld ki a tárat, és kattints az **Alkalmaz** gombra.
6. Kattints a **Lekérdezés hozzáadása** gombra.

Tárhoz kötött lekérdezéshez létezik külön [Data Store Query típus](https://hub.hellowp.io/hu/plugins/jet-engine/query-builder-adattar-lekerdezes/) is.

## 5. lépés: a kedvencek oldal

1. Hozz létre egy oldalt „Kedvencek” címmel, és nyisd meg a szerkesztőben.
2. Add hozzá a **Listing Grid** elemet, és válaszd ki az eltávolító gombos listázási sablont.
3. Nyisd meg az **Egyéni lekérdezés** fület (Custom Query), kapcsold be a **Use Custom Query** kapcsolót, és a **Custom Query** listában válaszd ki az előző lépésben készített lekérdezést.
4. Ha a tár még üres, a lista a „Nincs adat” üzenetet írja ki. Ennek elrejtéséhez a Listing Grid **Widget láthatóság** fülén állítsd be, hogy a widget rejtve legyen, ha a **Query is empty** feltétel igaz.
5. Mentsd az oldalt.

A főoldalon (vagy ahol az összes elemet listázod) ugyanígy használj egy Listing Gridet, amely a „Kedvencekhez” gombos sablont tölti be.

## 6. lépés: számlálók (csak Elementorban)

A két számláló a dinamikus címkékkel készül a **Heading** widgetben. Blokkszerkesztőben nem érhetők el.

### Tárban lévő elemek száma

1. A kedvencek oldalon, Elementorban, húzz be egy **Heading** widgetet.
2. A **Cím** mező melletti **Dynamic Tags** gombbal válaszd a **Data Stores: Store Count** címkét.
3. A **Settings** részben válaszd ki a tárat. A számláló csak akkor működik, ha a tárban be van kapcsolva az elemek számolása.
4. Az **Advanced** részben megadhatod a számláló előtti (**Before**) és utáni (**After**) szöveget, és a **Fallback** mezőben azt a szöveget, ami az üres tárnál jelenik meg.

A szöveg és a szám közötti távolsághoz használj külön térközelemet (spacer).

### Hányszor kedvelték az elemet

1. A listázási sablonban, Elementorban, húzz be egy **Heading** widgetet.
2. A **Dynamic Tags** gombbal válaszd a **Data Stores: Post Count** címkét.
3. A beállítások ugyanazok, mint a másik számlálónál. Egyetlen többlet a **Specific post ID**: ha ide egy bejegyzés azonosítóját írod, a számláló azt mutatja, hányszor adták hozzá éppen azt az elemet.

## Ugyanez Bricksben

A példa a Termékek bejegyzéstípussal készül.

### Előkészület

1. Nyisd meg a **Bricks → Settings** oldalt, és a **Post types** részben kapcsold be a **Page** és a **Listing Items/Components** kapcsolót, majd mentsd a beállításokat. Enélkül a Bricks nem tud oldalakkal és JetEngine listázási sablonokkal dolgozni.
2. Hozd létre a tárat a **JetEngine → JetEngine → Adattárak** fülön, például „Kedvencek” névvel. A **Session** típusú tárak ütközhetnek a gyorsítótárazó bővítményekkel.

### A gomb a listázási sablonban

1. A **JetEngine → Listázások/komponensek** oldalon nyiss meg egy termék listázási sablont, vagy készíts újat.
2. Húzd be a **Data Store Button** elemet.
3. A **Select store** listában válaszd ki a tárat, a **Label** mezőt hagyd üresen, és válassz ikont (például szívet).
4. Az **Action after an item added to store** értéke legyen **Remove from store button**, az **Icon after added to store** értéke pedig például egy X-ikon.
5. A **STYLE → ICON** részben beállíthatod az ikon színét alap állapotban és a hozzáadás után.
6. Mentsd a sablont.

### A lekérdezés és az oldalak

1. Hozd létre a **Posts Query** lekérdezést a [4. lépés](#4-lépés-a-tár-tartalmát-lekérdező-posts-query) szerint, a **Termékek** bejegyzéstípussal és a **Get store** makróval, az adatbázis ikonra kattintva a **Post In** mező mellett.
2. Készíts egy Bricks oldalt az összes termékhez: tegyél rá egy **Listing Grid** elemet, és válaszd ki a listázási sablont. A termékek mellett megjelenik a gomb. Ha egy termékre rákattintasz, az ikonja átvált az eltávolító ikonra.
3. Készíts egy „Kedvencek” oldalt: tegyél rá egy másik **Listing Grid** elemet, válaszd ki ugyanazt a sablont, nyisd meg az **Egyéni lekérdezés** fület, kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a tárhoz készített lekérdezést.
4. Mentsd az oldalt. A kedvencek oldalon az elemek az X-ikonnal törölhetők a tárból.