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

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.

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 fejezetben olvashatsz.