homaroma/goal.section.md

ระบบ CMS Pages และ Section Block ของ HomAroma

การทำงานของระบบ CMS Pages และ Section Block

ระบบนี้ออกแบบมาในรูปแบบของ Dynamic Page Builder หรือ Headless CMS ที่ให้ผู้ใช้งานสามารถประกอบหน้าเว็บ (Page) ได้เองโดยการเรียงต่อ Block (Section) ต่างๆ เข้าด้วยกัน โดยมีโครงสร้างการทำงานหลักๆ ดังนี้:

1. Database Structure:

   • Page: เก็บข้อมูลพื้นฐานของหน้าเว็บ เช่น slug, title, สถานะการเผยแพร่ เป็นต้น
   • PageSection: เก็บข้อมูลของแต่ละ Block ภายในหน้านั้นๆ โดยมีความสัมพันธ์แบบ 1-to-many กับ Page (1 หน้ามีได้หลาย Section)

2. การจัดเก็บข้อมูล (Data Storage):

   • แต่ละ PageSection จะมีฟิลด์ type เพื่อระบุว่า Block นี้คือ Component อะไร (เช่น HERO, TEXT, PRODUCTS)
   • ข้อมูลเนื้อหาและตั้งค่าของแต่ละ Block จะถูกเก็บไว้ในฟิลด์ payload ในรูปแบบ JSON ซึ่งทำให้มีความยืดหยุ่นสูง สามารถรองรับโครงสร้างข้อมูลที่แตกต่างกันของแต่ละ Block ได้โดยไม่ต้องแก้ Schema ฐานข้อมูล

3. โครงสร้างของ Payload:

   • localized string: รองรับหลายภาษา มักจะเป็น Object เช่น { "th": "...", "en": "..." }
   • plain string: ค่าข้อความธรรมดาที่ไม่ต้องแปล
   • optional: ข้อมูลที่สามารถเว้นว่างได้

---

รายการ Section Block ทั้งหมด (17 Blocks)

ปัจจุบันระบบรองรับ Block Section ทั้งหมด 17 ประเภท โดยแต่ละประเภทมีค่า (Payload) ดังต่อไปนี้:

1. HERO

• หน้าที่: แบนเนอร์หลักขนาดใหญ่สำหรับส่วนบนสุดของหน้า (เหมาะสำหรับหน้าแรกหรือแคมเปญ)
• ค่าใน Payload:
  • tagline (localized string)
  • title (localized string)
  • description (localized string)
  • imageUrl (plain string)
  • buttonText (localized string)
  • buttonLink (plain string)

2. BANNER

• หน้าที่: รูปภาพแบนเนอร์แนวนอนพร้อมปุ่มกด (Call to Action)
• ค่าใน Payload:
  • imageUrl (plain string)
  • linkUrl (plain string)
  • title (localized string) optional
  • description (localized string) optional
  • buttonText (localized string) optional

3. TEXT

• หน้าที่: Block สำหรับแสดงข้อความธรรมดา
• ค่าใน Payload:
  • title (localized string) optional
  • content (localized string)
  • textAlign (plain string) optional: left, center, right

4. ANNOUNCEMENT_BAR

• หน้าที่: แถบประกาศข้อความด้านบนสุดที่สามารถเลื่อน (Rotate) ได้
• ค่าใน Payload:
  • slides (array of localized strings)
  • backgroundColor (plain string) optional
  • textColor (plain string) optional
  • speed (number) optional

5. NEWSLETTER

• หน้าที่: ฟอร์มรับสมัครรับข่าวสาร (Newsletter)
• ค่าใน Payload:
  • title (localized string)
  • description (localized string)
  • buttonText (localized string)
  • placeholderText (plain string) optional
  • showPrivacyCheckbox (boolean)
  • privacyText (plain string) optional

6. EDITORIAL_TILE

• หน้าที่: แสดงเนื้อหาแบบช่องภาพคู่กับข้อความ (Side-by-side)
• ค่าใน Payload:
  • title (localized string)
  • description (localized string)
  • imageUrl (plain string)
  • imagePosition (plain string): left หรือ right
  • buttonText (plain string) optional
  • buttonLink (plain string) optional
  • backgroundColor (plain string) optional
  • textColor (plain string) optional

7. EDITORIAL_CAROUSEL

• หน้าที่: สไลด์แสดงเนื้อหาบทความแบบเรื่องราว (Storytelling)
• ค่าใน Payload:
  • title (localized string)
  • slides (array of objects): แต่ละสไลด์มี
    • category (localized string)
    • title (localized string)
    • description (localized string)
    • imageUrl (plain string)
    • buttonText (plain string) optional
    • buttonLink (plain string) optional

8. PRODUCTS

• หน้าที่: แสดงรายการสินค้าแบบ Grid หรือลิสต์
• ค่าใน Payload:
  • title (localized string)
  • subtitle (localized string) optional
  • type (plain string): featured, scent, หรือ custom
  • scentId (number) optional
  • productIds (array of numbers) optional
  • limit (number) optional
  • layout (plain string) optional: grid หรือ carousel
  • enableQuickShop (boolean) optional

9. CATEGORIES

• หน้าที่: แสดงหมวดหมู่สินค้า
• ค่าใน Payload:
  • title (localized string)
  • subtitle (localized string) optional
  • categoryIds (array of numbers) optional

10. HERO_ARTICLE

• หน้าที่: ส่วนหัวของบทความ (Article Header)
• ค่าใน Payload:
  • title (localized string)
  • subtitle (localized string) optional
  • author (localized string) optional
  • category (localized string) optional
  • publishDate (plain string) optional
  • date (plain string) optional
  • imageUrl (plain string)
  • backgroundImageUrl (plain string) optional
  • overlayColor (plain string) optional

11. RICH_TEXT

• หน้าที่: Block สำหรับเนื้อหาแบบ HTML ที่สามารถจัดรูปแบบได้
• ค่าใน Payload:
  • title (localized string) optional
  • content (localized string) required (รองรับ HTML)

12. SCENT_NOTES_BREAKDOWN

• หน้าที่: อธิบายเลเยอร์ของกลิ่นน้ำหอม (Top, Heart/Middle, Base Notes)
• ค่าใน Payload:
  • title (localized string) optional
  • description (localized string) optional
  • topNotes (array of strings or localized string objects)
  • heartNotes (array of strings or localized string objects) หมายเหตุ: ผูกรวมกับ middleNotes
  • middleNotes (array of strings or localized string objects)
  • baseNotes (array of strings or localized string objects)

13. QUOTE_CALLOUT

• หน้าที่: แสดงคำคมหรือข้อความเน้นพิเศษ
• ค่าใน Payload:
  • quote (localized string) required
  • author (localized string) optional
  • role (localized string) optional

14. PRODUCT_CAROUSEL

• หน้าที่: แสดงสินค้าที่แนะนำในรูปแบบ Carousel
• ค่าใน Payload:
  • title (localized string) optional
  • description (localized string) optional
  • collectionId (plain string) optional
  • limit (number) optional
  • showPrice (boolean) optional
  • showAddToCart (boolean) optional
  • products (optional explicit product list)

15. ACCORDION

• หน้าที่: แสดงข้อมูลแบบถาม-ตอบ หรือเนื้อหาที่พับเก็บได้ (FAQ)
• ค่าใน Payload:
  • title (localized string) optional
  • categories (required array): แต่ละหมวดหมู่มี
    • name (localized string)
    • icon (plain string) optional
    • questions (required array): แต่ละคำถามมี
      • q (localized string)
      • a (localized string)

16. CONTACT_INFO

• หน้าที่: แสดงข้อมูลการติดต่อ (ที่อยู่, อีเมล, Line ฯลฯ)
• ค่าใน Payload:
  • title (localized string) optional
  • address (localized string) required
  • email (plain string) required
  • line (plain string) required
  • hours (localized string) required

17. CONTACT_FORM

• หน้าที่: ส่วนหัวสำหรับแบบฟอร์มการติดต่อ
• ค่าใน Payload:
  • title (localized string) optional
  • subtitle (localized string) optional