# Szűrők a Listing Gridhez

> A JetEngine Listing Grid szűrése: szűrő létrehozása, szolgáltató és alkalmazási mód, Query ID összekötése, több rács egy oldalon, lapozás és rendezés, gyakori hibák.

A JetEngine **Listing Grid** widgetje (blokkja, eleme) bejegyzéseket, termékeket, felhasználókat, egyéni tartalomtípusokat (CCT), kifejezéseket jelenít meg rácsban. A JetSmartFilters szűrői a rács lekérdezésének eredményét szűkítik a kiválasztott értékek szerint. Ez a fejezet azt írja le, hogyan kapcsolod össze a szűrőt és a rácsot. Elementorban, a blokkszerkesztőben, Bricksben és Diviben ugyanezek a lépések.

## Követelmények

- Elementor (az ingyenes is elég), blokkszerkesztő, Bricks vagy Divi.
- Aktív JetEngine és JetSmartFilters.
- Egy kész listing elem, amelyet a Listing Grid megjelenít.

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

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt.
2. Töltsd ki a mezőket:
   - **Szűrő neve**: a szűrő neve az admin listában, ez alapján találod meg.
   - **Szűrőcímke**: a szűrő mellett látszó felirat, a látogatónak segít megérteni, mire való.
   - **Aktív szűrőcímke**: a szűrő aktív állapotában, az **Aktív szűrők** és **Aktív címkék** elemekben megjelenő felirat.
   - **Szűrő típusa**: például **Jelölőnégyzetek listája**, **Kiválasztás** vagy **Keresés**. A típus dönti el, milyen további beállítások jelennek meg.
3. Példa: válaszd a **Jelölőnégyzetek listája** típust, adatforrásnak a **Taxonómiák** elemet, taxonómiának a **Kategória** lehetőséget. Itt állíthatod a sorrendet, az üres kifejezések megjelenítését, és kifejezéseket is belevehetsz vagy kizárhatsz.
4. Kattints az **Update** gombra.

Ha egy kötelező mező üres, a mentés nem sikerül, és az **Update** gomb mellett üzenet jelenik meg.

![A szűrők listája az Intelligens szűrők menüben](./kepek/szurok-lista.webp)

*A szűrők listája az Intelligens szűrők menüben* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters)

A listában látod a már létrehozott szűrőket. A szűrő beállításairól részletesen [A szűrők létrehozása](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szuro-letrehozasa/) szól.

## A rács és a szűrő az oldalon

1. Szerkeszd az oldalt, amelyen a szűrést szeretnéd. Add hozzá a **Listing Grid** elemet, és válaszd ki a listing elemet.
2. Add hozzá a szűrő típusának megfelelő widgetet (blokkot, elemet). Jelölőnégyzetes szűrőhöz a **Checkboxes Filter** widget kell. Válaszd ki benne a létrehozott szűrőt.
3. A **This filter for** mezőben válaszd ki a szolgáltatót. Listing Gridnél ez a **JetEngine**.

A szolgáltató csak akkor szerepel a listában, ha be van kapcsolva az **Intelligens szűrők → Beállítások → Általános beállítások** oldalon. Ha rossz szolgáltatót választasz, a szűrő nem hat a rácsra.

![Az Általános beállítások oldal szolgáltatókapcsolói](./kepek/beallitasok-altalanos.webp)

*Az Általános beállítások oldal szolgáltatókapcsolói* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-dashboard-settings-page&subpage=jet-smart-filters-general-settings)

A képen a szolgáltatók ki- és bekapcsolói látszanak. Amit nem használsz, kikapcsolhatod, így a lista rövidebb lesz, a weboldal pedig gyorsabb.

## Alkalmazási mód

A szűrő **Apply type** beállítása három értéket kínál. Ez határozza meg, hogyan frissül az eredmény.

| Alkalmazási mód | Mikor használd | Az URL |
| --- | --- | --- |
| **AJAX** | Átlagos szűrés oldaltöltés nélkül | Nem változik |
| **Mixed** (kevert) | Ha megosztható, szűrt URL kell | Frissül, de az oldal nem töltődik újra |
| **Page reload** | Statikus archívumok és SEO szempontból fontos oldalak | Az oldal teljesen újratöltődik |

A módokról bővebben az [Alkalmazási módok és Ajax-kérés típusa](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-alkalmazas-tipusok/) fejezetben olvashatsz. Ha az AJAX helyett teljes oldaltöltést látsz, először az alkalmazási módot, aztán a rács AJAX-beállításait nézd meg.

### A böngésző Vissza gombja

A **Vissza** gomb viselkedése is az alkalmazási módtól függ:

- **AJAX**: az URL nem változik, ezért a **Vissza** gomb az előző oldalra visz, nem a szűrés előtti állapotra.
- **Mixed**: a szűrő értékei az URL-ben vannak, így egy bejegyzésből visszalépve megmarad a szűrt találati lista. Könyvtáraknál, boltoknál, archívumoknál ez hasznos.
- **Page reload**: az értékek az URL-ben vannak, és az oldal is újratöltődik. A **Vissza** gomb az előző szűrt eredményhez vagy előre szűrt rácshoz visz.

## Lapozás, Továbbiak betöltése, végtelen görgetés

A Listing Grid **Posts number** (bejegyzések száma) beállítása, illetve az egyéni lekérdezés lapozási beállítása is hat a szűrésre. A **Load More** (Továbbiak betöltése) vagy a végtelen görgetés mellett ez a szám határozza meg, hány elem érhető el a szűréshez. Ha kisebb, mint az összes találat, a szűrt eredmény hiányos lehet.

Ilyenkor ezeket tapasztalhatod:

- ismétlődő bejegyzések,
- hiányos szűrési eredmény,
- hibás elemszám.

Ezért legalább annyi bejegyzést engedj meg a rácsban, ahány elem a szűrt eredményben elérhető. Ha egyéni lekérdezést használsz, a **Bejegyzések lekérdezése → Lapozás → Bejegyzések oldalanként** mezőben is beállíthatod.

![A Bejegyzések lekérdezése Lapozás szakasza a Query Builderben](./kepek/widgetek-query-builder-lapozas.webp)

*A Bejegyzések lekérdezése Lapozás szakasza a Query Builderben* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

A képen a lekérdezés **Lapozás** szakasza látszik, benne az oldalankénti bejegyzések száma.

## Mikor kell Query ID

Egyszerű rácsnál nem kell. Szükséges, ha:

- több rács vagy szűrő van egy oldalon, és a szűrőket külön szolgáltatóhoz kell kötnöd,
- az oldalon több egyéni lekérdezés van, és ezek zavarják a szűrést,
- Query Buildert használsz.

A **Query ID** egyetlen szöveges érték, amelyet minden érintett elemben ugyanúgy kell megadni.

### Hol kell ugyanannak az értéknek szerepelnie

| Hely | Melyik mező |
| --- | --- |
| A Query Builder lekérdezés | **Egyéni lekérdezés-ID** |
| A Listing Grid | **CSS ID** a **Haladó** (Advanced) részen |
| A szűrő widgetje | **Query ID** |
| A Lapozás és a Rendezés szűrő | **Query ID** |

Ha az egyik helyen más az érték, vagy üres, a kapcsolat elromolhat.

### Szabályok

- Betű, szám, kötőjel vagy aláhúzás használható.
- Szóköz nem lehet benne.
- A kis- és nagybetű számít: „myGrid” nem azonos a „mygrid” értékkel.
- Betűvel kezdődjön, számmal ne: „listing1” jó, „1listing” nem.

### Lépésről lépésre

1. **Query Builder (ha egyéni lekérdezést használsz).** Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, szerkeszd a lekérdezést, és az **Egyéni lekérdezés-ID** mezőbe írj egy egyedi értéket, például „ingatlanok-racs”. Mentsd a lekérdezést.

   ![Az Egyéni lekérdezés-ID mező a lekérdezés általános beállításai között](./kepek/widgetek-query-builder-altalanos.webp)

   *Az Egyéni lekérdezés-ID mező a lekérdezés általános beállításai között* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

   A képen az **Egyéni lekérdezés-ID** mező látszik. Ha egy típus összes elemét jeleníted meg (bejegyzések, taxonómia, felhasználók), a Query Builder nem szükséges. Egyéni lekérdezésnél kell: meta érték szerinti szűrésnél, több feltétel összefűzésénél, SQL-nél.

2. **A Listing Grid.** Nyisd meg az oldalt, kattints a rácsra, és a **Haladó** fülön a **CSS ID** mezőbe írd be ugyanezt az értéket.
3. **A szűrő.** Kattints a szűrő widgetjére, és a **Query ID** mezőbe írd be ugyanazt. A **This filter for** mezőben legyen a **JetEngine** szolgáltató kiválasztva.
4. Frissítsd az oldalt.

### Több Listing Grid egy oldalon

Ha több rács (vagy Map Listing) van az oldalon, mindegyik szűrhető rácsnak legyen saját, egyedi azonosítója. Különben a szűrő rossz rácsra vagy egyszerre többre hathat, vagy kiszámíthatatlanul viselkedik.

Példa két szűrővel és két rácssal:

1. Az első szűrő **Query ID** mezőjébe írd: „ingatlanok-racs”. Ugyanezt add meg az első rács **CSS ID** mezőjében.
2. A második szűrő **Query ID** mezőjébe írd: „kedvencek-racs”. Ugyanezt add meg a második rács **CSS ID** mezőjében.
3. Mentsd az oldalt.

Ha két (vagy több) szolgáltató közül az egyiket nem szabad szűrni, a **CSS ID** mezőjét hagyd üresen.

### Lapozás és rendezés: ugyanaz a Query ID

A **Lapozás** és a **Rendezés** szűrő **Query ID** mezőjébe is ugyanaz az érték kell, mint a rácson és a szűrőn. Különben:

- a lapozó eltűnik szűrés után,
- a rendezés rossz rácsot rendez,
- a lapozás nem őrzi meg a szűrt találatokat.

## A Listing Grid és az Elementor Loop Grid különbsége

Az Elementor Pro **Loop Grid** widgetje más szolgáltatói logikát használ, az AJAX, a lapozás és a keresés is másként viselkedik. Ennek a beállítása a [Szűrők az Elementor Pro Loop Gridhez](https://hub.hellowp.io/hu/plugins/jet-smart-filters/widgetek-loop-grid/) fejezetben van.

## Gyakori okok, ha a szűrő nem működik

- **Az értékek nem egyeznek pontosan.** Eltérhet a kis- és nagybetű, lehet egy felesleges karakter, vagy másoláskor bekerült szóköz a végére.
- **Megkettőzött rács.** A másolt widget megörökli a **CSS ID** értékét, így két elemnek ugyanaz lesz az azonosítója. Minden szűrhető rácsnak egyedi értéke legyen.
- **Be van kapcsolva a Use as Archive.** Felülírhatja a várt lekérdezési viselkedést, és megakadályozhatja a szűrést.
- **Régi lekérdezési beállítás.** A Query Builder és a rács **Custom Query** füle ajánlott a régi lekérdezési fülek helyett.
- **Más lekérdezések az oldalon.** Ha az oldalon más JetEngine widgetek is egyéni lekérdezést használnak, zavarhatják a szűrő keresését. Azoknak a widgeteknek a lekérdezésében adj meg „no-filter” Query ID-t, ha nem szabad, hogy a szűrő hasson rájuk.
- **JetWooBuilder Products Loop.** Ez a widget nem támogatja a Query ID-t, ezért a szűrés nem biztos, hogy jól működik, vagy akár elromlik. Oldalanként egy ilyen widgetet használj, Query ID nélkül.

## Gyakori kérdések

| Kérdés | Válasz |
| --- | --- |
| Miért nem működik a szűrő a Listing Griddel? | Általában a **This filter for** mezőben rossz a szolgáltató. Listing Gridnél a **JetEngine** kell. Nézd meg azt is, be van-e kapcsolva a szolgáltató az **Általános beállítások** oldalon, és jól van-e összekötve a szűrő a ráccsal. |
| Mi a különbség az AJAX, a Mixed és a Page reload között? | Az AJAX azonnal frissít, az oldal újratöltése nélkül. A Mixed újratöltés nélkül frissít, és az értékeket az URL-be írja. A Page reload újratölti az oldalt. Megosztható URL-hez vagy SEO-barát archívumhoz a Mixed vagy a Page reload való. |
| Miért nem állítja vissza a Vissza gomb a szűrést? | Az AJAX nem módosítja az URL-t, ezért a **Vissza** gomb az előző oldalra visz. A Mixed és a Page reload elmenti az értékeket az URL-be. |
| Kell Query ID a Listing Grid szűrőjéhez? | Egyszerű beállításnál nem. Több rácsnál, Query Buildernél, több szolgáltatónál vagy egyéni lekérdezésnél igen, és ugyanazt kell megadni a szűrőn, a rácson és a lekérdezésen. |
| Miért hiányoznak szűrt bejegyzések Load More vagy végtelen görgetés mellett? | A rács **Posts number** értéke vagy a lekérdezés oldalankénti száma kisebb, mint az összes találat. |
| Kell Query ID mindig? | Nem. Egyetlen szolgáltatónál nem kötelező, de a stabilabb működés miatt ajánlott. |
| Használhatom ugyanazt a Query ID-t több rácshoz? | Nem. Minden szűrhető szolgáltatónak saját azonosító kell. |
| Minden szolgáltató támogatja a Query ID-t? | Nem. A JetWooBuilder Products Loop nem támogatja. |

További tudnivalók a [Query ID útmutató](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-query-id/) és a [Hibaelhárítás](https://hub.hellowp.io/hu/plugins/jet-smart-filters/hibaelharitas/) fejezetben vannak.