# Szűrők az oldalon

> A szűrők elhelyezése blokkal, widgettel vagy elemmel: a szolgáltató kiválasztása, a működési mód, a további beállítások, az aktív szűrők és címkék.

A mentett szűrő magától nem jelenik meg az oldalon. Azt az oldalt kell szerkesztened, amelyiken a szűrendő tartalom van, és oda kell tenned a szűrő blokkját (Gutenberg), widgetjét (Elementor) vagy elemét (Bricks). Mindhárom szerkesztőben ugyanazok a beállítások vannak, a blokkoknál kiegészülnek a **Haladó** panellel (**TOVÁBBI CSS OSZTÁLY(OK)**).

Minden szűrőtípusnak megvan a saját blokkja, widgetje és eleme: jelölőnégyzetek, kiválasztás, tartomány, jelölőnégyzetes tartomány, dátumtartomány, dátum szerinti időszak, választógomb, értékelés, ábécé, keresés és vizuális. Külön elemként elérhető még az aktív szűrők, az aktív címkék, az alkalmazás gomb, a szűrők törlése, a lapozó és a rendezés.

## Szűrő elhelyezése lépésről lépésre

Példa Gutenberg-szerkesztővel, WooCommerce shortcode-dal:

1. Szerkeszd az oldalt, és add hozzá a szűrendő tartalmat, például egy **Rövidkód** blokkot a `[products limit="12" columns="3"]` tartalommal.
2. Add hozzá a szűrő blokkját (például **Checkboxes**) a tartalom fölé.3. A jobb oldali sávban a **SELECT FILTER** listából válaszd ki a korábban létrehozott szűrőt.
4. A **THIS FILTER FOR** listából válaszd ki a szolgáltatót, vagyis azt a tartalmat, amelyet a szűrő szűkít (például **WooCommerce shortcode**).
5. Mentsd az oldalt, és nézd meg a nyilvános oldalon.

![A jelölőnégyzetes szűrő blokkja a szerkesztőben](./kepek/szerkeszto-blokk.webp)

*A jelölőnégyzetes szűrő blokkja a szerkesztőben* (https://minta-bolt.hu/wp-admin/post.php?post=36&action=edit)

A szerkesztő sávjában a blokk általános beállításai látszanak. A kiválasztott szolgáltató nélküli szűrő nem szűr semmit.

![A szűrők a nyilvános oldalon](./kepek/elol-szurok.webp)

*A szűrők a nyilvános oldalon* (https://minta-bolt.hu/szurok/)

A nyilvános oldalon a keresőmező, a kategória jelölőnégyzetei és az ár csúszkája a termékek fölött jelennek meg.

Ha a látogató kijelöl egy kategóriát, a lista frissül, és az **Active tags** blokk kiírja az aktív szűrőt:

![Kijelölt kategória az aktív címkék között](./kepek/elol-aktiv-szuro.webp)

*Kijelölt kategória az aktív címkék között* (https://minta-bolt.hu/szurok/)

A szűrőtípusok együtt is használhatók egy oldalon:

![Több szűrőtípus egy oldalon](./kepek/elol-szurotipusok.webp)

*Több szűrőtípus egy oldalon* (https://minta-bolt.hu/szurotipusok/)

## Általános beállítások (Content)

Az alábbi mezők minden szűrőnél megvannak. A blokkoknál nagybetűs feliratok vannak, az Elementorban és a Bricksben ugyanezek kisbetűvel.

| Beállítás | Mit csinál |
| --- | --- |
| **SELECT FILTER** | A megjelenítendő szűrő. Az Elementorban a név első betűit begépelve keres a lista. |
| **THIS FILTER FOR** | A szolgáltató, amelyhez a szűrő kapcsolódik. A lista az oldalon használható és az **Általános beállítások** oldalon engedélyezett szolgáltatókat mutatja. |
| **APPLY TYPE** | A szűrés módja. **AJAX**: az oldal újratöltése nélkül frissül az eredmény. **Page reload**: az oldal újratöltődik (ilyenkor alkalmazás gombot használj). **Kevert**: nincs újratöltés, de az URL megváltozik, így a szűrt találati oldal linkje megosztható. A **Page reload** és a **Kevert** módosítja az oldal URL-jét. Keresésnél további mód az „AJAX on typing”: a keresés akkor indul, ha a látogató elég betűt (a **Min number of letters** mezőben megadott számút) írt. |
| **APPLY ON** | **Value change**: a szűrés a kijelölés megváltozásakor azonnal megtörténik. **Click on apply button**: csak az alkalmazás gombra kattintva. |
| **Show apply button** | Alkalmazás gombot jelenít meg. A gomb szövege megadható. Akkor kapcsold be, ha az **APPLY ON** értéke **Click on apply button**. |
| **Show filter label** | Megjeleníti a szűrő **Szűrőcímke** feliratát a szűrő fölött. |
| **QUERY ID** | Akkor kell kitölteni, ha több azonos típusú tartalom van az oldalon, és csak az egyiket kell szűrni. Például két Listing Grid közül csak az egyik szűrendő: ennek a Haladó fülén a **CSS ID** mezőbe írj egy egyedi nevet, ugyanezt add meg itt. |
| **Additional Providers Enabled** | Bekapcsolva egy szűrő több szolgáltatóra is hat. Az **Add Item** gombbal veszel fel újabb szolgáltatókat, mindegyikhez tartozik **Additional Provider** és **Additional Query ID**. |

## További beállítások (Additional Settings)

A jelölőnégyzetes, választógombos és jelölőnégyzetes tartományszűrő kiegészítő lehetőségei. Alapból mind ki vannak kapcsolva.

| Kapcsoló | Mit csinál |
| --- | --- |
| **Search Enabled** | Keresőmező a szűrő fölött. A **Search Placeholder** a mező szövege. |
| **More/Less Enabled** | A lista egy részét elrejti, és „More” / „Less” gombbal nyitható. A **Less Items Count** az alapból látható elemek száma, a **More Text** és a **Less Text** a gombok felirata. |
| **Dropdown Enabled** | Az opciók legördülő listába kerülnek. A **Placeholder** a lista felirata. Az **N Selected** a kijelölt elemek számát mutatja a nevek helyett: a **Number of Named Items** azt adja meg, hány név látszik, a **Generic text** pedig az utána álló szöveg (a `{number}` jelölő helyére kerül a darabszám). Az **Add apply button** kapcsolóval alkalmazás gomb kerül a listába, a szövegét az **Apply button text** adja. |
| **Scroll Enabled** | Görgethető lista. A **Scroll Height(px)** a lista magassága képpontban. |

A jelölőnégyzetes szűrő elemén a **Show Checkbox** kapcsoló (Bricks) a jelölőnégyzeteket tudja elrejteni.

## Indexelő (Indexer Options)

Az indexelő megmutatja, hány elem tartozik egy-egy opcióhoz. Az **Indexelő beállításai** oldalon be kell kapcsolni az indexelt szűrők használatát ([Beállítások](https://hub.hellowp.io/hu/plugins/jet-smart-filters/beallitasok/)), majd az egyes szűrőn:

| Beállítás | Mit csinál |
| --- | --- |
| **Apply Indexer** | A szűrő adatait adatbázisban tárolja, és onnan olvassa vissza. |
| **Show Counter** | Számláló jelenik meg az opciók mellett. Elérhető mellé a **Counter Prefix** (a számláló előtt) és a **Counter Suffix** (utána). |
| **If Item Empty** | Mi történjen azzal az opcióval, amelyhez nem tartozik elem: megjelenik, elrejtődik vagy letiltódik. |
| **Change Counters** | Mikor változzanak a számlálók: **Always**, **Never** vagy **Other Filters Changed**. |

## Aktív szűrők és aktív címkék

Két külön elem mutatja a látogatónak, milyen szűrők vannak alkalmazva, és lehetővé teszi, hogy visszavonja őket. Ha nincs aktív szűrő, az elem rejtve marad. Az elemek a szűrők **Aktív szűrőcímke** feliratát használják.

**Active Filters** (aktív szűrők): a szűrők listája, amelyből egyenként kikapcsolhatók.

| Beállítás | Mit csinál |
| --- | --- |
| **Show active filters for** | A szolgáltató, amelynek a szűrőit mutatja. |
| **Apply type** | **AJAX** vagy **Page Reload**: így frissül a lista egy szűrő kikapcsolásakor. |
| **Label** | A lista felirata. |
| **Query ID**, **Additional Providers Enabled** | Ugyanúgy működnek, mint a szűrőknél. |

**Active Tags** (aktív címkék): címkeként jeleníti meg a kiválasztott szűrőket, mindegyik mellett egy „×” jellel, amellyel a szűrő kikapcsolható.

| Beállítás | Mit csinál |
| --- | --- |
| **This active tags for** | A szolgáltató. |
| **Apply type** | **AJAX**, **Page Reload** vagy **Mixed**. |
| **Label** | A címkelista felirata. |
| **Clear item** | Bekapcsolva egy hivatkozás megszünteti az összes alkalmazott szűrőt. Gutenbergben a **CLEAR ITEM LABEL** mezőben a hivatkozás szövegét is megadhatod. |
| **Query ID**, **Additional Providers Enabled** | Ugyanúgy működnek, mint a szűrőknél. |

![Az Active Tags blokk beállításai a Gutenberg oldalsávjában](./kepek/szurotipusok-aktiv-cimkek-blokk.webp)

*Az Active Tags blokk beállításai a Gutenberg oldalsávjában* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=edit)

A képen az **Általános** panel látszik: a szolgáltató, az alkalmazási mód, a **Query ID**, a **FELIRAT** és a **Clear Item** kapcsoló a hivatkozás szövegével.

A kinézet az Elementorban a **Style** fülön (a cím, a címkelista és a címkék), Gutenbergben a JetStyleManager ingyenes bővítménnyel (cím, szűrők, elemek), Bricksben a **CONTENT** és **STYLE** fülön állítható. A **Haladó** fül az elrendezést, a dinamikus láthatóságot, a mozgáseffekteket és az átalakítást adja. Az oldalon a címkék az alkalmazott szűrőket mutatják, a címke melletti „×” jelre kattintva az adott szűrő kikapcsolódik.

## Szolgáltatók és más helyszínek

A szolgáltatók listája a **THIS FILTER FOR** mezőben az oldalon elérhető bővítmények szerint alakul. Gutenbergben az Elementor- és a JetWooBuilder-szolgáltatók nem szerepelnek, de elérhető a **WooCommerce shortcode** és a JetEngine-szolgáltatók. Bricksben a JetEngine-változatok mellett a Bricks Query Loop is választható. Az Elementor szolgáltatói közé tartozik a JetEngine Listing Grid és Calendar, az Elementor Pro Posts, Archive, Loop Grid, Portfolio, Products, Archive Products és a JetWooBuilder terméklista és termékrács.

A **Dátumtartomány** és **Dátum szerinti időszak** szűrő JetEngine, JetEngine Calendar és JetEngine Maps szolgáltatókkal használható.

### Hely és távolság szűrő

A **Location & distance** widget (Elementor és Gutenberg) a JetEngine Query Builder földrajzi lekérdezésén (**Geo Search**) alapul, és csak akkor érhető el, ha a JetEngine **Maps Listings** modulja be van kapcsolva, a térképbeállítások pedig ki vannak töltve.

1. Hozz létre szűrőt **Location & Distance** típussal, és adj neki **Szűrőcímkét** és **Aktív szűrőcímkét**. Más beállítása nincs.
2. A JetEngine Query Builderben készíts lekérdezést (bejegyzés, kifejezés, felhasználó vagy egyéni tartalomtípus), és a **Geo Search** fülön add meg a térkép középpontját, a címet tartalmazó metamező kulcsát (**Address Field**), a **Distance** sugarat és a mértékegységet (**Units**).
3. Tedd a widgetet az oldalra: a **Placeholder** a keresőmező szövege, a **Text for user geolocation control** a helymeghatározó ikon súgószövege. A **Distance List** fülön a távolság mértékegysége (kilométer vagy mérföld) és a választható távolságok (alapból 5, 10, 25, 50, 100) szerkeszthetők.

Gutenbergben a blokk neve **Listing Distance Filter**. Az **Általános** panel ugyanazokat a beállításokat adja, mint az Elementor **Content** füle, és van **Show filter label** kapcsoló is, amely a szűrő feliratát megjeleníti. A **Distance Control** panelen a távolságok egyetlen szövegmezőben, vesszővel elválasztva szerepelnek. A **Haladó** panel **TOVÁBBI CSS OSZTÁLY(OK)** mezőjébe a blokk stílusához szükséges osztályokat írhatod. Bricksben az elem **Content** és **Distance List** fülei az Elementoréval azonosak.

A további beállítások (Elementor **Content** fül): **Select filter** (a szűrő neve), **This filter for** (a szolgáltató), **Apply type** (**AJAX**, **Page Reload**, **Mixed**), **Apply on** (**Value change** vagy **Click on apply button**; az utóbbihoz az alkalmaz gomb elemet is az oldalra kell tenni), **Query ID** és **Additional Providers Enabled** (az **Add Item** gombbal felvett szolgáltatókhoz külön **Additional Provider** és **Additional Query ID** tartozik).

Szolgáltatóként térkép-listázást (**Map Listing**) tegyél az oldalra. Az **Általános** fülén add meg az előre elkészített listinget és a címeket tároló metamezőt (**Address Meta Field**), az egyéni lekérdezés (**Custom Query**) fülén pedig kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a Query Builderben készített lekérdezést. Gutenbergben ugyanez a **Map Listing** blokk (**LISTING**, **ADDRESS META FIELD**).

Az oldalon a térkép kezdetben a lekérdezésben megadott pont körül áll. A keresőmezőbe írt helyhez a rendszer találatokat kínál, mellette a távolság mértékegységét lehet választani, és a kettő együtt a megadott távolságon belüli elemeket mutatja. A **Your current location** gomb a látogató aktuális helyére állítja a térképet, a beállított távolsággal.

Ez a szűrőtípus csak aktív JetEngine mellett jelenik meg a típusok között.