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

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, é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 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) 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 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 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.