Szűrők a blokkszerkesztőben

A blokkszerkesztővel (Gutenberg) készült elemek könnyebbek, mint az oldalszerkesztőkkel építettek. Egyszerűbbek, egyedi stílust nem kapnak olyan szabadon, de nem lassítják az oldal betöltését. Ha a betöltési sebesség fontosabb a látványos kialakításnál, a szűrők a blokkszerkesztőben is használhatók. Az alábbi példa a Checkboxes (jelölőnégyzetes) szűrőt használja, a többi szűrőblokk beállításai nagyrészt ugyanezek.

Mire szűrhetsz a blokkszerkesztőben

A blokkszerkesztőben a szűrők csak a Listázórács (JetEngine Listing Grid) blokkal, a JSF Listing blokkal, a WooCommerce shortcode-dal és az alapértelmezett WooCommerce archívummal (klasszikus) működnek, ahogy a szolgáltatók listája is mutatja. Ha a JetEngine Dynamic Tables modul is aktív, a JetEngine Dynamic Table is választható.

Ha rácsot vagy listát szeretnél az oldalra, előbb azt tedd fel az oldalra. A WooCommerce-termékek listájához használj WooCommerce shortcode-ot, például [products limit="12" columns="4"].

A szűrőblokk hozzáadása az oldalhoz

1. Hozd létre a szűrőt az Intelligens szűrők → Új hozzáadása oldalon (A szűrők létrehozása).
2. Nyisd meg szerkesztésre azt az oldalt vagy bejegyzést, ahol a szűrendő rács van.
3. Kattints a blokkbeszúrás gombra (kék négyzet, benne plusz jel), és írd be a keresőmezőbe a szűrő nevét, vagy keresd meg a szűrőblokkok között. A listában a Checkboxes, a Kiválasztás, a Range, a Radio, a Date Range és a többi szűrőblokk látszik.
4. Kattints a szűrő blokkjára, hogy bekerüljön az oldalra, majd állítsd be a jobb oldali panelen.

https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit

A képen a blokkbeszúró látszik: a Jet keresésre a JetEngine blokkok mellett ott vannak a szűrőblokkok is (Checkboxes, Kiválasztás, Range, Radio, Date Range).

Általános beállítások

Kattints a szűrőblokkra, és nyisd meg a jobb oldali Blokk fület. Az Általános szakasz szinte azonos azzal, amit az oldalszerkesztő widgetjeinél látsz.

https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit

A képen a Checkboxes blokk Általános szakasza látszik, kiválasztott szűrővel és szolgáltatóval.

Beállítás	Mit csinál
SELECT FILTER	A szűrő, amelyet az oldalon lévő rácshoz hoztál létre.
THIS FILTER FOR	A szolgáltató, vagyis az, amit a szűrő szűr: Listázórács (JetEngine Listing Grid), JSF Listing, WooCommerce shortcode, Default WooCommerce Archive (Classic) vagy JetEngine Dynamic Table. Azt válaszd, amelyik a tartalmad listáját jeleníti meg.
APPLY TYPE	Hogyan jelenjen meg a szűrés eredménye. AJAX: az oldal újratöltése nélkül. Page reload: az oldal újratöltésével. Kevert: az oldal nem töltődik újra, de az oldal URL-je megváltozik (Alkalmazási módok).
APPLY ON	Mikor jelenjen meg az eredmény. Value change: amint a látogató megváltoztatja az értéket. Click on apply button: az alkalmaz gomb megnyomása után.
Show apply button	Akkor kapcsold be, ha az APPLY ON értéke Click on apply button: ekkor megjelenik a gomb.
Apply button text	A gombon megjelenő szöveg.
Show filter label	Bekapcsolva megjelenik a szűrő felirata. Több szűrő mellett hasznos, hogy a látogató lássa, melyik mire való.
QUERY ID	Egyedi azonosító, ha az oldalon ugyanabból a szolgáltatótípusból több van. Ugyanezt kell megadni a szűrt blokkon is (Query ID útmutató).
Additional Providers Enabled	Több szolgáltatóra is érvényesíti a szűrést (Szolgáltatók).

A Show apply button és az Apply button text csak akkor jelenik meg, ha az APPLY ON a gombos módra van állítva.

Az indexelő beállítása a számlálókhoz

Az indexelő azt mutatja, hány elem felel meg az egyes szűrési lehetőségeknek. A szám zárójelben az opció mellett jelenik meg. A blokk beállítópaneljén ehhez nem elég egy kapcsolót bekapcsolni, előbb az indexelést kell engedélyezni.

1. Menj a JetPlugins → JetSmartFilters beállítások → Indexer oldalra.
2. Kapcsold be az Enable Indexed filters functionality kapcsolót, jelöld ki a megfelelő tartalomtípust, és kattints a Save gombra (Az indexelő beállítása).
3. Nyisd meg az Intelligens szűrők szűrőlistáját, és nyomd meg az Index Filter gombot a szűrőnél.
4. Térj vissza az oldalhoz, kattints a szűrőblokkra, és nyisd ki az Indexer Options szakaszt.
5. Kapcsold be az Apply Indexer és a Show Counter kapcsolót.

https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit

A képen az Apply Indexer már be van kapcsolva, alatta a Show Counter, az IF ITEM EMPTY és a CHANGE COUNTERS beállítás látszik.

Beállítás	Mit csinál
Apply Indexer	A szűrő használja az indexelt adatokat.
Show Counter	Megjeleníti az opciók melletti számlálót.
IF ITEM EMPTY	Megadja, mi legyen a számlálóval, ha az opcióhoz nem tartozik elem: Mutat, Elrejtés vagy Kikapcsolás.
CHANGE COUNTERS	Mikor változzanak a számlálók: Mindig, Never (soha) vagy Other Filters Changed (ha egy másik szűrő változik).

Mentés és kipróbálás

Ha minden beállítást elvégeztél, kattints a Frissítés vagy a Közzététel gombra, majd nyisd meg az oldalt a nyilvános részen, és próbáld ki a szűrőt.

A blokk stílusa

Ha telepítve és aktiválva van a JetStyleManager bővítmény, a blokkra kattintva a Settings gomb mellett megjelenik a Block Style gomb. Ennek szakaszai tartalmazzák a szűrőblokk elemeinek megjelenési beállításait: az igazítást, a méreteket, a színeket, a betűtípusokat, a térközöket és más tulajdonságokat. Itt tudod a szűrő kinézetét az oldalhoz igazítani.