Hogyan építs dinamikus szűrőket a Webflow CMS kollekciókhoz?

Üdvözöllek, Webflow rajongó! Képzeld el, hogy a felhasználóid egy pillanat alatt megtalálják, amit keresnek a weboldaladon. Legyen szó termékekről, blogbejegyzésekről, projektekről vagy bármilyen más tartalomról, amit a Webflow CMS segítségével kezelsz, a dinamikus szűrők a kulcs a kiváló felhasználói élményhez. Ebben az átfogó útmutatóban lépésről lépésre bemutatjuk, hogyan építhetsz interaktív és hatékony szűrőket a Webflow CMS kollekciókhoz, méghozzá úgy, hogy az még a SEO optimalizálás szempontjából is előnyös legyen.

Miért van szükség dinamikus szűrőkre?

Gondolj egy online áruházra. Ha nem tudnád szűrni a termékeket ár, márka vagy szín alapján, valószínűleg hamar feladnád a keresést. Ugyanez igaz bármilyen tartalomra. A dinamikus szűrők lehetővé teszik a felhasználók számára, hogy gyorsan és intuitívan szűkítsék a tartalmat az érdeklődési körüknek megfelelően. Ez nemcsak a felhasználói élményt javítja drámaian, hanem számos más előnnyel is jár:

Fokozott elkötelezettség: A felhasználók tovább maradnak az oldalon, ha könnyen navigálhatnak.
Gyorsabb tartalomfelfedezés: Kevesebb kattintással jutnak el a releváns információhoz.
Alacsonyabb visszafordulási arány: Elégedettebb látogatók, akik nem frusztráltak a keresés során.
SEO előnyök: Bár a szűrők alapvetően dinamikusak, a megfelelő implementáció, különösen az URL paraméterek használata, segítheti a releváns keresési lekérdezésekre való rangsorolást, és a hosszabb oldalon töltött idő is pozitív jel a keresőmotorok számára.

Előkészületek: Amit tudnod kell, mielőtt belekezdesz

Mielőtt belevetnénk magunkat a konkrét lépésekbe, győződj meg róla, hogy az alábbiakkal rendelkezel:

Egy meglévő Webflow projekt.
Egy vagy több Webflow CMS kollekció, releváns mezőkkel (pl. kategória, címkék, ár, dátum, stb.).
Alapvető ismeretek a Webflow Designer használatáról.
Nem árt, ha van egy kis rálátásod a JavaScriptre, bár az általunk javasolt megoldás minimális kódot igényel.

Ebben az útmutatóban a Finsweet CMS Filter könyvtárra fogunk fókuszálni. Ez egy rendkívül népszerű és robusztus megoldás a Webflow közösségben, amely lehetővé teszi, hogy komplex szűrőket építsünk fel minimális kóddal, elsősorban egyéni attribútumok használatával.

1. lépés: A CMS kollekció felkészítése

Mielőtt bármilyen szűrőt építenél, győződj meg róla, hogy a CMS kollekciód struktúrája megfelelő. A szűrők a kollekció elemeihez rendelt mezőkön (field) alapulnak.

Hozd létre a kollekciódat: Ha még nem tetted meg, hozz létre egy új CMS kollekciót (pl. „Termékek”, „Blogbejegyzések”, „Portfólió”).
Definiáld a releváns mezőket:
- Kategória (Option vagy Reference): Pl. „Elektronika”, „Ruházat”, „Élelmiszer”. Ideális egy „Option” mező, vagy egy különálló „Kategóriák” kollekcióra hivatkozás (Reference).
- Címkék (Multi-Reference): Pl. „akció”, „új”, „prémium”. Ehhez egy „Címkék” kollekciót kell létrehozni, majd Multi-Reference mezővel hivatkozni rá.
- Ár (Number): Számtartományok szűréséhez.
- Dátum (Date): Időalapú szűréshez.
- Szín (Option): Pl. „Piros”, „Kék”, „Zöld”.
Töltsd fel tartalommal: Győződj meg róla, hogy minden kollekció elem rendelkezik a releváns szűrőmezőkkel kitöltve.

2. lépés: A gyűjtemény lista (Collection List) struktúrájának kialakítása

Most, hogy a CMS kollekció rendben van, helyezz el egy gyűjtemény listát (Collection List) a Webflow Designerben azon az oldalon, ahol a szűrőket szeretnéd használni.

Húzd be a Collection List-et: Helyezd el a Collection List komponenst az oldaladra.
Kösd össze a CMS kollekcióval: Válaszd ki a gyűjtemény listát, és a jobb oldali panelen válaszd ki, melyik CMS kollekció adatait szeretnéd megjeleníteni.
Designeld a Collection Item-eket: Stílusozd a Collection Item-eket (kép, cím, leírás, ár stb.) úgy, ahogy szeretnéd.
Finsweet attribútumok hozzáadása: Ez a legfontosabb lépés. A Finsweet CMS Filter könyvtár egyéni attribútumok (custom attributes) alapján azonosítja a szűrhető elemeket és a szűrőket.
- Válaszd ki a Collection List wrapper elemét (nem a Collection List, hanem az azt körülölelő Div Block, amit alapértelmezetten létrehoz a Webflow). Add hozzá ezt az attribútumot:
  - data-fs-cmsfilter-element="list"
- Válaszd ki a Collection Item elemét. Add hozzá ezt az attribútumot:
  - data-fs-cmsfilter-element="item"
- A Collection Item-en belül, a szűrő mezőket megjelenítő elemekhez (pl. egy szövegblokk, ami a kategória nevét mutatja), add hozzá az alábbi attribútumot:
  - data-fs-cmsfilter-field="slug-of-your-cms-field"
  Fontos: A slug-of-your-cms-field helyére a CMS meződ SLUG-ját írd be (pl. „kategoria”, „cimkek”, „ar”). Ezt megtalálod a CMS kollekciód beállításaiban, a mező szerkesztésénél. Ha például a kategória meződet „Kategória” néven hoztad létre, akkor a slugja valószínűleg „kategoria” lesz.

3. lépés: A szűrő felhasználói felület (UI) kiépítése

Most építsük meg azokat a gombokat, jelölőnégyzeteket vagy beviteli mezőket, amelyekkel a felhasználók szűrni fognak.

Hozd létre a szűrőkonténert: Húzz be egy Div Block-ot az oldaladra, ez lesz a szűrőid tárolója. Adj neki egy tetszőleges osztályt (pl. filter-wrapper).
Add hozzá a szűrőelemeket:
- Egyszeres kiválasztású szűrők (pl. Kategória):
  - Húzz be gombokat vagy rádiógombokat.
  - Minden egyes gombra/rádiógombra add hozzá ezt az attribútumot:
    - data-fs-cmsfilter-field="kategoria" (a CMS mező slugja)
    - data-fs-cmsfilter-tag="a-kategoria-slugja" (pl. „elektronika”, „ruhazat”)
  - Hozzáadhatsz egy „Összes” gombot is, ami visszaállítja a szűrőt:
    - data-fs-cmsfilter-element="clear"
    - data-fs-cmsfilter-field="kategoria"
- Többszörös kiválasztású szűrők (pl. Címkék):
  - Húzz be jelölőnégyzeteket (checkbox).
  - Minden egyes jelölőnégyzet label vagy input elemére (attól függően, hogy melyik tárolja az értéket) add hozzá ezt az attribútumot:
    - data-fs-cmsfilter-field="cimkek"
    - data-fs-cmsfilter-tag="a-cimke-slugja"
- Keresőmező:
  - Húzz be egy Text Input elemet.
  - Add hozzá a következő attribútumokat:
    - data-fs-cmsfilter-element="input"
    - data-fs-cmsfilter-field="keresendo-mezok-slugjai" (pl. „nev,leiras” – vesszővel elválasztva, ha több mezőben is keresni szeretnél)
- Számtartomány szűrők (pl. Ár):
  - Ehhez két Text Input mezőre lesz szükséged (min. és max. ár).
  - A minimum ár beviteli mezőre:
    - data-fs-cmsfilter-field="ar"
    - data-fs-cmsfilter-range="from"
  - A maximum ár beviteli mezőre:
    - data-fs-cmsfilter-field="ar"
    - data-fs-cmsfilter-range="to"
  - Lehet szükséged egy „Alkalmaz” gombra is:
    - data-fs-cmsfilter-element="apply-filters"
- Nincs találat üzenet:
  - Húzz be egy Div Block-ot, amibe beírod, hogy „Nincs találat”.
  - Add hozzá az alábbi attribútumot:
    - data-fs-cmsfilter-element="no-results"
  - Ezt a div-et alapértelmezetten rejtsd el a Webflow Designerben (Display: None). A Finsweet script majd megmutatja, ha nincsenek találatok.

4. lépés: A Finsweet CMS Filter könyvtár integrálása

Most jön a varázslat. A Finsweet script felelős az összes attribútum felismeréséért és a szűrés logikájáért.

Szerezd be a scriptet: Látogass el a Finsweet CMS Filter oldalára (webflow.com/website/finsweet-cms-filter) és másold ki a legfrissebb script kódot. Általában valami ilyesmi:
```
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
```
Illessze be a Webflow projektbe:
- Menj a Webflow Designerben a Project Settings > Custom Code menüpontra.
- A „Head Code” vagy „Before </body> tag” részbe (ajánlottan utóbbi) illeszd be a Finsweet scriptet.
- Mentsd el a változtatásokat és publikáld az oldaladat.
A filter inicializálása: Ahhoz, hogy a Finsweet script elkezdjen működni, szüksége van egy inicializáló scriptre is. Ezt is a „Before </body> tag” részbe illeszd be, a Finsweet CMS Filter scriptje UTÁN:
```
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (listInstances) => {
      console.log('cmsfilter init success');

      // The callback runs when the CMS filter is initialized.
      // You can add custom logic here if needed.
    },
  ]);
</script>
```
Ez a script biztosítja, hogy a Finsweet könyvtár megfelelően elinduljon, amint az oldal betöltődik.

5. lépés: Finomhangolás és kiegészítések

Miután az alap szűrőrendszer működik, íme néhány tipp a továbbfejlesztéshez:

Aktív állapotok stílusozása: A Finsweet CMS Filter automatikusan hozzáad egy .w--current osztályt az aktív szűrőgombokhoz. Ezt felhasználhatod a Webflow Designerben a gomb „Current” állapotának stílusozására, így a felhasználók azonnal látják, mely szűrők vannak éppen kiválasztva.
URL paraméterek: A Finsweet támogatja az URL paramétereket (pl. oldalad.com/termekek?kategoria=elektronika). Ezt a data-fs-cmsfilter-element="url" attribútummal aktiválhatod a szűrő wrapper elemen, vagy a lista wrapper elemen. Ez rendkívül hasznos a SEO és a megoszthatóság szempontjából.
Szűrők visszaállítása: Ha van egy „Összes törlése” gombod, adj hozzá ehhez az elemhez a data-fs-cmsfilter-element="clear" attribútumot.
Szűrők és Lapozás (Pagination): Ha nagyszámú elemed van, és lapozást is használsz (pl. a Finsweet CMS Load könyvtárral), győződj meg róla, hogy a szűrők és a lapozás együttműködnek. A Finsweet megoldásai általában zökkenőmentesen integrálódnak egymással.
Keresés gomb: Ha nem szeretnéd, hogy a keresés gépelés közben azonnal elinduljon, hozz létre egy külön „Keresés” gombot, és add hozzá a data-fs-cmsfilter-element="apply-filters" attribútumot. Ekkor a szűrők csak a gomb megnyomására fognak aktiválódni.

Bevált gyakorlatok és hibaelhárítás

Ne feledd a slugokat! A leggyakoribb hiba, hogy a data-fs-cmsfilter-field attribútumba rossz CMS mező slugot írunk be. Mindig ellenőrizd!
Publikálás után tesztelj: A legtöbb egyéni kód csak publikálás után fut le élesben. Alaposan teszteld az összes szűrő kombinációt.
Konzol ellenőrzése: Ha valami nem működik, nyisd meg a böngésző konzolját (F12). Ha a Finsweet script hibát jelez, az segíthet a probléma azonosításában.
Mobil reszponzivitás: Gondold át, hogyan jelenjenek meg a szűrők mobil eszközökön. Esetleg egy lenyitható panel, vagy egy modális ablak lehet a megoldás.
Teljesítmény: Nagyon sok elem esetén (több száz) a kliens oldali szűrés lassulhat. Fontold meg a szerver oldali szűrés lehetőségét, bár ez már jóval komplexebb és általában egyedi kódot igényel. Kis és közepes oldalaknál a Finsweet megoldás teljesen megfelelő.
Hozzáférhetőség (Accessibility): Ügyelj arra, hogy a szűrőid hozzáférhetőek legyenek. Használj megfelelő label elemeket a beviteli mezőkhöz, és gondoskodj a billentyűzettel való navigációról.

Összefoglalás

A dinamikus szűrők bevezetése a Webflow CMS kollekcióidba forradalmasíthatja a felhasználói élményt és jelentősen javíthatja az oldalad funkcionalitását. A Finsweet CMS Filter könyvtárral ez a feladat sokkal egyszerűbbé válik, mint gondolnád, minimális JavaScript tudással is elvégezhető, elsősorban egyéni attribútumok használatával. Ne habozz, kezdd el építeni a saját szűrőidet még ma, és nézd meg, hogyan kel életre az oldalad!

Reméljük, hogy ez az útmutató segített megérteni a dinamikus szűrők erejét és a Webflow-ban történő implementálásuk lépéseit. Sok sikert a projektedhez!