Szűrők popupban és ö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 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 fejezet beépített beállítást mutat.