# Szűrők a WooCommerce shortcode-hoz

> WooCommerce-termékek szűrése a [products] shortcode kimenetén: a szolgáltató bekapcsolása, ár-, címke-, attribútum- és értékelésszűrő létrehozása, blokkok felvétele az oldalra.

A WooCommerce `[products]` shortcode-ja termékeket listáz bármelyik oldalon. A JetSmartFilters szűrői ezt a listát is szűrik, az oldal újratöltése nélkül. Itt a Gutenberg-szerkesztővel dolgozunk, de Elementorban ugyanígy működik.

## Követelmények

- Elementor (az ingyenes is elég) vagy a blokkszerkesztő (Gutenberg).
- Aktív WooCommerce.
- Aktív JetSmartFilters.

## 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 kapcsold be a **WooCommerce Shortcode** kapcsolót.

![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 a szolgáltatók kapcsolói látszanak. A WooCommerce shortcode-hoz tartozó kapcsolónak bekapcsolva kell lennie.

## A szűrők létrehozása

Minden szűrőt az **Intelligens szűrők → Új hozzáadása** oldalon veszel fel.

### Szűrés termékár szerint

1. Válaszd a **Jelölőnégyzetes tartományszűrő** típust.
2. Az **Opciók listája** részben vedd fel a sávokat. A példában: „1-100”, „101-200” és „201-300”.
3. A többi beállítást igény szerint töltsd ki. A példában az **Értékek utótagja** mezőben pénznemjel áll.
4. A **Lekérdezési változó** mezőbe írd be: `_price`. Ez a WooCommerce ármezője.
5. Mentsd a szűrőt.

Ha csúszkás ártartományt szeretnél, a **Tartomány** típust használd (lásd az [ártartomány-szűrő](https://hub.hellowp.io/hu/plugins/jet-smart-filters/woocommerce-ar-tartomany/) fejezetet).

### Szűrés termékcímke szerint

1. Válaszd a **Választógomb** típust.
2. Az adatforrás legyen **Taxonómiák**, a taxonómia pedig **Termékcímkék**. A többi beállítás szabadon alakítható.
3. A **Use Custom Query Variable** kapcsolót hagyd kikapcsolva: taxonómia forrásnál a lekérdezési változót a bővítmény magától kezeli.
4. Mentsd a szűrőt.

### Szűrés termékattribútum szerint

1. Válaszd a **Jelölőnégyzetek listája** típust.
2. A WooCommerce az attribútumokat taxonómiaként tárolja, ezért az adatforrás legyen **Taxonómiák**, a taxonómia pedig a kívánt attribútum (a példában a **Termékszín**).
3. A **Use Custom Query Variable** kapcsoló itt is maradjon kikapcsolva.
4. Mentsd a szűrőt.

### Szűrés termékértékelés szerint

1. Válaszd az **Értékelés** típust.
2. A **Csillagok száma** mezővel a legnagyobb értékelést adod meg. Az **Egyenlőtlenségi operátor** listából válaszd ki a relációt (például nagyobb vagy egyenlő).
3. A **Lekérdezési változó** mező jobb oldalán kattints a dinamikus címke ikonjára, és válaszd a `_wc_average_rating` mezőt.
4. Mentsd a szűrőt.

Az értékelésszűrő részletei a [termékek szűrése értékelés szerint](https://hub.hellowp.io/hu/plugins/jet-smart-filters/woocommerce-ertekeles/) fejezetben vannak.

## A shortcode az oldalon

1. Hozz létre egy új oldalt, vagy nyiss meg egy meglévőt.
2. Vegyél fel egy **Shortcode** blokkot, és írd bele a WooCommerce shortcode-ot. Például a négy legújabb termék:

```text
[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]
```

A `[products]` shortcode paramétereinek teljes listáját a WooCommerce saját dokumentációja tartalmazza. Bármilyen termékválogatást összeállíthatsz vele.

## A szűrőblokkok felvétele

1. A szűrőknek külön oszlopot vagy sort érdemes adni a lista mellett.
2. Add hozzá a megfelelő szűrőblokkot (például **Jelölőnégyzetes tartományszűrő**, **Választógomb**, **Jelölőnégyzetek listája**, **Értékelés**).
3. A blokk beállításaiban válaszd ki a létrehozott szűrőt, a **This Filter For** mezőben pedig a **WooCommerce Shortcode** szolgáltatót.
4. A **Jelölőnégyzetek listája** és a **Választógomb** blokk **További beállítások** fülén az elrendezést is alakíthatod. A példában a **Keresés engedélyezve** és a **Legördülő engedélyezve** funkciót is bekapcsoltuk.
5. Mentsd az oldalt.

![Termékszűrők és a shortcode-dal kiírt termékek a nyilvános oldalon](./kepek/woocommerce-shortcode-oldal.webp)

*Termékszűrők és a shortcode-dal kiírt termékek a nyilvános oldalon* (https://minta-bolt.hu/termekszurok/)

A képen a csúszkás ártartomány, a címke szerinti választógombok és az értékelésszűrő látszik a shortcode által kiírt termékek fölött. Ha bejelölsz egy opciót, a lista a megfelelő termékekre szűkül.