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

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.

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:

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