Product Detail Page

ใช้ [id] จาก URL เพื่อดึงข้อมูลสินค้าเฉพาะตัว พร้อมทำ Join กับตาราง Shops เพื่อแสดงข้อมูลผู้ขาย

มีระบบ parseIfNeeded เพื่อจัดการข้อมูล JSONB ที่อาจถูกส่งกลับมาเป็น String ให้เป็น Object ที่พร้อมใช้งาน

หากไม่พบสินค้า (ID ผิดพลาด) ระบบจะทำ Redirect ไปหน้า 404 โดยอัตโนมัติ

รองรับการ Swipe เปลี่ยนรูปภาพบน Mobile และการคลิก Thumbnail เพื่อเปลี่ยนรูปหลักพร้อมแอนิเมชัน Fade

รูปภาพหลักใช้เทคนิค Object-contain พร้อมเอฟเฟกต์ Scale-on-hover เพื่อความคมชัดทุกรายละเอียดสินค้า

ระบบดึงรูปจาก Variants อัตโนมัติเมื่อมีการเลือก Options เพื่อความแม่นยำในการนำเสนอ

คำนวณราคาเริ่มต้น (Base Price) จาก Variant ที่ถูกที่สุดเป็นค่าเริ่มต้นเมื่อโหลดหน้า

แสดงยอดเงินที่ประหยัดไป (Save Amount) และเปอร์เซ็นต์ส่วนลดเทียบกับราคาตั้งต้น (Compare Price)

แสดงข้อมูลค่าจัดส่งคงที่ (Fixed Delivery Fee) กึ่งอัตโนมัติเพื่อประกอบการตัดสินใจ

แสดงตัวเลือกสีเป็นวงกลมสีจริง (Hex Code) พร้อม Tooltip รายชื่อสี

ปุ่มเลือกโมเดล (Standard, Pro, etc.) ที่ปรับเปลี่ยนราคาและสต็อกทันทีที่คลิก

NEW: ระบบเลือก Option หลายระดับ (เช่น ความจุ + สี) พร้อมการบวกราคาส่วนเพิ่มแบบทับซ้อน

ตรวจสอบสต็อกจริงก่อนกดยืนยัน หากสินค้าหมด ปุ่ม Add to Cart จะถูกปิดใช้งาน (Disabled)

ระบบนับจำนวนสินค้า (Qty) พร้อมการจำกัดขั้นต่ำและขั้นสูงสุดตามสต็อกที่มีอยู่จริง

เมื่อกด Add to Cart ข้อมูลจะถูกส่งเข้า nanostores เพื่อเปิด CartDrawer ให้ผู้ใช้ดูสรุปทันที

ตารางสรุปจุดเด่นสินค้าพร้อมไอคอนและคำอธิบายเจาะลึก 3 หมวดหมู่

Grid ตารางข้อมูลทางเทคนิค (Tech Specs) ที่ดึงค่า Label/Value จากฐานข้อมูลมาจัดเรียงอัตโนมัติ

ลิงก์ User Guide สำหรับดาวน์โหลดคู่มือการใช้งาน หรือดูวิดีโอสาธิตจากผู้ผลิต

การดึงคะแนนเฉลี่ยดาว (Stars) จากรีวิวทั้งหมดของสินค้านั้นๆ มาแสดงผลแบบ Real-time

แสดงความคิดเห็นจากผู้ซื้อจริงพร้อมวันที่และสถานะยืนยันการซื้อ (Verified Purchase)

ระบบคัดกรองรีวิวเพื่อให้ผู้ใช้เห็นความพึงพอใจโดยรวมก่อนการตัดสินใจซื้อ