# Listing Grid AJAX-szűrés közben: töltőikon és elrejtés szűrés előtt

> Egyedi töltőikon a Listing Grid fölé AJAX-szűrés idejére, és a lista elrejtése addig, amíg a látogató nem szűr.

Két apró trükk a JetSmartFilters szűrőivel együtt használt Listing Gridhez: saját töltőikon a szűrés idejére, és a lista elrejtése, amíg nincs szűrés. Mindkettőhöz a Listing Grid és legalább egy **AJAX** alkalmazási típusú szűrő kell az oldalon. Az ingyenes Elementor, a blokkszerkesztő és a Bricks is jó; az Elementoros lépések alább.

![A listázási tételek és komponensek listája](./kepek/listazas-7-listazasok.webp)

*A listázási tételek és komponensek listája* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine)

A képen a **JetEngine → Listázások/komponensek** oldal látszik: innen nyitod meg a listázási elemet, amelyet a Listing Grid megjelenít.

## Egyedi töltőikon szűrés közben

Alapból a Listing Grid áttetszővé válik, amíg az AJAX-szűrő betölti az új találatokat. Ha ezt egy forgó ikonra cseréled, CSS-re és JavaScriptre van szükség. A kódok beillesztéséhez bármelyik egyéni CSS/JS bővítmény jó (a példában a **Simple Custom CSS and JS**).

### Az ikon elhelyezése az oldalon

1. A Listing Grid widget fölé tegyél egy szakaszt, és húzd bele az Elementor **Icon** és **Heading** widgetjét. A tartalmat igazítsd a kedvedhez.
2. A Listing Grid widget **Advanced** fülén a **CSS ID** mezőbe írj egy egyedi azonosítót (például `my-product-listing`).
3. A szűrő widgetjénél ugyanezt az azonosítót add meg a **Query ID** mezőben.
4. Az ikont és a címet tartalmazó oszlop **CSS ID** mezőjébe is írj egy új, egyedi azonosítót (például `loading_icon`).

### Animáció és alapértelmezett elrejtés

A **Custom CSS & JS → Add Custom CSS** oldalon add hozzá a következő kódot. A `loading_icon` helyére a saját oszlopod CSS ID-ja kerül:

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

Az első blokk elrejti a töltősablont az oldal betöltésekor, a második megforgatja az ikont.

### A megjelenés feltétele

A töltősablon megjelenítését és elrejtését egy JavaScript-kód vezérli, amely a szűrés indulásakor megmutatja, a befejezésekor elrejti az oszlopot. Három értéket kell a saját oldaladra átírni a kódban:

- az oldal slugját a példában szereplő `jetsmartfilter-jetlisting-custom-spinner` helyére;
- az ikon oszlopának CSS ID-ját a `itchy-loader` helyére;
- a Listing Grid CSS ID-ját a `my-product-listing` helyére.

Ha több kódot illesztettél be, a már használt részt ne másold be még egyszer. Mentés után nézd meg az oldalt a frontenden: szűrés közben a forgó ikon látszik.

## A lista elrejtése szűrés előtt

Ha azt szeretnéd, hogy a Listing Grid csak akkor jelenjen meg, amikor a látogató már keresett vagy szűrt, a szűrőt és a listát külön kell összekötni néhány CSS-osztállyal. A példában keresőszűrő szerepel, de bármelyik JetSmartFilters szűrőtípussal működik.

### A szűrő létrehozása

1. Nyisd meg a **Smart Filters → Add New** oldalt.
2. Add meg a szűrő nevét, a típusa legyen **Search**, a **Search by** értéke **Default WordPress search**.
3. Ha szeretnéd, állítsd be a helyőrzőt (**Placeholder**), a **Filter Label** és az **Active Filter Label** mezőt.
4. Kattints az **Update** gombra.

### A szűrő és a lista az oldalon

1. A szerkesztőben tedd az oldalra a keresőszűrő blokkot, widgetet vagy elemet.
2. A **Select Filter** mezőben válaszd ki az új szűrőt, a **This filter for** értéke **Listing Grid** legyen, az **Apply Type** pedig például **AJAX on typing**.
3. Add hozzá a Listing Grid blokkot, widgetet vagy elemet, és a **General** fülön válaszd ki a listázási elemet.
4. A Listing Grid **Advanced** fülén írd be a `hide-before-filter` osztályt:
   - blokkszerkesztőben az **ADDITIONAL CSS CLASS(ES)** mezőbe,
   - Elementorban a **CSS Classes** mezőbe,
   - Bricksben a **STYLE** fül **CSS** szakaszának egyéni CSS-osztály mezőjébe.
5. Hogy a lista az oldal betöltésekor azonnal rejtve legyen, add hozzá a `hide-listing` osztályt is, szóközzel elválasztva.
6. Ha a szűrők visszaállítása után is újra el kell tűnnie a listának, tedd hozzá a `hide-on-reset` osztályt is.

### CSS és JavaScript

Az osztályok önmagukban nem rejtenek el semmit: a hozzájuk tartozó stílust és szkriptet az oldalon kell elhelyezni. A legegyszerűbb egy **Custom HTML** blokk (Elementorban **HTML** widget, Bricksben **Code** elem), amelybe beírod a kódot, majd az oldalt közzéteszed. Mielőtt kódot illesztesz be, készíts biztonsági mentést vagy próbáld ki egy tesztoldalon.

### Eredmény

A frontenden először csak a keresőmező látszik. Amint a látogató begépel egy szót, megjelenik a Listing Grid a találatokkal.