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

> Jelölőnégyzetes szűrő készítése osztályozás kifejezéseiből, vizuális szűrő képpel vagy színnel taxonómia és bejegyzések forrással.

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](https://hub.hellowp.io/hu/plugins/jet-smart-filters/adatforras-attekintes/) 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átor**t: **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.

![Jelölőnégyzetes szűrő taxonómia forrással](./kepek/jelolonegyzet-taxonomia.webp)

*Jelölőnégyzetes szűrő taxonómia forrással* (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.

![Vizuális szűrő beállításai taxonómia forrással](./kepek/adatforras-vizualis-taxonomia.webp)

*Vizuális szűrő beállításai taxonómia forrással* (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.

![Vizuális szűrő beállításai bejegyzések forrással](./kepek/adatforras-vizualis-bejegyzesek.webp)

*Vizuális szűrő beállításai bejegyzések forrással* (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.