Intelligens szűrők popupban

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).

   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.

   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), é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.

   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.