Szűrők és lapozás a JetWooBuilder Products Gridhez

A JetWooBuilder Products Grid widgetje WooCommerce-termékeket jelenít meg rácsban. A JetSmartFilters szűrői AJAX-szal szűrik a termékeket (például kategória szerint), az oldal újratöltése nélkül, a Lapozás widget pedig lapokra osztja a rácsot.

Követelmények

• Elementor (az ingyenes is elég).
• Aktív WooCommerce, JetWooBuilder és JetSmartFilters.
• A lapozáshoz: létrehozott termékek.

A szolgáltató bekapcsolása

1. Nyisd meg az Intelligens szűrők → Beállítások oldalt (vagy a Crocoblock → JetPlugins Settings → JetSmartFilters oldalt).
2. Az Általános beállítások fülön, a szolgáltatók listájában kapcsold be a JetWooBuilder Products Grid kapcsolót.

Más szolgáltatókat kikapcsolhatsz, ha nincs rájuk szükséged, így gyorsabb lesz az oldal.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-dashboard-settings-page&subpage=jet-smart-filters-general-settings

A képen az engedélyezhető szolgáltatók kapcsolói látszanak.

Szűrő a termékrácshoz

A szűrő létrehozása

1. Nyisd meg az Intelligens szűrők → Új hozzáadása oldalt.
2. Adj nevet a szűrőnek, és válaszd ki a szűrő típusát. A példában ez Kiválasztás.
3. Az Data Source listában válaszd a Taxonómiák lehetőséget, a Taxonomy mezőben a Termékkategóriák taxonómiát.
4. Kattints a Publish gombra.

A szűrő és a rács az oldalon

1. Nyisd meg az oldalt vagy sablont az Elementor szerkesztőben. A példában két oszlop van.
2. Az első oszlopba húzd a szűrő típusának megfelelő widgetet (itt a Select Filter). Válaszd ki a szűrőt, és a This filter for listában a JetWooBuilder Products Grid szolgáltatót. A többi beállítás szabadon alakítható.
3. A második oszlopba tedd a Products Grid widgetet, szabd testre, és kattints a Publish gombra.
4. Nyisd meg a nyilvános oldalt, és próbáld ki a szűrőt.

Más szűrőtípusokat is használhatsz: Jelölőnégyzetek listája, Választógomb, Tartomány, Keresés. Szűrhetsz kategória, címke, attribútum és más taxonómia szerint is.

Lapozás a termékrácshoz

A Lapozás widget a JetSmartFilters része. Egyes oldalakra (egyedi termék, archívum) is hozzáad lapozást, és felosztja a JetEngine widgetjeivel (például Naptár) és a JetWooBuilder widgetjeivel (Products Grid, Products List, Products Loop) megjelenített elemeket. A WooCommerce archívumoldalak terméklistájának lapozására a JetWooBuilder Products Pagination widgetje való.

1. Kapcsold be a JetWooBuilder Products Grid szolgáltatót az Általános beállítások oldalon (lásd fent).
2. Nyisd meg az oldalt, húzd a Products Grid widgetet a kívánt szekcióba, és állítsd be. Itt megadhatsz egy előre beállított stílust (Presets) és más beállításokat. Ha archívumoldalon az aktuális kategória, címke vagy taxonómia termékeit akarod látni, kapcsold be a Use Current Query kapcsolót. A Products Number mezőben azt adhatod meg, hány termék jelenjen meg egy oldalon (a példában négy).
3. Keresd meg a Lapozás (Pagination) widgetet, és húzd az oldalra.
4. A Tartalom fülön a Pagination for listában válaszd a JetWooBuilder Products Grid lehetőséget, az Apply type értéke legyen AJAX. Több azonos szolgáltatójú widget esetén itt adhatod meg a Query ID értékét.
5. A Controls fülön:
   • bekapcsolhatod az előző és következő gombokat, és átírhatod a feliratukat,
   • az Items center offset mezővel azt állítod, hány elem legyen az aktuális oldal két oldalán,
   • az Items edge offset mezővel azt, hány elem legyen a lista elején és végén,
   • az Enable Load More kapcsolóval „Load More” (Továbbiak betöltése) gombot adhatsz a lapozó mellé. Bekapcsolva a Load More Text mezőben átírhatod a gomb szövegét,
   • az Enable autoscroll kapcsolóval AJAX-os tartalomcsere után a lap a szolgáltató tetejére görget. Ekkor megjelenik a Provider top offset mező, amelyben a szolgáltató szélétől mért eltolást adhatod meg.
6. A Stílus fülön a lapozó, az elemek és a „Load More” gomb tipográfiáját, színeit, hátterét, térközeit, szegélyeit, igazítását szabhatod testre.
7. Kattints az Update gombra.

A nyilvános oldalon a lapozó a rács alatt jelenik meg. Ha bekapcsolod a Load More gombot, a kattintás újabb elemeket tölt be (a példában négyet).

A lapozó összes beállítását az Lapozás fejezet foglalja össze. Figyelj a Products Loop widget korlátjára: nem támogatja a Query ID-t (Query ID útmutató).