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

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). 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 í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.