# Szűrő és listing egy oldalon

> Lépésről lépésre: szűrő létrehozása, listing és elem építése, majd a kettő összekötése egy oldalon.

Ez a példa egy álláslistát épít: egy legördülő szűrő a kategória szerint szűri a megjelenő állásokat. A lépések bármilyen más tartalomra is érvényesek. Előfeltétel: Elementor (ingyenes változat), blokkszerkesztő (Gutenberg) vagy Bricks, és az aktív JetSmartFilters.

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

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt.
2. Add meg a szűrő nevét, például „Állás kategória”.
3. A szűrő típusa legyen **Legördülő lista** (Select), hogy a látogató egy lehetőséget választhasson.
4. Az adatforrásnál válaszd a taxonómiákat és az egyéni taxonómiát (a példában az állások kategóriáját). A szűrő a taxonómia kifejezéseit adja lehetőségként.
5. A többi beállítást hagyd az alapértéken.
6. Lejjebb, a címkék szakaszban töltsd ki a szükséges címkéket.
7. Kattints a **Frissítés** gombra.

A szűrő mezőiről a [A szűrők létrehozása](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szuro-letrehozasa/) fejezetben olvashatsz.

## 2. A listing felépítése

1. Menj az **Intelligens szűrők → Listing Builder** oldalra, és kattints az **Add New Listing** gombra.
2. Add meg a listing nevét (például „JSF Listing”).
3. A **Query** fülön, a **Content** szakaszban állítsd a **PER PAGE** értékét 9-re, hogy oldalanként kilenc elem látsszon.
4. A **Posts** szakaszban a **POST TYPES** mezőben válaszd ki az egyéni tartalomtípust (a példában az állásokat).
5. A **Layout** fület hagyd változatlanul.
6. Az **Item** fülön az elem lenne kiválasztandó, de még nincs. Mentsd a listinget a **Save Listing** gombbal, majd kattints a **Create new item** gombra.

A fülek jelentését a [A Listing Builder](https://hub.hellowp.io/hu/plugins/jet-smart-filters/listing-felepites/) fejezet írja le.

## 3. Az elem megépítése

Az elemszerkesztőben add hozzá a blokkokat (részletesen: [Listing blokkok](https://hub.hellowp.io/hu/plugins/jet-smart-filters/listing-blokkok/)):

1. **Listing Field**: a bejegyzés címe jelenik meg, ezért hagyd az alapbeállítást. A **Style** fülön állítsd be a **TEXT COLOR** színt és a **TYPOGRAPHY** értékeket.
2. **Listing Terms**: a **Terms List** fülön a **FROM TAXONOMY** mezőben válaszd ki a megjelenítendő taxonómiát (a példában az állás típusa). A stílust hagyd alapon.
3. **Listing Link**: a **Settings** fülön a mezőbeállítások maradnak alapon. A **Style** fülön a **DECORATION** szakaszban kapcsold be az aláhúzást.
4. Kattints a **Save and Back to Listing** gombra, hogy visszalépj a listinghez.
5. Az **Item** fülön válaszd ki az imént megépített elemet, és mentsd a listinget a **Save Listing** gombbal.

## 4. A szűrő és a listing az oldalra

A példában Elementorral készül az „Állások” oldal. Blokkszerkesztővel és Bricksszel is megépíthető, mert a **JSF Listing** blokk ott is elérhető.

1. A szerkesztőben add az oldalhoz a szűrőnek megfelelő widgetet, itt a legördülő lista szűrő widgetet.
2. A szűrő legördülő listában válaszd ki a létrehozott szűrőt.
3. A **This filter for** mezőben rendeld hozzá a **JSF Listing** szolgáltatót.
4. Szükség szerint állítsd a további tartalmi és stílusbeállításokat.
5. Add hozzá az oldalhoz a **JSF Listing** widgetet, és válaszd ki a megjeleníteni kívánt listinget.
6. Mentsd az oldalt.

Blokkszerkesztőben a JSF Listinget egy rugalmas tároló (Flexible Container) blokkba is teheted. A tároló burkolóként segít az elrendezés kialakításában.

## 5. Az eredmény ellenőrzése

Nyisd meg az oldalt a nyilvános felületen: a szűrő és a listing is látszik. Ha a szűrőben kiválasztasz egy lehetőséget, a listing a választásnak megfelelően szűkül.