# Szűrők a blokkszerkesztőben

> Szűrőblokk felvétele a blokkszerkesztővel készült oldalra: általános beállítások, alkalmazási mód, számlálók az indexelővel és a blokk stílusa.

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](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szuro-letrehozasa/)).
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.

![A blokkbeszúró a szűrőblokkok listájával](./kepek/gutenberg-szuro-blokk-lista.webp)

*A blokkbeszúró a szűrőblokkok listájával* (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.

![A szűrőblokk általános beállításai](./kepek/gutenberg-szuro-blokk-beallitasok.webp)

*A szűrőblokk általános beállításai* (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](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-alkalmazas-tipusok/)). |
| **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ó](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-query-id/)). |
| **Additional Providers Enabled** | Több szolgáltatóra is érvényesíti a szűrést ([Szolgáltatók](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szuro-beallitasok-szolgaltatok/)). |

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](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-indexelo/)).
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.

![Az Indexer Options szakasz az Apply Indexer kapcsolóval](./kepek/gutenberg-szuro-indexer.webp)

*Az Indexer Options szakasz az Apply Indexer kapcsolóval* (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.