Szűrők és lapozás a dinamikus táblához

A JetEngine Tables Builder (dinamikus táblák) modulja táblát készít, amelyet az oldalon a Dynamic Table widget jelenít meg. A JetSmartFilters szűrői és a Lapozás widget ezt a táblát is kezelik. A szolgáltató, amelyre a szűrőket kötöd, a JetEngine Dynamic Table. Blokkszerkesztőben a lapozás beállítását a Lapozás dinamikus táblához fejezet írja le.

Követelmények

• Elementor (az ingyenes is elég).
• Aktív JetEngine, a dinamikus táblák modullal, és aktív JetSmartFilters.
• Egy kész tábla a JetEngine → Tables Builder oldalon.

Keresés szűrő

1. Nyisd meg az Intelligens szűrők → Új hozzáadása oldalt.
2. Add meg a nevet és a címkéket, és a Szűrő típusa listában válaszd a Keresés lehetőséget.
3. Szükség esetén módosítsd a Placeholder szövegét, és válaszd ki a Search by forrást: Default WordPress search (az alapértelmezett WordPress-keresés) vagy By Custom Field (egyéni mező szerint, a lekérdezési beállításoknak megfelelően).
4. Kattints a Publish gombra.
5. Az oldalszerkesztőben add hozzá a Search Filter widgetet, és válaszd ki a létrehozott szűrőt.
6. A This filter for mezőben válaszd a JetEngine Dynamic Table szolgáltatót.

A widgeten további beállítások:

• Apply type: AJAX, AJAX on typing, Page reload vagy Mixed,
• a keresőgomb szövege és ikonja,
• a szűrőcímke megjelenítése vagy elrejtése,
• Query ID,
• Additional Providers, ha több szolgáltatóra szeretnéd alkalmazni.

A Stílus és a Haladó fülön a megjelenést állíthatod. A keresés szűrő részletes beállításairól a Szűrőtípusok fejezet szól.

Kiválasztás szűrő

1. Hozz létre új szűrőt: Intelligens szűrők → Új hozzáadása, szűrőtípus Kiválasztás.
2. Ha az Is hierarchical (hierarchikus) kapcsoló be van kapcsolva, új hierarchiaszintet vehetsz fel. Kikapcsolt állapotban további beállítások jelennek meg.
3. Az Data Source lehet például a Taxonómiák. A példában a „Termék színe” taxonómiát használjuk, a színek a termékek attribútumaiból jönnek, amelyeket a termék szerkesztésekor veszel fel.
4. További beállítások: Show empty terms, Show only childs of current term, a Placeholder, az Is Checkbox Meta Field kapcsoló, valamint elemek kizárása vagy belevétele.
5. Kattints a Publish gombra.
6. Az oldalszerkesztőben add hozzá a Select Filter widgetet, válaszd ki a szűrőt, és a This filter for mezőben a JetEngine Dynamic Table szolgáltatót.

A widget tartalmi beállításai a keresés szűrőéhez hasonlók. Az Apply type értéke itt AJAX, Page reload vagy Mixed. Az Apply on mező két lehetőséget kínál: Value change (érték módosításakor) és Click on apply button (az Alkalmaz gomb megnyomásakor). Két kapcsolóval megjelenítheted vagy elrejtheted az Apply Button gombot és a Filter Label feliratot. Itt is beállítható a Query ID és az Additional Providers.

A termékattribútumok használatáról lásd a WooCommerce-termékek szűrése attribútumok szerint fejezetet.

Tartomány szűrő

1. Hozz létre új szűrőt, és a Szűrő típusa listában válaszd a Tartomány lehetőséget. A többi beállítással a célnak megfelelő szűrőt alakíthatsz ki (Szűrőtípusok).
2. Az oldalszerkesztőben add hozzá a Range Filter widgetet, válaszd ki a szűrőt, és a This filter for mezőben a JetEngine Dynamic Table szolgáltatót.
3. A tartalmi beállítások a Kiválasztás szűrőével azonosak, a Stílus fülön a megjelenést alakíthatod.

Aktív címkék

Az Active Tags widget megjeleníti a kiválasztott szűrőket, és lehetővé teszi, hogy a látogató egyet is eltávolítson a többi törlése nélkül.

1. Add hozzá az Active Tags widgetet a táblát tartalmazó oldalhoz. Az oldalon legalább egy szűrőnek már lennie kell, hogy az Active Tags helyesen jelenjen meg.
2. Válaszd ki a táblát szolgáltatóként, és az alkalmazási mód legyen AJAX vagy Page reload.
3. Ha bekapcsolod a Clear Item beállítást, add meg a fő címkét és a Clear Item Label feliratot.
4. Itt is beállítható az egyedi Query ID és az Additional Providers.
5. A Stílus és Haladó beállítások után nézd meg a nyilvános oldalt.

Például egy ár szerinti tartomány szűrő mellett a látogató az Active Tags widgetben kiválaszthatja, melyik szűrési adatot távolítja el.

Szűrők eltávolítása

A Remove Filters widget egy gombot ad, amely az összes alkalmazott szűrőt törli. A This filter for listában a JetEngine Dynamic Table lehetőséget válaszd. A többi beállítás szabadon alakítható. A widget részletei az Aktív szűrők és a Szűrők eltávolítása fejezetben vannak.

Lapozás a táblához

Ha a táblának sok sora van, két lépésben állíthatod be a lapozást: előbb a lekérdezés korlátját, aztán a Lapozás widgetet.

A lekérdezés korlátja

1. Nyisd meg a JetEngine → Lekérdezéskészítő oldalt, és hozz létre új lekérdezést (Új hozzáadása), vagy szerkessz egy meglévőt. A példában a neve „Termékek táblához”, a típusa WC terméklekérdezés, amely a termékek adatait adja.

2. Állíts be egy Egyéni lekérdezés-ID értéket, amely összeköti a lekérdezést, a szűrőt és a táblát. Mindhárom helyen azonosnak kell lennie. A példában ez „tablazat-lapozas”. Az azonosító ne tartalmazzon számot az elején.

   https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add

   

   A képen az Egyéni lekérdezés-ID mező látszik.

3. Nyisd meg a lekérdezés Lapozás beállításait. Győződj meg róla, hogy a Lapozás engedélyezése be van kapcsolva, ez kell ahhoz, hogy a lekérdezés és a lapozás együtt működjön.

4. A Korlát mezőben add meg, hány elem jelenjen meg, például 4-et.

5. Mentsd a lekérdezést.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add

A képen a Bejegyzések lekérdezése típus Lapozás füle látszik. A WC terméklekérdezés típusnál a lapozási mezők (Lapozás engedélyezése, Korlát) neve ettől eltér, a menete azonos: lásd a Lapozás dinamikus táblához fejezetet.

Tedd a Dynamic Table widgetet az oldalra, és válaszd ki a táblát a Table mezőben. Ennyi sor jelenik meg, amennyit a lekérdezés korlátja megenged. Ha kevesebb sort szeretnél (például 2-t), nyisd meg újra a lekérdezést, módosítsd a Korlát értékét, és mentsd.

A Lapozás widget

1. A widgetkeresőbe írd be: „Pagination”. Ez a JetSmartFilters Lapozás widgetje. Húzd a Dynamic Table alá.
2. A Tartalom fülön a Pagination mezőben válaszd a JetEngine Dynamic Table szolgáltatót. Az Apply type értéke AJAX, Page reload vagy Mixed lehet.
3. A Query ID mezőbe írd a lekérdezésnél megadott értéket (a példában „tablazat-lapozas”).
4. A Controls fülön megjelenítheted vagy elrejtheted az előző / következő gombokat, és megadhatod a Prev Text és Next Text feliratot. Az eltolások (offset) értékeivel is állíthatod, hány oldalszám látszik.
5. A Stílus fülön szabhatod testre a megjelenést.
6. A Haladó részen, az Elrendezés (Layout) beállításainál add meg a CSS ID mezőben ugyanazt az azonosítót, amely a lekérdezést, a lapozót és a táblát összeköti. A példában: „tablazat-lapozas”.
7. Mentsd az oldalt.

A nyilvános oldalon a tábla alatt megjelenik a lapozó. Egy oldalszámra kattintva a tábla a megfelelő sorokat mutatja. A lapozó beállításait az Lapozás fejezet írja le.