# Szűrők kézi bevitelű opciókkal

> Jelölőnégyzetes, legördülő és vizuális szűrő, amelynek opcióit te adod meg, JetEngine jelölőnégyzet- és választómezők értékeihez.

A **Kézi bevitel** adatforrásnál az opciókat te adod meg. A szűrő az opció értékét hasonlítja össze a szűrt elemek metamezőjének értékével. Ez a fejezet három tipikus esetet mutat be: jelölőnégyzet metamező, **Select** metamező és vizuális szűrő.

## Közös szabályok

- Az opció **Value** (érték) mezőjének pontosan egyeznie kell azzal az értékkel, amelyet a szűrt elemek metamezője tárol. Ha nem egyezik, a szűrés nem talál elemet.
- A **Lekérdezési változó** mezőbe a metamező Name/ID értéke kerül. A mező kötelező.
- Az **Is Checkbox Meta Field** kapcsoló csak aktív JetEngine mellett látszik. Akkor kapcsold be, ha a mező értéke tömb, például a JetEngine jelölőnégyzet mezőjénél. Rádiógombos vagy sima választómezőnél maradjon kikapcsolva.

![Vizuális szűrő a Kézi bevitel adatforrással](./kepek/adatforras-vizualis-kezi.webp)

*Vizuális szűrő a Kézi bevitel adatforrással* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters)

A képen a vizuális szűrő **Típus** és **Viselkedés** listája, az **Is Checkbox Meta Field** kapcsoló és a **Lekérdezési változó** látszik.

## Szűrés JetEngine jelölőnégyzet mező szerint

Előfeltétel: van egy egyéni bejegyzéstípusod néhány bejegyzéssel, és a típushoz JetEngine jelölőnégyzet metamezőt vettél fel.

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt.
2. Add meg a szűrő nevét, a **Szűrőcímke** és az **Aktív szűrőcímke** mezőt.
3. A **Szűrő beállításai** résznél a **Szűrő típusa** legyen **Jelölőnégyzetek listája**, az **Adatforrás** pedig **Kézi bevitel**.
4. Kapcsold be az **Is Checkbox Meta Field** kapcsolót, mert jelölőnégyzet mezőből szűrsz.
5. Az **Opciók listája** résznél kattints az **Add New** gombra, és minden opciónál add meg a **Value** és a **Label** mezőt ugyanúgy, ahogy a metamezőben az opciót létrehoztad.
6. A **Lekérdezési változó** mezőbe írd a metamező Name/ID értékét.
7. Mentsd a szűrőt a **Publish** (meglévő szűrőnél **Update**) gombbal.

![Jelölőnégyzetes szűrő a Kézi bevitel adatforrással](./kepek/adatforras-kezi-bevitel.webp)

*Jelölőnégyzetes szűrő a Kézi bevitel adatforrással* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters)

A képen az **Opciók listája** és az **Is Checkbox Meta Field** kapcsoló látszik.

Hogy a szűrő működjön, ugyanazokat az opciókat kell felvenned, mint amelyek a metamezőben vannak.

## Legördülő szűrő JetEngine Select mező szerint

A példában események szűrése a résztvevők száma szerint. Előfeltétel: JetEngine aktív, és létezik **Select** típusú metamező.

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt, és add meg a szűrő nevét (például „Résztvevők száma”).
2. A **Szűrő típusa** legyen **Kiválasztás**, az **Adatforrás** pedig **Kézi bevitel**.
3. Az **Opciók listája** résznél az **Add New** gombbal vegyél fel minden opciót. Egy opciónak két mezője van: a **Label** (ezt látják a látogatók) és a **Value**, amelynek meg kell egyeznie a metamező opciójának értékével.
4. A **Lekérdezési változó** mezőbe írd a **Select** metamező Name/ID értékét.
5. Töltsd ki a **Szűrőcímkék** részt, és mentsd a szűrőt.

![Legördülő szűrő a Kézi bevitel adatforrással](./kepek/adatforras-kezi-kivalasztas.webp)

*Legördülő szűrő a Kézi bevitel adatforrással* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters)

A képen az **Opciók listája** az **Add New** gombbal, a **Helykitöltő**, a **Lekérdezési változó** és az **Összehasonlító operátor** (alapértéke **Egyenlő (=)**) látszik.

Az oldalon:

1. Szerkeszd azt az oldalt, amelyiken a szűrendő lista van. Elementorban, a blokkszerkesztőben és Bricksben is megy; a példában a lista egy Listing Grid.
2. Tedd a listarács fölé a legördülő szűrő widgetjét.
3. A **Select filter** mezőben keresd meg az új szűrőt.
4. A **This filter for** mezőben válaszd ki a szolgáltatót, itt a **JetEngine** értéket.
5. Mentsd az oldalt.

A nyilvános oldalon az opció kiválasztása után a lista csak azokat az elemeket mutatja, amelyeknél a mező az adott értéket tartalmazza.

## Vizuális szűrő kézi bevitellel

Előfeltétel: Elementor vagy a blokkszerkesztő, és olyan metamező, amelynek értékei az opciók lesznek.

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt, add meg a nevet, a **Szűrőcímke** és az **Aktív szűrőcímke** mezőt, és válaszd a **Vizuális** szűrőtípust.
2. Az **Adatforrás** legyen **Kézi bevitel**.
3. A **Típus** listában válaszd a **Szín** lehetőséget, ha színmintákat akarsz megadni színválasztóval vagy kóddal, vagy a **Kép** lehetőséget, ha képeket töltesz fel az opciókhoz.
4. A **Viselkedés** listában a **Jelölőnégyzet** egyszerre több opció kiválasztását engedi, a **Rádió** csak egyet.
5. Az opciók listáján add meg minden opciónál a **Label**, a **Value** és a szín mezőt. Kép típusnál a szín helyett képmező jelenik meg: tölts fel egyet a médiatárba, vagy válassz egy meglévőt.
6. Az opciókat húzással rendezheted át, a megfelelő ikonokkal másolhatod vagy törölheted őket.
7. Ha jelölőnégyzet metamezőből szűrsz, kapcsold be az **Is Checkbox Meta Field** kapcsolót. Rádiónál hagyd kikapcsolva.
8. A **Lekérdezési változó** mezőbe írd a metamező nevét.
9. Mentsd a szűrőt.

Az opció **Value** értékének egyeznie kell a szűrt elemekben tárolt metamező-értékkel.

### A szűrő widgetje az oldalon

A szűrő beállításai Elementorban és a blokkszerkesztőben nagyjából megegyeznek. A **Tartalom / Általános** részen:

| Beállítás | Mit csinál |
| --- | --- |
| **Select Filter** | A megjelenítendő szűrő. |
| **This filter for** | A szűrő szolgáltatója. |
| **Apply type** | **Page Reload** vagy **AJAX** (az oldal újratöltése nélkül). |
| **Apply on** | Mikor induljon a szűrés. |
| **Show apply button** | Megjeleníti az alkalmazás gombot, ha az indítás ezt igényli. |
| **Show filter label** | A szűrőcímke megjelenítése az opciók fölött. |
| **Query ID** | Csak Elementorban. Akkor add meg, ha egy oldalon több azonos szolgáltató van. |
| **Additional Providers Enabled** | Csak Elementorban. Több szolgáltató egy szűrőhöz. |

A **Filter Options** fülön a **Show items label** kapcsoló a színcímkéket jeleníti meg, az **Image Size** pedig a kép típusú szűrő képméretét adja meg. Van még **Additional Settings** és **Indexer Options** fül is. A blokkszerkesztőben a **Haladó** részen az **Additional CSS class(es)** mezőbe írhatsz saját CSS-osztályt a formázáshoz.

Mentsd vagy publikáld az oldalt, majd a nyilvános oldalon próbáld ki a szűrőt.

Kapcsolódó fejezetek: [Adatforrások áttekintése](https://hub.hellowp.io/hu/plugins/jet-smart-filters/adatforras-attekintes/), [Szolgáltatók](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szuro-beallitasok-szolgaltatok/), [Query ID útmutató](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-query-id/).