# Szűrők popupban és összecsukható szűrők

> Szűrők elhelyezése popupban, a popup bezárása szűrés után, összecsukható szűrők.

Ez a fejezet olyan megoldásokat gyűjt, amelyekkel a szűrők helyet takarítanak meg az oldalon: kicsúszó popup, szűrés után záródó popup és összecsukható szűrők. A megoldásokhoz a JetSmartFilters mellett további bővítmények kellenek, ezt minden részben jelezzük.

## Szűrők megjelenítése popupban

Kicsúszó szűrőpanelt úgy kapsz, ha a szűrőket egy popupba teszed. Hozzá kell az Elementor (ingyenes változat), a JetSmartFilters elkészített szűrőkkel, és a JetPopup bővítmény.

1. A **JetPopup → Új popup hozzáadása** oldalon add meg a címet, és kattints a **Közzététel** gombra.
2. Nyisd meg a popupot az Elementorral.
3. Húzd be a szükséges szűrő widgeteket, és állítsd be őket. A szűrőtípusokról a [Funkciók áttekintése](https://hub.hellowp.io/hu/plugins/jet-smart-filters/attekintes-funkciok/) fejezetben olvashatsz.
4. A szerkesztő bal alsó sarkában lévő fogaskerék ikonnal nyisd meg a popup beállításait, és a **Megnyitási esemény** (Open event) beállításnál válaszd ki, mikor nyíljon meg a popup.
5. Nyisd ki a megjelenítési beállításokat, és add meg a feltételeket. Annyit adhatsz hozzá, amennyit akarsz, így pontosan megmondhatod, melyik oldalon jelenjen meg a popup. Mentsd a feltételeket, majd kattints a **Frissítés** gombra.
6. Nyisd meg azt az oldalt, amelyhez a popupot rendelted, és próbáld ki.

Ha a popupot gombnyomásra akarod megnyitni, a megnyitási eseményt úgy állítsd be, hogy egy gombhoz kapcsolódjon (lásd a következő részt).

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

Alapból a popup nyitva marad, amikor a látogató alkalmazza a szűrőket. Ha azt szeretnéd, hogy a gombnyomás után a popup záruljon be, és az oldal rögtön a szűrt elemeket mutassa, ezekre van szükséged: Elementor, JetSmartFilters szűrőkkel, JetPopup és JetEngine (a Listing Grid miatt).

1. Hozz létre egy popupot a **JetPopup → Új popup hozzáadása** menüben, adj neki nevet, tedd közzé, és nyisd meg az Elementorral.
2. Add hozzá a szükséges szűrő widgeteket. Mindegyiknél:
   - a **Szűrő kiválasztása** mezőben add meg a korábban elkészített szűrőt,
   - a **Ez a szűrő ehhez** mezőben válaszd a **JetEngine** szolgáltatót,
   - az **Alkalmazás típusa** legyen **AJAX**,
   - az **Alkalmazás ekkor** legyen **Kattintás az alkalmaz gombra**,
   - az **Alkalmaz gomb megjelenítése** kapcsolót ne kapcsold be, mert a gombot külön widgettel adod hozzá.
3. Húzz be egy **Alkalmaz gomb** widgetet. A szolgáltató a **JetEngine**, az alkalmazás típusa **AJAX**, a gomb szövegét pedig te adod meg.
4. A gomb **Haladó** fülén nyisd ki a **JetPopup** részt. A **Csatolt popup** mezőben add meg az éppen szerkesztett popupot, az indítás típusa pedig legyen **Kattintás a widgetre**. Frissítsd a popupot.
5. Nyisd meg az Elementorban azt az oldalt, ahol a Listing Grid van, és húzz rá egy sima **Gomb** widgetet. A **Haladó** fülön, a JetPopup résznél válaszd ki a popupot a **Csatolt popup** mezőben, az indítás típusa legyen **Kattintás a widgetre**. Frissítsd az oldalt.
6. Az oldalon a gombra kattintva megnyílik a popup. Válassz a szűrőkben, majd kattints a popupban lévő Alkalmaz gombra: a popup bezárul, és a rács azonnal a szűrt elemeket mutatja.

## Összecsukható szűrők

Az összecsukás egyedi megoldást igényel, a JetSmartFilters nem tartalmaz hozzá beépített beállítást. Két módszer van.

### A Classic Accordion widgettel

A JetTabs bővítmény **Classic Accordion** widgetjébe a szövegek mellé szűrőket is el lehet helyezni. Ehhez az Elementor, a JetSmartFilters elkészített szűrőkkel és a JetTabs kell, bekapcsolt Classic Accordion widgettel. Tedd a szűrő widgeteket az accordion egy-egy paneljébe, és a panel fejlécére kattintva a látogató kinyitja vagy összecsukja a szűrőt.

### HTML-kóddal

Ha nincs JetTabs, egy **HTML** elemben elhelyezett egyedi kóddal is megoldható az összecsukás. Ebben a kódban egy szimbólum (nyíl) jelzi az állapotot; a nyíl irányát a kód `content` sorának átírásával változtathatod meg. Mielőtt kódot illesztesz be, készíts biztonsági mentést, vagy próbáld ki egy másolati (staging) oldalon.

> **Fontos:** a szűrő stílusbeállításainál kapcsold be a szűrőcímke megjelenítését. Ha ki van kapcsolva, a szűrő csak egyszer nyílik ki, és nem lehet újra összecsukni, mert nincs mire kattintani.

Ha csak a kategóriák szülő-gyermek szerkezetét akarod összecsukhatóvá tenni, arra a [Összecsukható kategóriák a szűrőben](https://hub.hellowp.io/hu/plugins/jet-smart-filters/megjelenites-osszecsukhato-szuro/) fejezet beépített beállítást mutat.