Divi 5 modulok: Loop szűrő

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.