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

> A rács elrejtése szűrés előtt, saját betöltésjelző AJAX-os szűréshez, a Szűrők eltávolítása gomb késleltetése.

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.

![Keresés szűrő beállítása a szűrőszerkesztőben](./kepek/tippek-1-kereses-ismetlo.webp)

*Keresés szűrő beállítása a szűrőszerkesztőben* (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.

   ```css
   #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):

   ```css
   #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](https://hub.hellowp.io/hu/plugins/jet-smart-filters/szurotipusok-aktiv-szurok-eltavolitas/) 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.