# Szűrők egyéni tartalomtípushoz Divi alatt

> Négy szűrő (keresés, tartomány, kiválasztás, jelölőnégyzetek) létrehozása a JetEngine egyéni tartalomtípusához a Divi szerkesztőben, Listing Grid szolgáltatóval.

Ez a fejezet példán mutatja meg, hogyan szűrheted a JetEngine egyéni tartalomtípusát (CPT) a Divi szerkesztőben. A példában egy „Hirdetések” tartalomtípus járműveit szűrjük négy szűrővel:

- **Keresés** szűrő: a hirdetések keresése kulcsszóval;
- **Tartomány** szűrő: a járművek szűrése ár szerint;
- **Kiválasztás** szűrő: szűrés a motor típusa szerint (JetEngine szószedetből);
- **Jelölőnégyzetek listája** szűrő: szűrés a váltó típusa szerint (JetEngine szószedetből).

Mind a négy szűrő egy **Listing Grid** modulra hat, amely a „Divi” megjelenítésű listingből építkezik. A példa tartalomtípusa több hirdetést, három metamezőt (**Motor típusa**, **Váltó**, **Ár**) és a motor- és váltótípushoz kapcsolt szószedetet tartalmaz.

## Követelmények

- Divi 5 téma, telepítve és aktiválva.
- A JetEngine Divi Views kiegészítő, telepítve és aktiválva.
- A JetSmartFilters és a JetEngine bővítmény aktív.
- A JetEngine-ben létrehozott egyéni tartalomtípus, benne felvett bejegyzésekkel.

A Divi Views kiegészítő aktiválása után a telepítővarázsló nyílik meg, itt telepítheted a dinamikus funkciókat.

## Listing építése

Először a szűrendő listinget készítsd el.

1. Nyisd meg a **JetEngine → Listings/Components** oldalt, és kattints az **Add New Item** gombra.
2. A felugró ablakban hagyd a listing forrását **Posts** értéken, a **From post type** listából válaszd ki a tartalomtípusodat.
3. Add meg a listing nevét, és válaszd a „Divi” megjelenítést.
4. Kattints a **Create Listing Item** gombra: megnyílik a Divi szerkesztő.

Ezután add hozzá a dinamikus tartalmat megjelenítő modulokat:

1. **Dynamic Image** modul: az **Általános** fülön a **Source** marad **Post thumbnail**.
2. **Dynamic Link** modul a bejegyzés címével: a beállításait hagyd alapon. A **Design** fülön az **Alignment** legyen **Center**.
3. **Dynamic Field** modul a motor típusához:
   - **Source**: **Meta Data**, a **Meta Key** mezőben válaszd ki a korábban létrehozott **Motor típusa** metamezőt.
   - A **Layout** fülön kapcsold be a **Filter Field Output** kapcsolót. Mivel a metamező típusa jelölőnégyzet, a **Callback** listából a **Checkbox field values** értéket válaszd.
   - Kapcsold be a **Customize Field Output** kapcsolót, és a **Field Format** mezőbe írd: `Motor típusa: %s`. A „Motor típusa:” rész mindig megjelenik, a `%s` helyére kerül a dinamikus érték.
   - A **Design** fülön a **Field Elements Position** és a **Field Content Alignment** is legyen **Center**.
4. Második **Dynamic Field** modul a váltóhoz: **Source** **Meta Data**, **Meta Key** a **Váltó** metamező. A **Layout** fülön kapcsold be a **Filter Field Output** kapcsolót (**Callback**: **Checkbox field values**) és a **Customize Field Output** kapcsolót, a **Field Format** értéke `Váltó: %s`. A **Design** fülön itt is **Center** az elemek helye és a tartalom igazítása.
5. Harmadik **Dynamic Field** modul az árhoz: **Source** **Meta Data**, **Meta Key** az **Ár** metamező. A **Layout** fülön kapcsold be a **Customize Field Output** kapcsolót, a **Field Format** értéke `Ár: %s Ft`. A **Design** fülön itt is **Center** az elemek helye és a tartalom igazítása.
6. Mentsd a listing elemet.

## A szűrők létrehozása

A szűrőket az **Intelligens szűrők → Új hozzáadása** oldalon hozod létre, a szokásos módon ([A szűrők létrehozása](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szuro-letrehozasa/)). Bármelyik támogatott szűrőtípust használhatod, a példa a négy leggyakoribbat mutatja.

### Keresés szűrő

1. Add meg a szűrő nevét (például „Kereső szűrő”), és válaszd a **Keresés** szűrőtípust.
2. A **Keresés ezzel** listából válaszd az alapértelmezett WordPress-keresést.
3. Töltsd ki a címkéket, majd mentsd a szűrőt az **Update** gombbal.

A típus további beállításait a [szűrőtípusokról szóló fejezet](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szurotipusok/) írja le.

### Tartomány szűrő

1. Add meg a nevet (például „Ártartomány szűrő”), és válaszd a **Tartomány** szűrőtípust.
2. Szükség esetén módosítsd a legkisebb és legnagyobb értéket. A példában a legnagyobb érték 500000.
3. A lépésköz legyen 1000.
4. Az értékek előtagja a példában a pénznem jele. Más beállításokat is módosíthatsz igény szerint.
5. A **Lekérdezési változó** mezőbe a járművek árát tároló egyéni mező nevét írd.
6. Töltsd ki a címkéket, majd mentsd az **Update** gombbal.

### Kiválasztás szűrő

1. Add meg a nevet (például „Motortípus szűrő”), és válaszd a **Kiválasztás** szűrőtípust.
2. Az **Adatforrás** mezőben válaszd a JetEngine szószedetet, majd a szószedetek közül a „Motor típusa” szószedetet.
3. A **Lekérdezési változó** mezőbe annak a metamezőnek a nevét írd, amely a szószedethez és a tartalomtípushoz kapcsolódik. A példában ez `engine-type`.
4. Töltsd ki a címkéket, és mentsd a szűrőt.

### Jelölőnégyzetek listája szűrő

1. A név legyen például „Váltó szűrő”, a szűrőtípus **Jelölőnégyzetek listája**.
2. Az adatforrás a JetEngine szószedet, válaszd ki a szükséges szószedetet.
3. A **Lekérdezési változó** mezőbe annak a metamezőnek a nevét/azonosítóját írd, amely a tartalomtípushoz tartozik, és ezt a szószedetet használja adatforrásként.
4. Töltsd ki a címkéket, majd mentsd az **Update** gombbal.

## Tartalom az oldalra

1. Nyisd meg a **Oldalak → Új oldal** menüpontot, és építs új oldalt Divivel.
2. Készíts kétoszlopos elrendezést.
3. Az első oszlopba tedd a szűrők moduljait: **Search Filter**, **Range Filter**, **Select Filter**, **Checkboxes Filter**.
4. Minden modulban válaszd ki a megfelelő, korábban létrehozott szűrőt, és a **This Filter For** mezőben add meg a szolgáltatót: **Listing Grid**. Egyéb modulbeállításokat igény szerint módosíthatsz.
5. A második oszlopba tedd a **Listing Grid** modult, és válaszd ki a megépített listing sablont.
6. Végezd el az oldal további testreszabását, majd mentsd.

Ezzel Divi alatt is AJAX-os szűrőt kapsz: a lista tartalma az oldal újratöltése nélkül frissül.

## Az eredmény ellenőrzése

Nyisd meg az oldalt a nyilvános felületen, és próbáld ki a szűrőket egyenként:

1. Írj egy keresőszót a keresőmezőbe.
2. Húzd el a tartományszűrő csúszkáját: a listának a megadott ártartományra kell szűkülnie.
3. Válassz egy értéket a **Kiválasztás** szűrőben.
4. Jelölj be egy vagy több lehetőséget a jelölőnégyzetes szűrőben.

Ha minden szűrő a várt módon szűkíti a listát, a beállítás kész.