Szűrő és listing 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 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 fejezet írja le.

3. Az elem megépítése

Az elemszerkesztőben add hozzá a blokkokat (részletesen: 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.