# Szűrők a Bricks Query Loopra

> A JetSmartFilters szűrők alkalmazása a Bricks Query Loop elemeire: a lekérdezés felépítése, a szűrő elem beállításai és az eredmény.

A Bricks **Query Loop** funkciója lehetővé teszi, hogy a Bricks sablonjában megadott feltételek szerint lekérdezd az adatbázist, és az eredményt dinamikusan megjelenítsd egy ciklusban. Minden elrendezéselemnél, valamint az Accordion, Slider, Accordion (Nestable), Tabs (Nestable) és Slider (Nestable) elemeknél elérhető. A JetSmartFilters szűrőivel a Query Loop eredménye szűkíthető. Bejegyzéseket, kifejezéseket és felhasználói adatokat is megjeleníthetsz; a JetEngine egyéni bejegyzéstípusokkal és taxonómiákkal bővíti a lehetőségeket. A WordPress saját bejegyzéseihez, felhasználóihoz és kifejezéseihez a JetEngine **Meta Box** funkciójával vehetsz fel egyéni meta mezőket.

## Követelmények

- A Bricks téma telepítve és aktiválva
- JetSmartFilters, létrehozott szűrőkkel

## A Query Loop felépítése

1. A **Bricks → Settings** oldal **General** szakaszában kapcsold be azoknak a bejegyzéstípusoknak a kapcsolóját, amelyeket Bricksszel szerkesztesz. Itt a **Page** kapcsolónak bekapcsoltnak kell lennie. Az oldal alján kattints a **Save Settings** gombra.
2. Nyisd meg az **Oldalak → Új oldal** lehetőséget, add meg a címet, és kattints az **EDIT WITH BRICKS** gombra. (Használhatsz meglévő oldalt vagy sablont is.)
3. A példa három oszlopos bejegyzésrácsot mutat, de bármilyen elrendezést készíthetsz. Add hozzá a **Container** elemet: a **Flex wrap** legyen „Wrap”, a **Direction** „Horizontal (row)”, az **Align main axis** „Space between”, a **Column gap** pedig `3rem`.
4. Add hozzá a **Div** elemet. A beállításaiban kapcsold be a **Query loop** kapcsolót, és kattints a **Query** mező „∞” ikonjára.
5. Bejegyzések szűréséhez hagyd a **Type** értékét **Posts**, és válaszd ki a bejegyzéstípust (a példában az egyéni „Doctors” típus).

> **Vigyázat:** az **Indexelő** bejegyzésekkel és felhasználókkal működik, kifejezésekkel nem. Ez akkor is igaz, ha a Query Builderben **Terms Query** lekérdezést hozol létre, és a Query Loopban használod.

A JetEngine bővítménnyel a **Type** listában további források is megjelennek:

| Forrás | Mit jelenít meg |
| --- | --- |
| **JetEngine Query Builder** | Egy, a Query Builderrel létrehozott egyéni lekérdezés listáját. |
| **JE Repeater** | A **Repeater** egyéni mező elemeit. |
| **JE Posts** | A **Posts** egyéni mező bejegyzéseit. |
| **JE Relations** | A kapcsolódó elemeket (JetEngine kapcsolatok). |

A **JetEngine Query Builder** választásakor az „∞” ikonra vagy a felugró ablakon kívülre kattintva zárd be az ablakot, és a **JetEngine Queries** listából válaszd ki a kívánt lekérdezést.

6. A forrás beállítása után zárd be az ablakot, és kapcsold be az **Is filterable** kapcsolót.
7. Ha az oldalon több szűrő és szűrhető elem van, a **Query ID for filters** mezőben azonosítót adhatsz a Query Loopnak (például `query-loop`). Ugyanezt az azonosítót kell majd beírnod a szűrő elembe. Így eldöntheted, melyik elemet melyik szűrő szűrje.
8. A **Flex basis** mezőbe háromoszlopos, hézagos elrendezéshez írd be:

   ```css
   calc(33.333% - calc(calc(3rem * 2)/3))
   ```

9. A ciklus tartalmát az alap Bricks elemekkel vagy a JetEngine elemeivel (**Dynamic Field**, **Dynamic Image**, **Dynamic Link**, **Dynamic Terms**) töltheted fel. A JetEngine Komponenseit is használhatod. A példában a **Dynamic Field** elem a bejegyzések címét, a **Dynamic Image** elem a bélyegképét mutatja.

## Szűrő hozzáadása

A Query Loopra a JetSmartFilters bármelyik szűrőtípusa alkalmazható.

1. Kattints a „+” gombra, és a keresőbe írd be: „filter”.
2. Húzd a vászonra a kívánt szűrő elemet (a példában a **Keresés** szűrő került a Container fölé).
3. A **Content** fül beállításai szinte minden szűrőtípusnál azonosak:

   | Beállítás | Mit csinál |
   | --- | --- |
   | **Select filter** | A létrehozott szűrő kiválasztása. |
   | **This filter for** | A szolgáltató. Query Loophoz a **Bricks query loop** lehetőséget válaszd. |
   | **Apply type** | Az eredmény megjelenítésének módja: **AJAX**: az eredmény azonnal frissül az oldal újratöltése nélkül. **AJAX on typing**: csak a Keresés szűrőnél, gépelés közben frissít. **Page reload**: az oldal újratöltődik. **Mixed**: újratöltés nélkül frissít, de az URL megváltozik, így az eredmény megosztható. |
   | **Apply on** | Mikor érvényesül a szűrés: az érték változásakor vagy az **Apply** gombra kattintva (a Keresés szűrőnél nincs). |
   | **Show/hide apply button** | Az **Apply** gomb be- és kikapcsolása. |
   | **Show filter label** | A szűrőcímke megjelenítése a szűrő fölött. |
   | **Query ID** | Akkor használd, ha az oldalon több azonos típusú elem van, és csak az egyik a szolgáltató. A Query Loop **Query ID for filters** mezőjébe beírt azonosítót ide is be kell írni. |
   | **Additional Providers Enabled** | Akkor kapcsold be, ha több elemet kell szűrni. |

> **Vigyázat:** **Page reload** esetén az **Apply** gombot kell használni. A **Page reload** és a **Mixed** egyaránt megváltoztatja az oldal URL-jét.

4. Kattints a **Save draft** gombra.

## Az eredmény

A nyilvános oldalon a szűrő működés közben ellenőrizhető: például beírsz egy keresőszót a keresőmezőbe, az **Apply Filter** gombra kattintasz, és a Query Loop a találatokat mutatja.