บอยเลอร์เพลตแบบสแตติกสำหรับพัฒนาสกินอีคอมเมิร์ซเกาหลี (HTMX + Vite + TypeScript)

สวัสดีครับ ผมเป็นนักพัฒนาที่ทำงานด้านแบ็กเอนด์ในสายอีคอมเมิร์ซครับ!

ในอีคอมเมิร์ซเกาหลี มักมีหลายกรณีที่ฟรอนต์เอนด์ถูกประกอบขึ้นเป็นสกินบนแพลตฟอร์มอย่าง cafe24, Godomall & Shopby และ Makeshop
แต่เนื่องจากส่วนใหญ่รองรับเพียงการเสิร์ฟแบบสแตติก การใช้เฟรมเวิร์ก SPA อย่าง React จึงอาจเป็นเรื่องยากสำหรับบริษัทขนาดเล็กและกลาง

หลายแห่งยังคงใช้เลกาซีสแตกที่อิงกับ jQuery หรือ Handlebars อยู่ และบ่อยครั้งก็ไม่มีการจัดโครงสร้างไฟล์เลย ทำให้มีโค้ดปะปนกันยุ่งเหยิงเป็นสิบ ๆ ไฟล์อยู่ในโฟลเดอร์เดียว การนำคอมโพเนนต์กลับมาใช้ซ้ำก็ทำได้ยากด้วย

ผมเลยลองทำบอยเลอร์เพลตอีคอมเมิร์ซที่จัดระเบียบได้เรียบร้อยโดยใช้เพียงไฟล์ HTML/JS/CSS ขึ้นมาครับ
โครงสร้างถูกออกแบบมาให้แค่เขียนและเชื่อมโค้ดส่วน API ก็สามารถนำไปใช้ได้เลย!

เทคสแตก

• HTMX 2.0 — การนำทางแบบ SPA ที่อิงกับ HTML fragment
• Vite 7 — เครื่องมือบิลด์ + เซิร์ฟเวอร์พัฒนาพร้อม HMR
• TypeScript — บันเดิลแยกอิสระตามคอมโพเนนต์
• Embla Carousel — แบนเนอร์พารัลแลกซ์, แครูเซลสินค้า
• Pure CSS — ระบบดีไซน์โทเคนที่อิงกับ CSS custom properties โดยไม่ใช้ Tailwind

หน้าที่ทำไว้แล้ว

• หน้าแรก (แครูเซลแบนเนอร์, หมวดหมู่, แครูเซลสินค้า, อันดับ, รีวิว, ประกาศ)
• รายการสินค้า (แถบด้านข้างหมวดหมู่, ฟิลเตอร์, เลย์เอาต์แบบกริด)
• รายละเอียดสินค้า (แกลเลอรีรูปภาพ, option cascade, ปรับจำนวน, แท็บ, รีวิวแบบ lightbox)
• บอร์ด (ประกาศ, FAQ, รายละเอียดโพสต์)
• อีเวนต์ (รายการอีเวนต์, ตัวนับเวลาถอยหลัง, รายละเอียด)
• My Page (ระดับสมาชิก, สถิติคำสั่งซื้อ, คูปอง/แต้มสะสม)
• ประวัติการสั่งซื้อ (ฟิลเตอร์ตามวันที่, รายการการ์ดคำสั่งซื้อ)

เดโม & ซอร์ส

• เดโม: https://hebububu.github.io/static-htmx-ecommerce/
• GitHub: https://github.com/Hebububu/static-htmx-ecommerce

สามารถโคลนไปใช้ได้อย่างอิสระโดยไม่มีไลเซนส์ครับ!
ยินดีรับฟีดแบ็กหรือไอเดียสำหรับการปรับปรุงด้วยครับ!