# Rejtett szűrő használata Komponensekkel

> A Rejtett szűrő és a JetEngine Komponensek összekötése: a Komponens egyik vezérlőjének értéke módosítja a Listing Grid lekérdezését.

A **Rejtett** szűrő a szolgáltatóra már alkalmazott lekérdezést módosítja. Ha egy JetEngine Komponensben használod, a Komponens egyik vezérlőjének értéke dönti el, melyik bejegyzések jelenjenek meg a Listing Gridben. A rejtett szűrő beállításait a [Rejtett szűrő](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szurotipusok-rejtett-szuro/) fejezet írja le.

Példa: a Komponensben kiválasztasz egy taxonómiakifejezést, és a lista csak az ahhoz tartozó bejegyzéseket mutatja. Közben a Komponensben lévő többi szűrő, például egy jelölőnégyzetes szűrő, tovább szűkítheti az eredményt, a lekérdezés pedig stabil marad.

## Követelmények

- Elementor, a blokkszerkesztő (Gutenberg) vagy Bricks
- JetEngine, egy egyéni bejegyzéstípussal
- JetSmartFilters

## 1. Taxonómiák

A példában a **Properties** egyéni bejegyzéstípushoz két taxonómia tartozik, kifejezésekkel, és a bejegyzések hozzá vannak rendelve:

- a **Property Type** taxonómia a rejtett szűrő forrása;
- a **Meals** taxonómia a jelölőnégyzetes szűrő forrása, amely szintén a Komponensben jelenik meg.

## 2. Listing sablon

1. Nyisd meg a **JetEngine → Listings/Components** oldalt, és kattints az **Add New Item** gombra.
2. A **Listing source** maradjon **Posts**, a **From post type** legyen a **Properties**, add meg a listing nevét, és válaszd ki a **Listing view** szerkesztőt (a példában Elementor).
3. Kattints a **Create Listing Item** gombra, tedd a sablonra a bejegyzés adatait megjelenítő dinamikus widgeteket, majd kattints a **Publish** gombra.

## 3. A jelölőnégyzetes szűrő

1. Hozz létre új szűrőt az **Intelligens szűrők** menüben, névvel (például „Checkboxes Meals”).
2. A **Szűrő típusa** legyen **Jelölőnégyzetek listája**, az **Adatforrás** **Taxonómiák**, a taxonómia pedig a **Meals**.
3. Töltsd ki a szűrőcímkéket, és mentsd a szűrőt.

## 4. A Komponens

1. A **JetEngine → Listings/Components** oldalon kattints az **Add New Component** gombra, add meg a Komponens nevét és a szerkesztőt, majd kattints a **Create Component** gombra.
2. A szerkesztőben add hozzá a **Rejtett szűrő** widgetet. A **This filter for** mezőben válaszd a **JetEngine** szolgáltatót.
3. Az **Argument Type** legyen **Taxonomy**, a **Name** a taxonómia slugja (a példában `property-type`, mert ezt a slugot kapta a taxonómia a létrehozásakor).
4. A **Value** mezőbe másold be ezt a makrót:

   ```text
   %component_control_value|select-tax|||%
   ```

   A `select-tax` a Komponens vezérlőjének **Control Name** értéke. Bármilyen nevet használhatsz, csak a vezérlőnél is ugyanazt add meg.
5. Add meg a **Query ID** mezőt (a példában `listing`). Ez kapcsolja össze a szűrőket és a szolgáltatót.
6. Add hozzá a **Jelölőnégyzetek** szűrő widgetet: a **Select filter** mezőben válaszd ki a korábban létrehozott szűrőt, a **This filter for** legyen **JetEngine**, a **Query ID** pedig ugyanaz (`listing`).
7. Add hozzá a **Listing Grid** widgetet, és válaszd ki a listinget. A **Haladó** fülön a **CSS ID** mezőbe írd be ugyanazt az azonosítót (`listing`).

### A Komponens vezérlője

1. A Komponens neve melletti **beállítások** gombbal nyisd meg a Komponens beállításait, és lépj a **Component Content Controls** fülre.
2. Szerkeszd a felvett **Text Control** vezérlőt: a **Control Label** legyen például „Select Taxonomy”, a **Control Value** a makróban használt név (`select-tax`).
3. A **Control Type** legyen **Select**. Az **Options** mezőbe soronként `érték::címke` formában írd a lehetőségeket. Taxonómiás szűréshez az érték a kifejezés slugja, a címke a megjelenő név:

   ```text
   bungalow::Bungalow
   cottage::Cottage
   house::House
   resort::Resort
   villa::Villa
   ```

   A slugok nem változtathatók: ezek kötik össze a szűrőt, a Listing Gridet és a kifejezéseket. A címkék tetszés szerint átírhatók.
4. Állítsd be az alapértelmezett értéket (például `cottage`), hogy ez legyen kiválasztva a Komponens beállításaiban.
5. Kattints a **Publish** gombra.

## 5. A Komponens az oldalon

1. Nyisd meg az oldalt vagy sablont, ahol használni akarod (például **Oldalak → Új oldal**, Elementorral), és add hozzá a Komponenst.
2. A Komponens beállításaiban megjelenik a vezérlő (**Select Taxonomy**). Válaszd ki a kívánt típust, vagy hagyd az alapértelmezettet.
3. Tedd közzé az oldalt.

## Az eredmény

A nyilvános oldalon a Listing Grid csak a kiválasztott típushoz (például „Cottage”) tartozó bejegyzéseket mutatja, a jelölőnégyzetes szűrő pedig csak az ahhoz tartozó lehetőségeket kínálja. Ha a szűrőben kiválasztasz egy vagy több étkezési típust, a lista tovább szűkül: a példában csak azok a „Cottage” elemek maradnak, amelyeknél a „Self Catering” étkezési típus be van jelölve.