# Szűrők a klasszikus téma oldalsávjában

> JetSmartFilters szűrők a WooCommerce bolt oldalsávjában klasszikus témával: widgetek, az alapértelmezett WooCommerce archívum szolgáltató, lapozás-kompatibilitás beállítása.

A szűrőket a bolt oldalainak oldalsávjába is betehetted. A példában az Astra téma oldalsávját használjuk, de bármelyik oldalsávot támogató klasszikus téma jó.

A bővítmény jelenleg csak klasszikus témákkal működik (például Astra, OceanWP, GeneratePress, Blocksy, Kava). A blokktémák egyelőre nem támogatottak.

## Követelmények

- Aktív WooCommerce és JetSmartFilters.
- Klasszikus téma, amely támogatja az oldalsávot.

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

1. Nyisd meg az **Intelligens szűrők → Új hozzáadása** oldalt.
2. Válaszd ki a kívánt szűrőtípust. A példában **Kiválasztás**.
3. Állítsd be a szűrőt. A példában az adatforrás **Taxonómiák**, az **Osztályozás (taxonomy)** pedig a **Product feature** (termékjellemző).
4. Kattints a mentés gombra.

## Az oldalsáv testreszabása

1. Nyisd meg a **Megjelenés → Widgetek** oldalt.
2. Keresd meg és nyisd le a **WooCommerce Sidebar** területet. Ha a témád nem ad ilyen területet, használd az alapértelmezett oldalsávot.
3. Vegyél fel egy **Címsor** blokkot (a példában „Szűrés:” felirattal).
4. Vegyél fel egy szűrőblokkot, a példában a **Kiválasztás** szűrő blokkját. Az általános beállításokban válaszd ki az elkészített szűrőt, a **This Filter For** mezőben pedig az **Default WooCommerce Archive (Classic)** szolgáltatót.
5. A többi beállítást igény szerint módosíthatod. Kattints az **Update** gombra.

## Lapozás-kompatibilitás beállítása

1. Nyisd meg az **Intelligens szűrők → Beállítások** oldalt, és kattints a **Compatibility** fülre.
2. A **Pagination Container CSS Selector** és a **Pagination Item CSS Selector** mezőt ellenőrizd. Astra témánál az alapértelmezett érték jó, más témánál át kell írni.

![A Compatibility fül a WooCommerce résszel](./kepek/beallitasok-kompatibilitas.webp)

*A Compatibility fül a WooCommerce résszel* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-dashboard-settings-page&subpage=jet-smart-filters-compatibility)

A képen a **Compatibility** fül látszik. A lapozás CSS-választói a **WooCommerce** részen belül vannak, ezt kell lenyitni.

A megfelelő értékek kiderítéséhez nyisd meg a bolt oldalát, és a böngésző fejlesztői eszközeivel nézd meg a lapozó osztályait:

1. Jelöld ki a lapozó tárolóját, és olvasd le az osztályát (a példában `woocommerce-pagination`). Másold a **Pagination Container CSS Selector** mezőbe.
2. Jelölj ki egy lapozóelemet, és olvasd le az osztályát (a példában `a.page-numbers`). A **Pagination Item CSS Selector** mezőbe a tároló osztályával együtt írd be:

```css
.woocommerce-pagination a.page-numbers
```

## A bolt oldal megjelenése

Ha még nem állítottad be, a **Megjelenés → Testreszabás** oldalon, a **WooCommerce** és az **Egyedi termék** lapokon módosíthatod az elrendezést és a többi beállítást. Kattints a **Közzététel** gombra.

## Az eredmény

A bolt oldalon az oldalsávban látszik a szűrő. Egy opció (például „Akciós”) kiválasztása után a lista szűkül. A szűrő együtt működik a WooCommerce lapozásával, a találatszámlálóval és a rendezéssel.