# Szűrők használata ACF meta mezőkkel

> Az ACF-fel létrehozott meta mezők szűrése a JetSmartFilters szűrőtípusaival: jelölőnégyzet, kiválasztás, tartomány, értékelés, keresés és vizuális szűrő.

A JetSmartFilters kompatibilis az Advanced Custom Fields (ACF) bővítménnyel, ezért az ACF mezőkbe már beírt adatokat nem kell újra felvinned. Készíthetsz JetEngine listinget és Listing Gridet ACF mezőkkel, és az eredményt JetSmartFilters szűrőkkel szűkítheted.

## Követelmények

- ACF telepítve és aktiválva, mezőcsoporttal a JetEngine egyéni bejegyzéstípusához, kitöltött meta mezőkkel
- JetSmartFilters
- JetEngine egyéni bejegyzéstípussal és bejegyzésekkel

## Listing sablon

1. Nyisd meg a **JetEngine → Listings** oldalt, és kattints az **Add New** gombra.
2. A **Listing source** legyen **Posts**, a **From post type** az egyéni bejegyzéstípus. Add meg a listing nevét, és kattints a **Create Listing Item** gombra.
3. Add hozzá a **Dinamikus mező** widgetet. A **Content** részben a **Source** listából válaszd az **ACF** lehetőséget, az **ACF Field** listából pedig a megjeleníteni kívánt mezőt. A kimenetet ugyanúgy testre szabhatod, mint a JetEngine meta mezőknél.
4. Add hozzá a szükséges további widgeteket, majd kattints a **Publish** gombra.

## Listing Grid

1. Nyisd meg az oldalt Elementorral, amelyre a Listing Gridet szánod.
2. Add hozzá a **Listing Grid** widgetet, és a **Listing** listában válaszd ki az előbb létrehozott sablont.
3. Szabd testre, majd kattints a **Publish** gombra.

## Szűrő létrehozása ACF mező alapján

> **Vigyázat:** az ACF **Date Picker** és **Date Time Picker** mezői nem használhatók szűrésre. Az ACF ezeket a dátumokat olyan formában tárolja, amelyet a JetSmartFilters nem tud feldolgozni. A mezőket felveheted a listingbe, de a bejegyzéseket nem szűrheted rájuk. Ezért a **Dátumtartomány** és a **Dátum szerinti időszak** szűrőtípus ACF mezővel nem használható.

Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt, és válaszd ki a **Szűrő típusa** értéket. Az ACF mezők a JetEngine meta mezőkhöz hasonlóan, a szűrő **Lekérdezési változó** mezőjén át kapcsolódnak: ide az ACF mező **Field Name** értékét kell írni.

### Jelölőnégyzetek listája

1. Az **Adatforrás** legyen **Egyéni mezők**.
2. Kapcsold be a **Választási lehetőségek lekérése a mező adataiból** kapcsolót, és a **Field Source Plugin** listából válaszd az **ACF** lehetőséget.
3. Az ACF **Checkbox** mezőhöz kapcsold be az **Is Checkbox Meta Field** kapcsolót is. Nélküle az ACF meta adatokra épülő jelölőnégyzetes szűrő nem működik.
4. A **Lekérdezési változó** mezőbe írd be az ACF-ben létrehozott **Checkbox** mező **Field Name** értékét.

![A jelölőnégyzetes szűrő beállításai Egyéni mezők adatforrással](./kepek/integraciok-acf-jelolonegyzet.webp)

*A jelölőnégyzetes szűrő beállításai Egyéni mezők adatforrással* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters)

A képen az **Adatforrás** **Egyéni mezők**, alatta az **Egyéni mező kulcsa**, a **Választási lehetőségek lekérése a mező adataiból** és az **Is Checkbox Meta Field** kapcsoló, majd a **Lekérdezési változó** mező látszik.

### Kiválasztás és Választógomb

A **Kiválasztás** szűrő beállításai hasonlóak a jelölőnégyzetesére:

1. Ha hierarchiát szeretnél az ACF kiválasztás szűrőben, kapcsold be az **Is hierarchical** kapcsolót.
2. Az **Adatforrás** legyen **Egyéni mezők**.
3. Írd át a **Placeholder** szöveget, ha szeretnéd.
4. Kötelezően add meg az **Egyéni mező kulcsa** értéket, vagyis az ACF mező **Field Name** értékét.
5. A többi beállítás ugyanaz, mint a jelölőnégyzetes szűrőnél, de az **Is Checkbox Meta Field** kapcsolót itt nem kell bekapcsolni. Itt a **Relációs operátor** is beállítható.

A **Választógomb** szűrő ugyanezeket a mezőket kínálja, ezen felül van benne **Add all option** (az „összes” lehetőség felvétele) és **Ability to deselect radio buttons** (a választás megszüntethetősége) kapcsoló.

### Tartomány

A **Tartomány** szűrő legkisebb és legnagyobb értékét az ACF mezőből is veheted automatikusan: a **Get min/max dynamically** listában válaszd a **Get from query meta key** lehetőséget, majd a **Lekérdezési változó** mezőbe írd a meta mező **Field Name** értékét.

### Jelölőnégyzetes tartományszűrő

Az ACF mező adatainak használatához elég a **Lekérdezési változó** mezőbe beírni a meta mező **Field Name** értékét. A többi beállítás ugyanúgy állítható, mint a JetEngine meta mezőknél.

### Értékelés

1. A **Stars count** mezőben add meg, legfeljebb hány csillagot adhat a látogató.
2. Ha csak a pontosan ennyi csillagos bejegyzéseket akarod megtartani, az **Inequality** operátort állítsd **Equals (=)** értékre.
3. A **Lekérdezési változó** mezőbe írd be az értékelést tartalmazó ACF mező **Field Name** értékét.

### Keresés

A **Keresés** szűrő nem csak a címekben és a tartalomban kereshet, hanem egyetlen mezőben, például egy ACF szöveges mezőben is. A **Search by** listában válaszd a **By Custom Field** lehetőséget, és a **Lekérdezési változó** mezőben add meg a mezőt.

### Vizuális

A **Vizuális** szűrőt bármelyik ACF **Select** vagy **Radio** mezővel kombinálhatod.

1. Az **Adatforrás** legyen **Kézi bevitel**. A típusa **Image** vagy **Color** lehet, a **Behavior** listában pedig válaszd ki a kívánt működést.
2. A **Lehetőségek listája** mezőben a **New Option** gombbal vedd fel a lehetőségeket kézzel.
3. Ügyelj rá, hogy a lehetőségek **Value** értéke megegyezzen azzal, amit az ACF mező **Choices** szövegmezőjében használtál.
4. A **Lekérdezési változó** mezőbe írd be a használni kívánt mező nevét. Mivel ez nem JetEngine **Checkbox** mező, az **Is Checkbox Meta Field** kapcsolót hagyd kikapcsolva.

## A szűrő alkalmazása a Listing Gridre

1. Nyisd meg Elementorral az oldalt, amelyen a Listing Grid van, és tedd a szűrő widgetet a Listing Grid mellé.
2. A **Select filter** listában válaszd ki az ACF szűrőt. Mivel JetEngine Listing Gridre alkalmazod, a **This filter for** listában válaszd a **JetEngine** lehetőséget.
3. Ha az oldalon több JetEngine elem van, kattints a Listing Gridre, a **Haladó** fülön állítsd be a **CSS ID** értékét, másold ki, és illeszd be a szűrő **Query ID** mezőjébe.
4. A többi beállítást szabd testre, és kattints a **Publish** gombra.