Szűrő taxonómiával és vizuális szűrő

Ez a fejezet három példát ír le: jelölőnégyzetes szűrőt taxonómiával, vizuális szűrőt taxonómiával és vizuális szűrőt bejegyzésekkel. A források mezőit az Adatforrások áttekintése sorolja fel.

Jelölőnégyzetes szűrő taxonómiával

Előkészület

1. Hozz létre JetEngine-nel egyéni bejegyzéstípust, és vegyél fel néhány bejegyzést.
2. Készíts egyéni osztályozást szülő és gyermek kifejezésekkel (a példában könyvműfajok), és rendeld a kifejezéseket a bejegyzésekhez.
3. Jeleníts meg a szűrendő Listing Griden a kifejezéseket (a JetEngine Dynamic Terms widgetjével).

A szűrő

1. Nyisd meg az Intelligens szűrők → Új hozzáadása oldalt.
2. Írd be a szűrő nevét, a Szűrőcímke és az Aktív szűrőcímke mezőt.
3. A Szűrő típusa legyen Jelölőnégyzetek listája, az Adatforrás Taxonómiák.
4. Válaszd ki az Osztályozás (taxonomy) mezőben a létrehozott osztályozást.
5. Állítsd be a Relációs operátort: Unió esetén az elemek akkor jelennek meg, ha a kijelölt kifejezések valamelyikéhez tartoznak, Metszet esetén csak akkor, ha mindegyikhez.
6. Szükség szerint kapcsold be az Üres kifejezések megjelenítése, a Csak az aktuális kifejezés gyermekeinek megjelenítése (a gyermekek a szülők alatt jelennek meg, behúzás nélkül) és a Kifejezések csoportosítása szülőik szerint kapcsolót (megtartja a hierarchiát).
7. Az Is Checkbox Meta Field maradjon kikapcsolva: csak metamező szerinti szűrésnél kell.
8. A Kizárás/Bevonás mezővel egyes kifejezéseket elrejthetsz vagy kizárólagosan mutathatsz.
9. Mentsd a szűrőt az Update gombbal.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters

A képen a Taxonómiák forrás beállított mezői látszanak.

Az oldalon

1. Szerkeszd azt az oldalt, amelyiken a szűrendő lista van.
2. Add hozzá a jelölőnégyzetes szűrő widgetjét (blokkját, elemét).
3. A Select filter listából válaszd ki a szűrőt, a This filter for listából a szolgáltatót (például JetEngine a Listing Gridhez).
4. Mentsd az oldalt, és próbáld ki a nyilvános oldalon.

Vizuális szűrő taxonómiával

A vizuális szűrő a kifejezésekhez képet vagy színt rendel. A példában autóosztályok szerint szűrünk, minden opcióhoz egy-egy képpel. Elementor (ingyenes), Gutenberg és Bricks mellett is ugyanígy működik.

A szűrő

1. Az Intelligens szűrők → Új hozzáadása oldalon add meg a nevet, a Szűrő típusa legyen Vizuális.
2. Az Adatforrás legyen Taxonómiák, és válaszd ki az Osztályozás (taxonomy) mezőben a használni kívánt osztályozást.
3. A Típus lehet Color (színes) vagy Image (képes) opció.
4. A Viselkedés lehet Checkbox (több opció is kijelölhető) vagy Radio (egyszerre csak egy).
5. Az Opciók listája alatt az Add New gombbal vegyél fel egy opciót: a Label a szűrőben látszó felirat, a Value az adatbázisban tárolt érték.
6. Color típusnál az alapértelmezett fekete négyzetre kattintva választasz színt, Image típusnál a Choose an image gombbal a médiatárból képet.
7. Vedd fel így az összes többi opciót is.
8. Töltsd ki a Szűrőcímke és az Aktív szűrőcímke mezőt, és mentsd a szűrőt.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters

A képen a Típus, a Viselkedés és a kifejezések kezelésére szolgáló kapcsolók látszanak.

Az oldalon

1. Nyisd meg az oldalt a szerkesztőben (Elementor, Gutenberg vagy Bricks).
2. Példánkban két oszlopot hozunk létre: az egyikbe a szűrő, a másikba a szolgáltató kerül.
3. Húzd be a Vizuális szűrő widgetet, és a Select filter listából válaszd ki a szűrőt.
4. A This filter for listából válaszd ki a szolgáltatót (a példában JetEngine).
5. A Style fülön igény szerint alakítsd a megjelenést.
6. Add hozzá a szolgáltatót, például a Listing Grid widgetet a kész listing sablonnal (a példában az oszlopok száma 1).
7. Mentsd az oldalt.

A nyilvános oldalon egy vagy több opciót kijelölve a lista csak a megfelelő kifejezéshez tartozó bejegyzéseket mutatja.

Vizuális szűrő bejegyzésekkel

A vizuális szűrő nem csak termékekhez, hanem bármilyen bejegyzéstípushoz használható. Ehhez JetEngine kapcsolat (Relation) kell. Mindegy, hogy egy-az-egyhez, egy-a-többhöz vagy több-a-többhöz kapcsolatot készítesz, de a szűrőt egyetlen kapcsolathoz állítsd be. A példában a Country egyéni bejegyzéstípus a szülő, a Tours a gyermek, egy-a-többhöz kapcsolattal.

A szűrő

1. Az Intelligens szűrők → Új hozzáadása oldalon add meg a nevet, a Szűrő típusa legyen Vizuális.
2. Az Adatforrás legyen Bejegyzések, a Bejegyzés típusa pedig az a típus, amelyik a kapcsolatban a szülő.
3. A Típus lehet Color vagy Image, a Viselkedés Checkbox vagy Radio. Ezek a jelölőnégyzetes szűrőhöz, illetve a választógombhoz hasonlóan működnek.
4. Az Opciók listája alatt az Add New gombbal vedd fel az opciókat a szülő típus bejegyzései szerint. A Label nem kötelező, vizuális típusnál gyakran üresen marad, mert a szín vagy a kép többet mond. A Value listából azt a bejegyzést válaszd, amelyik a szülő típusban létezik. Ezután add meg a színt vagy válaszd ki a képet.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters

A képen a Bejegyzés típusa, a Típus és a Viselkedés mezője látszik.

5. Radio viselkedésnél további beállítások jelennek meg:

Beállítás	Mit csinál
Add all option	Hozzáad egy plusz opciót, amellyel a látogató az összes tartalmat egyszerre mutathatja.
All option label	Az alapértelmezett „All” felirat átírható. A mező alatt a Choose an image gombbal az „összes” opcióhoz is választhatsz képet.
Ability to deselect radio buttons	Kikapcsolja a kijelölt opció rögzítését, így a kijelölés megszüntethető.

6. Az Is Checkbox Meta Field csak akkor kell, ha az opciók a JetEngine metadobozából jönnek.
7. A Lekérdezési változó mellett kattints a Dynamic Tags gombra, válaszd a „JetEngine: filters children items by parent IDs” lehetőséget, és add meg a használt kapcsolatot (Relation).
8. Töltsd ki a Szűrőcímke és az Aktív szűrőcímke mezőt (utóbbi az aktív szűrők és az aktív címkék elemén jelenik meg), és mentsd a szűrőt.

Az oldalon

1. Nyisd meg az oldalt Elementorban, Gutenbergben vagy Bricksben, és húzd be a Vizuális szűrő elemét.
2. A Select filter listából válaszd ki a szűrőt, a This filter for listából a szolgáltatót (bejegyzés alapú listánál JetEngine).
3. Válaszd ki az Apply type értékét (AJAX vagy Page reload) és az Apply on eseményt.
4. Szükség esetén kapcsold be a Show apply button és a Show filter label kapcsolót.
5. Ha az oldalon több szolgáltató van, a Query ID mezőbe azt a CSS ID-t írd, amelyiken a szűrendő szakasz azonosítva van. Az Additional Providers Enabled kapcsolóval egy szűrő több szolgáltatóra is hat.
6. A Filter Options fülön a Show items label kapcsolóval elrejtheted az opciók melletti feliratot, az Image Size listában pedig kiválaszthatod a képméretet.
7. A Style fülön alakítsd a megjelenést, majd mentsd az oldalt, és próbáld ki a nyilvános oldalon.

Haladó lehetőség: ha a listing sablon maga működjön szűrőként, használhatod a JetEngine ingyenes Listing as Filter kiegészítőjét, amellyel a listing sablonok interaktív szűrőként viselkednek.