# Intelligens szűrők popupban

> Szűrők elhelyezése felugró ablakban, megnyitás gombbal, és a popup automatikus bezárása a szűrés alkalmazása után.

Az Intelligens szűrők (JetSmartFilters) szűrőit felugró ablakba is teheted, így a szűrőpanel csak akkor jelenik meg, amikor a látogató kéri. Ez a fejezet két esetet ír le: a szűrők betétele a popupba és a popup bezárása szűrés után.

## Követelmények

- Elementor (az ingyenes változat elég), a második esethez az Elementor vagy a blokkszerkesztő.
- Aktív **JetPopup** és **Intelligens szűrők** bővítmény, létrehozott szűrőkkel (**Intelligens szűrők → Új hozzáadása**).
- A bezárásos példához a **JetEngine** is kell, és egy Listázó rács (Listing Grid) widget egy oldalon.

## Szűrők betétele a popupba

1. Nyisd meg a **JetPopup → Create New Popup** oldalt, add meg a popup nevét, és közzététel után kattints az **Edit with Elementor** gombra.
2. Építsd fel a popup tartalmát az Intelligens szűrők widgetjeivel. Ha a szűrőtípusokat még nem ismered, a widgetek a szerkesztő bal oldali panelén találhatók.
3. Kattints a szerkesztő bal alsó sarkában a fogaskerék ikonra, és a JetPopup beállításai között válaszd ki a popup nyitási eseményét (**Open event**).

   ![A popup nyitási eseményének kiválasztása az Elementor szerkesztőben](./kepek/elementor-nyitasi-esemeny.webp)

   *A popup nyitási eseményének kiválasztása az Elementor szerkesztőben* (https://minta-bolt.hu/wp-admin/post.php?post=11&action=elementor)

   A képen a nyitási esemény legördülő listája látszik; itt döntöd el, mi nyissa meg a popupot.

4. Nyisd ki a megjelenítési beállításokat, és add meg a feltételeket. Annyi feltételt veszel fel, amennyi kell, így szabályozhatod, hol jelenjen meg a popup az oldalon.

   ![A popup megjelenési feltételei](./kepek/feltetelek-egy.webp)

   *A popup megjelenési feltételei* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-popup)

   A képen egy megjelenési feltétel látszik; a feltételek mentése után frissítsd a popupot.

5. Mentsd a feltételeket, majd kattints az **Update** gombra.
6. Nyisd meg azt az oldalt, amelyhez a popupot rendelted, és próbáld ki.

Ha nem az oldal betöltésekor akarod megnyitni, csatold a popupot egy gombhoz (lásd az [indítókról szóló fejezetet](https://hub.hellowp.io/hu/plugins/jet-popup/inditok/)), és a szűrők a gombnyomásra jelennek meg.

## A popup bezárása a szűrés után

Alapból a szűrők alkalmazása után a popup nyitva marad. Ha azt szeretnéd, hogy a szűrés után magától bezáruljon és a lista azonnal szűrve látsszon, ezt a beállítást kövesd.

### 1. A popup a szűrőkkel

1. A **JetPopup → Create New Popup** oldalon hozz létre egy új popupot, nevezd el, tedd közzé, és nyisd meg Elementorban.
2. Add hozzá a szükséges szűrőket az Intelligens szűrők megfelelő widgetjeivel. Minden szűrő **Content** beállításai között:
   - a **Select filter** mezőben add meg a korábban létrehozott szűrő nevét,
   - a **This filter for** mezőben válaszd a **JetEngine** műveletet,
   - az **Apply type** legyen **AJAX**,
   - az **Apply on** legyen **Click on apply button** (alkalmazás gombra kattintva).
3. A **Show apply button** kapcsolót ne kapcsold be: a gombot külön widgettel adod hozzá.
4. Kattints az **Update** gombra. Ismételd meg a lépéseket minden szűrőnél.

### 2. Az alkalmazás gomb

1. Tegyél a popupba egy **Apply Button** widgetet az Intelligens szűrők widgetei közül.
2. A **Content** beállításokban válaszd a **JetEngine** műveletet, az **Apply type** legyen **AJAX**, az **Apply button text** mezőbe pedig írd be a gomb feliratát.
3. A **Speciális** beállításokban nyisd ki a **JetPopup** részt. Az **Attached Popup** mezőben add meg ugyanennek a popupnak a nevét, a **Trigger Type** értéke pedig legyen **Click On Widget**.
4. Kattints az **Update** gombra.

A gomb így két dolgot csinál: alkalmazza a szűrőket, és a rácsatolt popup eseménye miatt bezárja az ablakot.

### 3. A popup elhelyezése az oldalon

1. Nyisd meg Elementorban azt az oldalt, amelyen a Listázó rács widget van.
2. Húzz az oldalra egy **Button** widgetet.
3. A **Speciális** fülön az **Attached Popup** mezőben válaszd ki a szűrős popupot, a **Trigger Type** legyen **Click On Widget**.

   ![A popup csatolása egy gombhoz a Speciális fülön](./kepek/widget-inditas.webp)

   *A popup csatolása egy gombhoz a Speciális fülön* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

   A képen a widgethez csatolt popup beállításai látszanak: az **Attached Popup** és a **Trigger Type** mező.

4. Kattints az **Update** gombra.

### Kipróbálás

1. Nyisd meg az oldalt a weboldalon, és kattints az új gombra. A szűrős popup megnyílik.
2. Válassz ki néhány szűrési lehetőséget.
3. Kattints a popupban az **Apply Button** widgettel készített gombra.

A popup bezáródik, és az oldalon azonnal a szűrt találatok látszanak a listában.