A Listing Grid elrejtése és betöltésjelzője

Ebben a fejezetben a Listing Grid viselkedését igazítod a szűréshez: elrejted szűrés előtt, saját betöltésjelzőt adsz neki, és a Szűrők eltávolítása gombot a tartalommal együtt jelenítteted meg. Mindegyik megoldás egyedi CSS-t vagy JavaScriptet használ, ezért módosítás előtt készíts biztonsági mentést, vagy próbáld ki egy másolati oldalon.

A rács elrejtése szűrés előtt

Ha azt szeretnéd, hogy az oldalon először csak a keresőmező látsszon, a találatok pedig a keresés után jelenjenek meg, a rácsot egy CSS-osztállyal rejtheted el. Kell hozzá az Elementor, a blokkszerkesztő vagy a Bricks, a JetEngine egy elkészített listing elemmel, és a JetSmartFilters. A példában Keresés szűrő van, de bármelyik szűrőtípussal működik.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters

A képen a Keresés szűrő beállításai láthatók: a Keresés módja itt az egyéni mezős változat. A rács elrejtéséhez az alapértelmezett WordPress-keresést is választhatod.

1. A Smart Filters → Új hozzáadása oldalon add meg a szűrő nevét, válaszd a Keresés típust, a Keresés módja legyen Alapértelmezett WordPress-keresés. Ha akarod, add meg a helykitöltőt, a szűrőcímkét és az aktív szűrőcímkét, majd kattints a Frissítés gombra.
2. Szerkeszd azt az oldalt, ahol a rács lesz, és vedd fel a Keresés szűrőt. A Szűrő kiválasztása mezőben add meg az új szűrőt, a Ez a szűrő ehhez legyen Listing Grid, az alkalmazás típusa pedig például AJAX gépeléskor.
3. Vedd fel a Listing Grid elemet, és az Általános fülön válaszd ki a listinget.
4. A Haladó fülön a további CSS-osztályok mezőbe írd be: hide-before-filter. Elementorban ez a CSS-osztályok mező a Haladó fülön, Bricksben a Stílus fül CSS részének egyedi osztály mezője.
5. Az osztály nem azonnal rejti el a tartalmat. Ha azt akarod, hogy az oldal betöltődése után rögtön eltűnjön, szóközzel elválasztva add hozzá a hide-listing osztályt is.
6. Ha azt szeretnéd, hogy a rács a szűrők alaphelyzetbe állítása után újra eltűnjön, szóközzel elválasztva add hozzá a hide-on-reset osztályt.
7. Tegyél az oldalra egy Egyedi HTML blokkot (Elementorban HTML widget, Bricksben Code elem), és illeszd bele azt a CSS- és JavaScript-kódot, amely az osztályokat kezeli: a kód rejti a megjelölt elemet, és a szűrés alkalmazásakor megjeleníti.
8. Kattints a Közzététel vagy Frissítés gombra.

Az oldalon eleinte csak a keresőmező látszik. Amint a látogató begépel egy szót, megjelenik a rács a találatokkal.

Saját betöltésjelző a rácshoz

Az AJAX-os szűrésnél a Listing Grid alapból áttetszővé válik a betöltés ideje alatt. Ha ezt egy saját ikonnal akarod lecserélni, CSS és JavaScript kell hozzá. Az oldalon már legyen egy Listing Grid és legalább egy AJAX alkalmazási típusú szűrő. A példa az ingyenes Simple Custom CSS and JS bővítményt használja, de bármelyik másik kódbeillesztő is megfelel.

1. Tegyél egy szakaszt a Listing Grid fölé, és vegyél fel bele egy Elementor Ikon és egy Cím widgetet. Állítsd be a tartalmukat tetszés szerint.

2. A Listing Grid Haladó fülén a CSS-azonosító mezőbe írj egy egyedi azonosítót.

3. A szűrő widgetben ugyanezt az azonosítót add meg a Query ID mezőben.

4. Az ikont és a címet tartalmazó oszlop CSS-azonosító mezőjébe írj egy másik, egyedi azonosítót (a példában loading_icon).

5. Az animációhoz a Custom CSS & JS → Új CSS hozzáadása oldalon illeszd be az alábbi kódot. A loading_icon helyére írd be a saját oszlopod azonosítóját.

   #loading_icon i {
       -webkit-animation: fa-spin 2s infinite linear;
       animation: fa-spin 2s infinite linear;
   }

6. Hogy a betöltésjelző az oldal betöltésekor rejtve legyen, egészítsd ki a CSS-t ezzel a szabállyal (itt is a saját azonosítódat használd):

   #loading_icon {
       display: none;
   }

7. Végül egy JavaScript-részlet kapcsolja be a jelzőt a szűrés idejére. Ebben három értéket kell a sajátodra cserélned: az oldal slugját, annak az oszlopnak az azonosítóját, amelyben az ikon van, és a Listing Grid CSS-azonosítóját. A kódot is a Custom CSS & JS bővítményen át add hozzá.

Ellenőrizd az oldalt: szűréskor a rács helyett a saját ikonod pörög.

A Szűrők eltávolítása gomb késleltetése

Ha a Szűrők eltávolítása gomb szűrés után előbb jelenik meg, mint a szűrt tartalom, egyedi kóddal a két elem megjelenése összehangolható, így a gomb a találatokkal egyszerre bukkan fel. Ez a gomb a Aktív szűrők és a Szűrők eltávolítása fejezetben leírt widget. A megoldáshoz kell a JetEngine egy bejegyzés-listinggel és egy Listing Grid elemmel az oldalon, valamint a JetSmartFilters elkészített szűrőkkel.