# Ártartomány-szűrő WooCommerce-termékekhez

> Csúszkás ártartomány-szűrő: a WooCommerce min/max árak használata, a _price lekérdezési változó, összekötés a termékráccsal, és a min/max érték lekérése JetEngine-lekérdezésből.

A **Tartomány** szűrőtípus csúszkával ad meg egy számtartományt. WooCommerce-boltban leggyakrabban ártartományként használják: a látogató beállítja a legkisebb és legnagyobb árat, és csak a közé eső termékeket látja.

## Követelmények

- Aktív WooCommerce, felvett termékekkel.
- Elementor (az ingyenes is elég), blokkszerkesztő vagy Bricks.
- Aktív JetSmartFilters.

## 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 (például „Ártartomány”), és válaszd a **Tartomány** típust.
3. A **Min/max dinamikus lekérése** listából válaszd a **WooCommerce min/max árak** lehetőséget. A legkisebb és legnagyobb termékárat így a bővítmény magától kiolvassa.
4. A **Lekérdezési változó** mezőbe írd be: `_price`. Ez a WooCommerce metamezője, amely a termék árát tárolja.
5. A **Szűrőcímkék** részben add meg a **Szűrőcímke** és az **Aktív szűrőcímke** értékét.
6. Kattints a mentés gombra.

![A Tartomány szűrő beállításai: WooCommerce min/max árak és a _price lekérdezési változó](./kepek/tartomany.webp)

*A Tartomány szűrő beállításai: WooCommerce min/max árak és a _price lekérdezési változó* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-smart-filters)

A képen a **Min/max dinamikus lekérése** mező a **WooCommerce min/max árak** értéken áll, a **Lekérdezési változó** pedig `_price`.

További mezők a tartományszűrőn:

| Beállítás | Mit csinál |
| --- | --- |
| **Lépés** | A csúszka lépésköze. Az alapérték 1. |
| **Értékek előtagja** / **Értékek utótagja** | Az érték elé vagy után kerülő jel, például a pénznem. |
| **Beviteli mezők engedélyezve** | A csúszka mellett kézzel beírható mezők is megjelennek. |
| **Tizedesek száma**, **Tizedesjel**, **Ezreselválasztó** | Az érték formázása. |

## Összekötés a termékráccsal

1. Nyisd meg azt az oldalt vagy sablont, ahol a szűrőt el szeretnéd helyezni. Győződj meg róla, hogy a szűrendő termékeket kiíró elem (szolgáltató) is rajta van. A példában a JetWooBuilder **Products Grid** widgetje, nyolc termékre állítva.
2. Add hozzá a **Tartomány** widgetet vagy blokkot.
3. A tartalom beállításaiban válaszd ki a létrehozott szűrőt. A **This filter for** listában a **JetWooBuilder Products Grid** szolgáltatót (vagy más, WooCommerce-hez tartozó szolgáltatót) válaszd.
4. Az **Apply type** értéke lehet **AJAX**, **Mixed** vagy **Page reload**. Az **Apply on** értéke **Value change** (értékváltozáskor) vagy **Click on apply button** (az alkalmaz gombra kattintva).
5. A **Stílus** fülön alakíthatod a megjelenést. Ha kész vagy, kattints a **Publish** gombra.

A nyilvános oldalon a csúszka és a termékrács együtt látszik. A csúszka húzására a rács csak a kiválasztott ártartományba eső termékeket mutatja.

## Min/max érték lekérése JetEngine-lekérdezésből

Ha az ártartomány határait nem az összes termék, hanem egy szűkebb termékcsoport adja (például csak egy kategória), a határokat egy JetEngine-lekérdezésből is lekérheted. Ehhez PHP-részlet kell.

### Követelmények

- Egy kódrészletkezelő bővítmény (vagy bármi, amivel PHP-kódot lehet felvenni).
- WooCommerce-termékek beállított árral.
- JetEngine, benne egy WooCommerce-termékadatokat kiíró listing sablon.

### A kódrészlet felvétele

1. Nyisd meg a kódrészletkezelő bővítmény **Új hozzáadása** oldalát.
2. Nevezd el a részletet (például „JetEngine Query Source for Range Filter”).
3. Illeszd be a JetEngine-lekérdezésből történő lekérést biztosító kódot. Ez egy új visszahívást vesz fel, amelyet a tartományszűrő használni tud.
4. Kattints a **Mentés és aktiválás** gombra.

### A lekérdezés létrehozása

1. Nyisd meg a **JetEngine → Query Builder** oldalt, és kattints az **Új hozzáadása** gombra.
2. Adj nevet a lekérdezésnek, a típus legyen **Bejegyzések lekérdezése** (Posts Query).
3. A **Custom Query ID** mezőbe írj egy egyedi azonosítót, amely összeköti a lekérdezést, a szűrőt és a szolgáltatót. A példában: `price-range`.
4. A bejegyzéstípus legyen **Products** (termékek).
5. Ha szűkíteni akarsz, a **Tax Query** fülön vegyél fel egy szabályt: a **Taxonomy** mező **Product categories**, a **Field** mező **Slug**, a **Terms** mező a kategória slugja (a példában `business`). Ez a lépés választható, bármilyen taxonómiát használhatsz, vagy ki is hagyhatod.
6. Mentsd a lekérdezést.

### A szűrő felépítése

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt, adj nevet a szűrőnek, és válaszd a **Tartomány** típust.
2. A **Min/max dinamikus lekérése** listából válaszd a **Get from JetEngine Query** lehetőséget. Ez a kódrészlet aktiválása után jelenik meg.
3. A megjelenő **Select Query** listából válaszd ki az előbb létrehozott lekérdezést.
4. A **Lekérdezési változó** mezőbe írd be: `_price`. Ha más számmezőre szűrnél (például egyéni metamezőre), annak a kulcsát add meg.
5. Töltsd ki a **Szűrőcímkék** részt, és mentsd a szűrőt.

### Az oldal összeállítása

1. Add hozzá a **Tartomány** widgetet. A **Select filter** mezőben válaszd ki a szűrőt, a **This filter for** listában a **JetEngine** szolgáltatót.
2. A **Query ID** mezőbe írd ugyanazt az azonosítót, mint a lekérdezésben (`price-range`).
3. Add hozzá a **Listing Grid** widgetet, és válaszd ki a listing sablont. Az **Általános** fülön igény szerint állíts (például oszlopszám).
4. A **Custom Query** fülön kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a lekérdezést.
5. A **Haladó** fül **CSS ID** mezőjébe írd be ugyanazt az azonosítót (`price-range`).
6. Tedd közzé az oldalt.

A nyilvános oldalon a csúszka határai a lekérdezés termékeinek legkisebb és legnagyobb árát követik, a rács pedig a kiválasztott ártartomány termékeit mutatja.

A szolgáltatók és a Query ID összekötéséről az [Összekötés a szolgáltatókkal](https://hub.hellowp.io/hu/plugins/jet-smart-filters/megjelenites-szolgaltatok-query-id/) fejezetben olvashatsz.