# Divi 5 modulok: Loop szűrő

> A Supreme Loop Filter modul és a Loop Filter Item gyermekelem beállításai: szűrősáv egy Divi Loop fölé, keresés, kategória, ár, értékelés, AJAX lapozás.

A **Supreme Loop Filter** egy Divi Loopot (például bejegyzések vagy termékek listáját) vesz körül, és szűrősávot ad hozzá. A szülő modul tartja az eredményeket (**Filter Content**), az URL-szinkront, az alkalmazás módját és az AJAX lapozást. Minden **Loop Filter Item** gyermekelem egy-egy vezérlő: keresés, kategória, szerző, dátum, rendezés, küldés, visszaállítás, egyéni mező, vagy WooCommerce-nél ár, értékelés és készletállapot.

Ez Divi 5-ös modul, nem kiterjesztés, és alapból ki van kapcsolva. Az oldalon a builder feliratai angolul maradnak, ezért itt is úgy szerepelnek.

## Mit tud

- A modulon belüli Loopot szűri. A kategórialisták a Loop bejegyzéstípusát követik.
- A szűrősáv elemei hozzáadhatók, átrendezhetők és formázhatók a **Filter Elements** alatt.
- Keresés, taxonómia, szerző, dátum, egyéni mező és rendezés a builderből, külön kód nélkül.
- Ár, értékelés és készletállapot szűrő, ha a WooCommerce aktív.
- Az eredmény frissülhet kattintásra (**Auto**), vagy egy küldés gombra (**Submit**).
- A szűrt nézet megosztható linkként (**Sync Filters to URL**).
- AJAX lapozás: kikapcsolva, „Tovább” gombbal vagy számozott oldalakkal.
- Elrendezés: vízszintes sáv az eredmények fölött, vagy függőleges oldalsáv balra, jobbra, kívánt esetben tapadós.

| Példa | Beállítás |
|---|---|
| Blog vagy egyéni bejegyzéstípus katalógus | Keresés, kategória és dátum szűrő, a Filter Contentben bejegyzések Loopja. |
| WooCommerce termékkatalógus | Ár csúszka, értékelés és készlet a termék Loop mellett. |
| Oldalsávos boltszűrő | Függőleges elrendezés, tapadós oldalsáv, telefonon egymás alá rendezve. |
| Szűrés küldésre | Több szűrő, a végén egy gomb (**Apply Mode** = Submit). |

Mikor ne használd:

- Ha a Loop a modulon kívül van: a modul csak azt a Loopot szűri, amit a **Filter Content** területre teszel.
- Ha csak Theme Builderes blog lapozásra van szükséged: ez a modul a saját AJAX lapozását használja helyette.
- Ár, értékelés és készlet szűrő WooCommerce nélkül nem érhető el, ezek a típusok rejtve maradnak.
- Amíg a modult nem kapcsoltad be, nem jelenik meg a modulválasztóban.

## Bekapcsolás és hozzáadás

1. Nyisd meg a **Divi Supreme Pro → Modulok beállításai** fület, kapcsold be a **Supreme Loop Filter** modult, és mentsd.
2. Töltsd újra a Divi 5 Visual Buildert.
3. Add hozzá a **Supreme Loop Filter** modult.
4. A **Filter Content** alatt adj hozzá egy Loopot, és azokat a modulokat, amelyek az egyes találatokat megjelenítik.
5. A **Filter Elements** alatt tartsd meg vagy szerkeszd a kezdő szűrőelemeket.

A modul szülő és gyermek részből áll. Divi 4-ben nincs megfelelője, ez kizárólag Divi 5-ös modul.

## Első lépések

1. Kapcsold be a modult a **Modulok** fülön (alapból ki van kapcsolva).
2. Add hozzá a **Supreme Loop Filter** modult.
3. A **Filter Content** alatt szúrj be egy Loopot, és kapcsold be rajta a Loop funkciót, hogy a taxonómialisták ahhoz igazodjanak.
4. A **Filter Elements** alatt négy kezdő elem van: Search, Taxonomy (kategória), Reset és Submit.
5. A **Content → Loop Filter Settings** alatt hagyd bekapcsolva az **Enable Filters** kapcsolót.
6. Ha azt szeretnéd, hogy az eredmények csak egy gombnyomásra változzanak, állítsd az **Apply Mode**-ot Submitra.
7. Ha a látogatók megoszthassák a szűrt nézetet, kapcsold be a **Sync Filters to URL** opciót.
8. A **Design → Filter Layout** alatt hagyd a Vertical (oldalsáv) elrendezést, vagy válaszd a Horizontal-t.
9. Mentsd az oldalt, és nézd meg a weboldalon.

A builder súgószövege: a Loopot a Filter Contentbe tedd az eredményekhez, a szűrőelemeket pedig a Filter Elements alá.

## Filter Content és Filter Elements

| Terület | Mi kerül ide |
|---|---|
| **Filter Elements** | A Loop Filter Item gyermekelemek, vagyis a látogató által használt vezérlők. Az **Add Element** új szűrőelemet szúr be, húzással a sáv sorrendje módosítható. |
| **Filter Content** | Az eredmények helye: egy Loop, benne sorokkal vagy kártyákkal. |

A taxonómiaválasztók addig üresek vagy általánosak, amíg nincs Loop a Filter Contentben. A builder ilyenkor figyelmeztet: kapcsold be a Loopot a Filter Contentben, hogy a kategórialisták a Loophoz igazodjanak.

## Loop Filter Settings (Content)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Enable Filters** | Megjeleníti a szűrősávot. | Be |
| **Result Count** | Kiírja, hány találat felel meg. | Be |
| **Empty State Title** | A cím, ha nincs találat. Üresen hagyva elrejtődik. | No Results Found. |
| **Empty State Description** | Kiegészítő szöveg a cím alatt. Üresen hagyva elrejtődik. | Mintaszöveg |
| **Sync Filters to URL** | A böngésző címsorát frissíti, így a szűrt nézet megosztható. | Ki |
| **Apply Mode** | Az **Auto** kattintásra frissít, a **Submit** megvárja a Submit gombot. | Auto |
| **Taxonomy Filters Relation** | AND: minden kiválasztott csoportnak teljesülnie kell. OR: bármelyik csoport elég. | AND |
| **AJAX Pagination** | Kikapcsolva, Load more vagy számozott oldalak. | Off |
| **Load More Text** | A gomb felirata, ha a lapozás Load more. | Load more |

## A szűrőelemek típusai

A szűrőelemeket a Loop Filter Item gyermekmodul adja. Új elemet a szülő **Filter Elements** területén vehetsz fel, a gyermeket nem tudod önállóan az oldalra tenni.

| Típus | Mit csinál |
|---|---|
| **Search** | Szöveges keresés. A helykitöltő alapból „Search…”. |
| **Taxonomy** | Kategória, címke vagy más taxonómia a beágyazott Loopból. Megjelenés: Select, Radio vagy Checkbox. |
| **Author** | Azok a szerzők, akik írtak bejegyzést a Loopban. |
| **Date range** | Szűrés a megjelenés dátuma szerint. Bármelyik dátum üresen hagyható. |
| **Custom Field** | Szűrés egy meta kulcs szerint (listából választható vagy beírható). Megjelenés: Text, Select, Radio vagy Checkbox. |
| **Order By** | Dátum, cím, menü sorrend, hozzászólások száma vagy véletlen. Alapból dátum szerint csökkenő. A látogató is módosíthatja. |
| **Submit** | Alkalmazza a szűrőket (kell, ha az Apply Mode Submit). Felirata alapból „Submit”. |
| **Reset** | Törli a szűrőket. Felirata alapból „Reset”. |
| **Price** | Csak WooCommerce: mezők, csúszka vagy csúszka mezőkkel. |
| **Rating** | Csak WooCommerce: Radio, Checkbox vagy Dropdown. |
| **Stock Status** | Csak WooCommerce: raktáron, nincs raktáron, utánrendelhető. |

## A Loop Filter Item beállításai

Közös beállítások:

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Type** | Mit szűr ez az elem. | Taxonomy |
| **Field Label** | A szűrő címe fölötte. Üresen hagyva nem látszik. | Üres |
| **Search Placeholder** | Súgószöveg a keresőmezőben (Search típusnál). | Search… |

### Taxonomy

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Field Option** | Melyik taxonómiát listázza. Ha a Loop be van kapcsolva a Filter Contentben, a Loophoz igazodik. | category |
| **Taxonomy UI** | Select vagy Radio (egy választható), illetve Checkbox (több). | checkbox |
| **Terms Relation** | Csak Checkboxnál. OR: bármelyik kijelölt kifejezés, AND: mindegyik. | OR |
| **Terms Layout** | Inline vagy Stacked (Checkbox és Radio). | inline |
| **Collapsible Subcategories** | Az alkategóriákat elrejti, amíg valaki ki nem nyitja. | Ki |
| **Start Expanded** | Az alkategóriák nyitva indulnak. | Ki |

### Custom Field

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Field Option** | Felismert meta kulcs kiválasztása, vagy Manual a kézi beíráshoz. | manual |
| **Meta Key** | Az egyéni mező neve, ha a Field Option Manual. | Üres |
| **Field Type** | Text, Select, Radio vagy Checkbox. | text |
| **Terms Layout** | Inline vagy Stacked (Checkbox és Radio). | inline |

### Order By

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Default Order By** | Date, Title, Menu order, Comment count vagy Random. | date |
| **Default Order** | Csökkenő vagy növekvő. | DESC |

### Submit és Reset

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Submit Label** | A Submit gomb felirata. | Submit |
| **Reset Label** | A Reset gomb felirata. | Reset |

### Price (WooCommerce)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Price Filter Type** | Input fields, Range slider vagy Slider + input fields. | Input fields |
| **Min / Max Placeholder** | Súgószöveg az ármezőkben. | Min / Max |
| **Separator** | Szöveg a két mező között, például „-tól”. | Üres |
| **Show Go Button** | Go gomb az ármezők mellett (mezős típusnál). | Ki |
| **Go Label** | A Go gomb felirata. | Go |
| **Range Min / Max Override** | A csúszka két vége. Üresen a legolcsóbb és legdrágább termék ára. | Üres |
| **Step** | A csúszka lépésköze. | 1 |
| **Minimum Gap** | A két fogantyú legkisebb távolsága. | 1 |
| **Value Labels** | Above slider, On handles (tooltip), Below vagy None. | Above slider |
| **Slider Apply** | Auto, vagy Apply gomb. | Auto |
| **Apply Label** | Az Apply gomb felirata. | Apply |
| **Currency Prefix / Suffix** | Pénznem előtag vagy utótag, ha a WooCommerce pénznem ki van kapcsolva. | Üres |
| **Quick Range Pills** | Gyors árgombok a csúszka alatt. | Ki |
| **Shortcut Count** | 2 és 8 közötti számú egyenlő árszelet. | |
| **Show Distribution** | Oszlopok arról, hány termék esik az egyes árakra. | Ki |
| **Distribution Bars** | Az oszlopok száma, 4 és 40 között. | |

A korábban mentett elrendezésekben az „árszintek” és az „eloszlás csúszka” típusok még megjelennek, de az új elemek típuslistájában már nincsenek.

### Rating és Stock Status

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Rating UI** | Radio, Checkbox vagy Dropdown. | radio |

A **Stock Status** elemnek nincs külön beállítása, a raktáron, nincs raktáron és utánrendelhető állapotot listázza.

## Megjelenés (Design)

A szülő **Design** füle állítja az alapokat, a gyermekelem ezt felülírhatja. Ha a gyermek értéke üres, a szülőé érvényes.

### Filter Layout

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Filter Layout** | Horizontal: a szűrők az eredmények fölött. Vertical: mellettük. | Vertical |
| **Gap** | A vezérlők közötti távolság. | 18px |
| **Bar Alignment** | Csak vízszintesnél: balra, középre, jobbra vagy szétosztva. | start |
| **Item Alignment** | Csak vízszintesnél: a sor teteje, közepe vagy alja szerint. | start |
| **Stack Breakpoint** | Ennél kisebb képernyőn az oldalsáv az eredmények fölé kerül: Phone (767px), Tablet (980px) vagy Never. Csak függőlegesnél. | Phone (767px) |
| **Sidebar Position** | Bal vagy jobb. Csak függőlegesnél. | left |
| **Sidebar Width** | 120 és 480 px között (vagy százalék). Csak függőlegesnél. | 280px |
| **Sidebar Content Alignment** | A szűrődoboz fent, középen vagy lent. Csak függőlegesnél. | start |
| **Sidebar Items Justify** | A vezérlők igazítása az oldalsávban. Csak függőlegesnél. | stretch |
| **Sticky Sidebar** | Görgetéskor is látszik az oldalsáv. Csak függőlegesnél. | Ki |
| **Sticky Offset** | A tapadó szűrők távolsága a lap tetejétől. | 0px |

### További stílusok

| Csoport | Mit formáz |
|---|---|
| **Filter Layout** | Az elrendezés, a rés, az oldalsáv (háttér, térköz, szegély, árnyék). |
| **Filter Bar** | Csak vízszintesnél: igazítás, a sáv háttere, mérete, térköze, szegélye. |
| **Field** | Beviteli mező, címke, helykitöltő színe (alapból `rgba(0,0,0,0.45)`), fókusz szegély (alapból `#5c1db0`), háttér, térköz, szegély. |
| **Checkbox / Radio** | Méret (16px), jelöletlen és jelölt szín, kifejezések címkéi, távolság (12px), tördelés (be), elrendezés (Inline vagy Stacked). |
| **Collapse Subcategory** | Behúzás (1.15rem), alkategóriák közti rés, nyíl színe és mérete. |
| **Price** | Csúszka sávja, kitöltése és fogantyúja, értékcímkék, pénznem előtag és utótag, eloszlás oszlopai, gyors árgombok. |
| **Button** | **Reset / Submit Layout**: Stacked vagy Side by Side (alapból Side by Side), valamint a Reset, Submit és Load more gombok stílusa. |
| **Result Count / Empty State** | Betűtípus, háttér, térköz. |
| **Pagination** | Az oldalelemek közti rés (8px), az oldalak és az aktuális oldal stílusa. |
| **AJAX Loading** | **AJAX Loading Style**: Ring, Dots, Pulse vagy Bars (alapból Ring), ikon színe (`#5c1db0`), mérete (1.75rem), takaró háttér. |

A **Terms Layout** (Inline vagy Stacked) és a **Wrap Terms** (alapból be) a szülőn a jelölőnégyzetes és rádiós listák alapértelmezései. A szokásos Divi méret, térköz, szegély, árnyék, szűrők, transzformáció és animáció csoportok is érvényesek.

### A gyermekelem Design füle

A gyermek Design füle típusfüggő: csak azok a csoportok látszanak, amelyek az elem típusára vonatkoznak.

| Csoport | Mikor látszik | Mit formáz |
|---|---|---|
| **Field Label** | Címet mutató típusoknál | A címke betűje és térköze. |
| **Field** | Search, Author, Date, Order By, select vagy szöveges Custom Field, Price mezők, Stock, Rating legördülő, Taxonomy select | Beírt szöveg, helykitöltő színe, fókusz szegély, háttér, térköz, szegély. |
| **Checkbox / Radio** | Taxonomy, Rating vagy Custom Field jelölőnégyzettel vagy rádióval | Méret, színek, doboz, címkék, távolság, tördelés. |
| **Collapse Subcategory** | Taxonomy jelölőnégyzet vagy rádió | Behúzás, alkategóriák rése, nyíl színe és mérete. |
| **Price** | Price elemeknél | Csúszka sávja és fogantyúja, **Tooltip Offset** (ha a Value Labels On handles), eloszlás, árgombok, pénznem. |
| **Button** | Submit vagy Reset | A Divi gombstílusai az adott elemre. |

## Tippek

- A Loopot mindig a Filter Contentbe tedd, ne a szűrőmodul mellé.
- Ha az Apply Mode Submit, vegyél fel Submit elemet is, különben a kattintások nem érvényesülnek.
- A szülő **Taxonomy Filters Relation** beállítása a különböző taxonómiaelemek között dönt. Az elem **Terms Relation** beállítása az egy elemen belüli kifejezések között.
- Az Ár, Értékelés és Készletállapot típus csak aktív WooCommerce mellett jelenik meg.
- Sync Filters to URL: akkor használd, ha megosztható vagy könyvjelzőzhető szűrt nézetet szeretnél.
- Ha korábban a **Divi Supreme → Kiterjesztések** alatt volt egy Loop Filter kapcsoló, az értéke átkerült a **Modulok → Supreme Loop Filter** beállításba. A továbbiakban a **Modulok** fület használd.