เริ่มใช้ Finsweet Attributes โดยเลือกเวอร์ชัน (v2 แนะนำ) ใส่สคริปต์ใน <head> แล้วกำหนดแอตทริบิวต์ให้องค์ประกอบ Webflow เช่น list, filters, trigger. สร้าง CMS Filter/Load/Sort ร่วมกันได้ เลี่ยง render-all จำนวนมาก ใช้ pagination เพื่อผ่าน Core Web Vitals และทดสอบบน staging ก่อนเผยแพร่.
How-to: ใช้ Finsweet Attributes กับ Webflow (Filter/Load/Sort/Nest) แบบเร็วและถูกต้อง
สำหรับ Designer • Marketer • Webflow Dev Attributes ของ Finsweet ช่วยเพิ่มฟีเจอร์ขั้นสูงให้ CMS โดย “ติดฉลาก” (HTML attributes) ลงบนองค์ประกอบในหน้า ไม่ต้องเขียน JS เองเกือบทั้งหมด
ภาพรวมโซลูชันยอดนิยม
| โซลูชัน | ใช้ทำอะไร | แอตทริบิวต์หลัก (ตัวอย่าง) | อ้างอิง |
|---|
| CMS Filter |
กรองคอนเทนต์จาก CMS ด้วยฟอร์ม |
fs-cmsfilter-element="list|filters|clear|empty", fs-cmsfilter-field="IDENTIFIER" |
Docs |
| CMS Load |
Load more / Infinite / Pagination |
fs-cmsload-element="list|loader|items-count|visible-count|empty", fs-cmsload-mode="pagination|load-under|render-all|infinite" |
Docs |
| CMS Sort |
สลับเรียงลำดับรายการ |
fs-cmssort-element="list|trigger|dropdown-label|scroll-anchor", fs-cmssort-field="IDENTIFIER[-asc|-desc]", fs-cmssort-type="date|number" |
Docs |
| CMS Nest |
ทำ Nested Collection หลายชั้น |
โครงสร้างตาม docs (ปรับจาก Webflow limit) |
Docs |
| List Tabs (v2) |
แท็บแบบไดนามิกจาก CMS |
fs-list-element="list|tabs|tab-link" |
Docs (v2) |
เลือก v1 หรือ v2?
| หัวข้อ | Attributes v1 (Legacy) | Attributes v2 (แนะนำ) | อ้างอิง |
|---|
| สคริปต์ |
หนึ่งไฟล์ต่อโซลูชัน (เช่น cmsfilter.js) |
สคริปต์รวมหนึ่งไฟล์สำหรับหลายโซลูชัน |
Overview |
| คุณสมบัติใหม่/ประสิทธิภาพ |
คงรองรับ แต่หยุดฟีเจอร์ใหม่ |
ได้ฟีเจอร์/ปรับปรุงล่าสุดต่อเนื่อง |
v2 Script |
| การผสม v1 กับ v2 |
ห้ามใช้ร่วมกันในหน้าเดียว — เลือกอย่างใดอย่างหนึ่ง |
คำเตือนใน Docs |
Quickstart (แนะนำใช้ v2)
<!-- ใส่ใน <head> ของหน้า (v2) -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list></script>
Quickstart (v1 แบบคลาสสิก)
<!-- ใส่ใน <head> ของหน้า — เลือกเฉพาะที่ใช้ -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"></script>
ตัวอย่าง: แผง “กรอง + โหลดเพิ่ม + เรียง” บนหน้าบล็อก (v1)
<!-- ฟอร์มกรอง -->
<form fs-cmsfilter-element="filters">
<label><input type="checkbox">Design</label>
<label><input type="checkbox">SEO</label>
<!-- เชื่อมกับฟิลด์ในรายการ CMS ด้วย IDENTIFIER เดียวกัน -->
<!-- ในรายการ CMS ให้ใส่ fs-cmsfilter-field="Topics" กับ text ของหัวข้อ -->
<input type="text" placeholder="ค้นหา..." fs-cmsfilter-field="*" />
<button type="submit">กรอง</button>
<a href="#" fs-cmsfilter-element="clear">ล้างตัวกรอง</a>
</form>
<!-- ปุ่มเรียง -->
<div>
<button fs-cmssort-element="trigger" fs-cmssort-field="Title-asc">ชื่อ (A→Z)</button>
<button fs-cmssort-element="trigger" fs-cmssort-field="Title-desc">ชื่อ (Z→A)</button>
</div>
<!-- รายการบทความ -->
<div class="w-dyn-list" fs-cmsfilter-element="list" fs-cmssort-element="list"
fs-cmsload-element="list" fs-cmsload-mode="pagination">
<div class="w-dyn-items">
<div class="w-dyn-item">
<h3 fs-cmssort-field="Title" fs-cmsfilter-field="Topics">หัวข้อบทความ</h3>
<p>สรุป...</p>
</div>
</div>
<!-- ปุ่ม Next/Prev ของ Webflow Pagination จะถูกใช้เป็นตัวควบคุม -->
</div>
<!-- สถานะว่าง/ตัวนับ -->
<div fs-cmsfilter-element="empty">ไม่พบผลลัพธ์</div>
<div fs-cmsload-element="visible-count"></div>
Best Practices (ความเร็ว/การเข้าถึง/SEO)
- โหลดให้เบา: ใช้
pagination กับ CMS Load แทน render-all เมื่อมีรายการมาก (ช่วย LCP/INP)
- Accessible UI: ใช้ฟอร์มหนึ่งชุดสำหรับตัวกรองทั้งหมด (ข้อกำหนดของ CMS Filter)
- หลีกเลี่ยงการผสม: อย่าใช้ v1 และ v2 ในหน้าเดียวกัน
- Sort + Combine: ถ้ารวมหลายคอลเลกชัน ให้สคริปต์ Sort โหลดหลัง Combine ตาม FAQ
- เกิน 100 รายการ: ใช้ CMS Load โหมด pagination เพื่อให้ Filter เห็นทุกหน้า (แนะนำโดยทีมซัพพอร์ต)
- Staging ก่อน Production: ทดสอบ Core Web Vitals/WCAG และ noindex บนสเตจจิง
ตารางแอตทริบิวต์ที่ใช้บ่อย (อ้างอิงเร็ว)
| งาน | ใส่ที่องค์ประกอบ | แอตทริบิวต์ | ค่า |
|---|
| กำหนดลิสต์เป้าหมาย (Filter) | Collection List / Wrapper | fs-cmsfilter-element | list |
| กำหนดฟอร์มตัวกรอง | Form / Form Block | fs-cmsfilter-element | filters |
| ผูกฟิลด์ | Checkbox/Select/Input + ข้อความใน CMS Item | fs-cmsfilter-field | IDENTIFIER หรือ * |
| โหลดเพิ่ม | Collection List | fs-cmsload-element | list |
| กำหนดโหมดโหลด | Collection List | fs-cmsload-mode | pagination|load-under|infinite|render-all |
| เรียงลำดับ: รายการ | Collection List | fs-cmssort-element | list |
| เรียงลำดับ: ปุ่ม/ตัวกระตุ้น | Button/Link/Dropdown | fs-cmssort-element, fs-cmssort-field | trigger, IDENTIFIER[-asc|-desc] |
อ้างอิงภายนอก (Docs/FAQ/ตัวอย่าง)
บริการที่เกี่ยวข้อง (Internal Links)
อ่านต่อ (บทความที่เกี่ยวข้อง)
FAQ
ควรใช้ v1 หรือ v2?
ถ้าเริ่มใหม่ ให้ใช้ v2 (สคริปต์รวมและฟีเจอร์ใหม่) แต่ถ้าโปรเจ็กต์เดิมของคุณใช้ v1 อยู่ ก็ยังรองรับได้—อย่าผสม v1 และ v2 ในหน้าเดียวกัน
Filter ไม่เห็นรายการเกิน 100 ชิ้น ต้องทำอย่างไร?
เปิด CMS Load โหมด pagination ให้ Filter เข้าถึงทุกหน้า โดยทั่วไปเร็วและเสถียรกว่า render-all
Sort ใช้กับ Combine ได้ไหม?
ได้ ให้โหลดสคริปต์ Sort ภายหลัง Combine และทริกเกอร์เรียงเมื่อผสานลิสต์เสร็จ (ดูลิงก์ FAQ)
อัปเดตล่าสุด: 12 Aug 2025
เกี่ยวกับผู้เขียน
Vision X Brain Team — ทีม Website/SEO/CRO & Webflow เราตั้งค่า Finsweet Attributes ให้ใช้งานง่าย วัดผลได้ และผ่านเกณฑ์ความเร็ว/การเข้าถึง พร้อมเพลย์บุ๊ก QA บนสเตจจิงก่อนเผยแพร่
