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

> WooCommerce-termékek szűrése a JetWooBuilder Products Grid widgetjén, és a Lapozás widget hozzákapcsolása: szolgáltató bekapcsolása, beállítások, Továbbiak betöltése.

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.

![Az Általános beállítások oldal szolgáltatókapcsolói](./kepek/beallitasok-altalanos.webp)

*Az Általános beállítások oldal szolgáltatókapcsolói* (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](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-lapozas/) fejezet foglalja össze. Figyelj a **Products Loop** widget korlátjára: nem támogatja a Query ID-t ([Query ID útmutató](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-query-id/)).