# Lapozás

> A Lapozás blokk, widget és elem beállításai: szolgáltatók, alkalmazási mód, Query ID, oldalszámok, előző és következő gombok, Továbbiak betöltése és automatikus görgetés.

A lapozás az oldal egyik eleme, amellyel a látogató a találatok oldalai között váltogat. A JetSmartFilters lapozója Elementorban widget, a blokkszerkesztőben blokk, Bricksben elem. A beállításai gyakorlatilag azonosak mindhárom helyen.

![A Lapozás blokk beállításai a blokkszerkesztőben](./kepek/altalanos-lapozas-blokk.webp)

*A Lapozás blokk beállításai a blokkszerkesztőben* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=edit)

A képen a blokk oldalsávja látszik: a szolgáltató, az alkalmazási mód és a **QUERY ID** mezője.

## Alapbeállítások

| Beállítás | Mit csinál |
| --- | --- |
| **THIS FILTER FOR** (Elementorban **Pagination for**) | A szolgáltató, amelyhez a lapozót kötöd. |
| **APPLY TYPE** | **AJAX**: újratöltés nélkül mutatja az eredményt. **Page reload**: újratölti az oldalt. **Kevert**: nem tölt újra, de az URL megváltozik, így a szűrt találat linkje megosztható. |
| **QUERY ID** | A használt szolgáltató egyedi azonosítója. |
| **Additional Providers Enabled** | Több szolgáltatóra is érvényesíti a lapozást, mint a szűrőknél. |

A választható szolgáltatók: Elementor Pro Archive Products, Archive, Loop Grid, Portfolio, Posts és Products; JetEngine Calendar; JetEngine; JetWooBuilder Products Grid és Products List; WooCommerce Archive (JetWooBuilder); WooCommerce Shortcode; JetEngine Dynamic Chart; JetEngine Dynamic Table; Dynamic Maps. Néhány csak akkor jelenik meg, ha a hozzá tartozó bővítmény telepítve és aktív, és be van kapcsolva az **Általános beállítások** oldalon is.

A **QUERY ID** akkor kell, ha egy oldalon több azonos típusú szolgáltató van, és a lapozó csak az egyikhez tartozzon. Például ha több Listing Grid vagy Products Grid van az oldalon: a kívánt szolgáltató **CSS ID** mezőjébe (a Haladó részben) írj egy azonosítót, és ugyanezt add meg a lapozó **QUERY ID** mezőjében. A két elem így összekapcsolódik ([Query ID útmutató](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-query-id/)).

Fontos: a lapozónak és az oldalon lévő minden szűrőnek ugyanaz legyen az alkalmazási módja ([Alkalmazási módok](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-alkalmazas-tipusok/)).

## Lapozás a Listing Gridhez (Elementor)

Ha sok elemed van a **Listing Grid** widgetben, de egyszerre csak keveset akarsz mutatni, kösd hozzá a lapozót, hogy a látogató oldalszámokkal váltson az elemek között.

1. Nyisd meg az oldalt az Elementorban, és húzd rá a **Listing Grid** widgetet. Válaszd ki a listing elemet a **Listing** listában, és végezd el a további beállításokat.
2. A **Haladó** lapon töltsd ki a **CSS ID** mezőt: ez az azonosító köti össze a rácsot a lapozóval.
3. Tedd a **Pagination** widgetet a rács mellé.
4. A **Tartalom** beállításoknál a **Pagination for** mezőben válaszd a **JetEngine** lehetőséget, az **Apply type** mezőben az **AJAX** értéket.
5. Ha az oldalon csak egy JetEngine elem van, a **Query ID** mezőt nem kell kitölteni. Ha több **Listing Grid** van, másold a rács **CSS ID** értékét a **Query ID** mezőbe.
6. Alakítsd át a lapozó kinézetét, és tedd közzé az oldalt.

A nyilvános oldalon az oldalszámokra kattintva az elemek újratöltés nélkül váltanak.

## Vezérlők

![A Lapozás blokk Controls szakasza](./kepek/altalanos-lapozas-vezerlok.webp)

*A Lapozás blokk Controls szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=edit)

A kép a **Controls** szakaszt mutatja kinyitva. A blokk neve és a vezérlők feliratai ezen a felületen angolul maradtak.

| Beállítás | Mit csinál |
| --- | --- |
| **Enable Items** | Megjeleníti az oldalszámokat a lapozáshoz. |
| **Items center offset** | Lerövidíti a listát: ha például 2 az értéke, a középső szám két oldalán csak két-két oldalszám látszik. |
| **Items edge offset** | Csak az **Items center offset** mellett működik: a lista elején és végén ennyi oldalszámot mutat. |
| **Enable Prev/Next buttons** | Megjeleníti az „előző” és „következő” gombokat. |
| **Prev Text**, **Next Text** | A két gomb szövege. |
| **Hide inactive** | Alapból be van kapcsolva: elrejti az inaktív gombot. Az első oldalon nincs „előző”, az utolsón nincs „következő” gomb. |
| **Enable Load More** | „Továbbiak betöltése” gombot ad a lapozóhoz, amely az oldal újratöltése nélkül tölt be újabb elemeket, annyit, amennyi már megjelent a szolgáltatóban. |
| **Load More Text** | A gomb szövege. |
| **Enable Autoscroll** | Az oldalszámra kattintás után az oldal automatikusan felgörget a tetejére. |
| **Provider top offset** | Az automatikus görgetés felső eltolása. |

## Eltérések szerkesztőnként

- **Elementor:** a beállítások két fülön vannak, a **Tartalom** és a vezérlők fülén.
- **Blokkszerkesztő:** a blokknak van egy **Haladó** része, benne az **ADDITIONAL CSS CLASS(ES)** mezővel, ahol a blokkhoz egyéni CSS-osztályokat adhatsz.
- **Bricks:** az elem beállításai megegyeznek az Elementor-widgetével.