🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

Finsweet Attributes: ขยายศักยภาพ Webflow อย่างไร้ขีดจำกัด

June 30, 2025

ยาวไป อยากเลือกอ่าน?

เริ่มต้นใช้งาน Finsweet Attributes ด้วยการเลือกเวอร์ชัน (v2 แนะนำ) เพิ่มสคริปต์ใน <head> และกำหนดแอตทริบิวต์บนองค์ประกอบ Webflow เช่น list, filters, trigger. สร้าง CMS Filter/Load/Sort ร่วมกันได้ เลี่ยงการ render-all จำนวนมาก ใช้ pagination เพื่อผ่าน Core Web Vitals และทดสอบบน staging ก่อนเผยแพร่.

วิธีใช้ Finsweet Attributes กับ Webflow (Filter/Load/Sort/Nest) อย่างรวดเร็วและมีประสิทธิภาพ

สำหรับ Designer • Marketer • Webflow Dev Finsweet Attributes ช่วยเพิ่มฟีเจอร์ขั้นสูงให้กับ 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 หลายชั้น	โครงสร้างตามเอกสาร (ปรับจาก 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	ห้ามใช้ร่วมกันในหน้าเดียว — เลือกอย่างใดอย่างหนึ่ง