Shop Catalog System
นวัตกรรมการนำเสนอรายการสินค้า (Product Discovery) ของเราถูกออกแบบให้เป็นแบบ Data-Driven โดยสมบูรณ์ ทุกการจัดหมวดหมู่ ราคา และสถานะสต็อก จะซิงก์ตรงจาก Supabase เพื่อความแม่นยำสูงสุด
Catalog Engine Components
7 Core High-Level Modules1. Supabase Data Integration
ระบบดึงข้อมูลสินค้าแบบ Dynamic (Real-time Catalog)
Query Logic
ใช้ supabase.from('products').select('*') โดยเรียงลำดับตามความใหม่ (created_at desc) เป็นค่าเริ่มต้น
Force Reordering
มีลอจิกพิเศษ (Explicit reorder) เพื่อสลับลำดับ CryptoClock Basic ให้ขึ้นก่อน Saving เพื่อลำดับความสำคัญทางการตลาด
JSON Parsing
จัดการข้อมูล JSONB ในฟิลด์ meta, pricing, config และ media เพื่อนำมาสกัดเป็นข้อมูล UI ที่พร้อมใช้งาน
2. Intelligent Category Mapping
ระบบแยกหมวดหมู่สินค้าอัตโนมัติ
Auto Extraction
ระบบจะสแกนหาสนค้าทั้งหมดใน DB และสกัดหมวดหมู่ (Unique Categories) ออกมาเพื่อสร้างหน้าเว็บโดยไม่ต้องระบุ Category ล่วงหน้า
Category Metadata
ตาราง CategoryMeta ใช้กำหนดชื่อหัวข้อ (Title) และคำโปรย (Description) ที่สวยงามสำหรับแต่ละหมวด เช่น BiTTerm Solutions
Priority Sorting
จัดลำดับหมวดหมู่ตามความสำคัญ: Clock > Kiosk > POS > Node > Others เพื่อให้สินค้า Hardware หลักอยู่ด้านบนเสมอ
3. Flexible Content Sections
โครงสร้างหน้าเว็บแบบปรับเปลี่ยนตามสินค้า
Section Autonomy
ใช้การ Map ข้อมูล Categories เพื่อสร้าง Section ใหม่โดยอัตโนมัติ หากไม่มีสินค้าในหมวดนั้น Section จะไม่ถูกแสดงผล
Scroll Navigation
ทุกลิงก์จาก Navbar (เช่น /shop#kiosk) จะเชื่อมตรงมายัง ID ของ Section ในหน้านี้ พร้อม Offset การเลื่อนที่แม่นยำ
Visual Separators
คั่นระหว่างหมวดหมู่ด้วยเส้น Gradient และลำดับ Collection (01, 02...) เพื่อสร้างบรรยากาศห้างสรรพสินค้าดิจิทัล
4. Advanced Pricing Engine
กลไกการคำนวณราคาและส่วนลด (Complex Variation)
Variant Priority
ระบบจะเช็คราคาสินค้าจาก Variants ก่อน หากมีหลายระดับจะเลือกราคาที่ต่ำที่สุดมาโชว์เป็น 'Starts at'
Compare Price
ดึงราคาเปรียบเทียบ (Compare Price) ที่สูงที่สุดในกลุ่มมาใช้เพื่อคำนวณยอดส่วนลดสสูงสุดของรุ่นนั้นๆ
Discount Calculation
สูตรคำนวณส่วนลด % อัตโนมัติ (Compare - Current) / Compare * 100 เพื่อแสดงป้าย Sale
5. Real-time Inventory Feedback
ระบบจัดการสถานะสต็อกในหน้า Catalog
Inventory Summation
สำหรับสินค้าที่มีหลายโมเดล ระบบจะรวบยอด Stock จากทก Variant เพื่อตรวจสอบสถานะรวม
Sold Out Overlay
หากสินค้าหมด (Stock <= 0) ระบบจะซ้อนทับด้วย Layer 'SOLD OUT' และลดความชัดของรูปภาพอัตโนมัติ
Visual Urgency
มี Ribbon ป้าย 'SALE' พร้อมแอนิเมชัน Shimmer (แสงวิ่ง) เพื่อดึงดูดสายตาสำหรับสินค้าที่ลดราคา
6. Premium Product Card UI
การออกแบบ Card สินค้าเพื่อประสิทธิภาพการตลาด
Glassmorphism Card
ใช้ความโปร่งใส (Alpha) และ Border ที่บางเบาเพื่อให้ดูทันสมัยและสะอาดตาแบบ Apple Style
Hover Interactions
เมื่อผู้ใช้เอาเมาส์วาง ภาพจะซูมเข้า (Scale 110%) และแสดงปุ่ม 'View Details' พร้อมเงาสีทองนวลตา (Global glow)
Delayed Entrance
แอนิเมชันการโผล่ขึ้นมาของสินค้า (Entrance Animation) แบบสไลด์ขึ้นทีละใบ (Staggered) เพื่อความสุนทรีย์
7. Media & Metadata Handling
ระบบจัดการรูปภาพและข้อมูลจำเพาะ
Lazy Loading
ใช้ Loading='lazy' สำหรับรูปภาพทั้งหมดเพื่อทำให้หน้า Shop โหลดได้รวดเร็วแม้จะมีสินค้าเป็นร้อยรายการ
Fallback Images
มีระบบ Error Handling หากรูปภาพใน DB ผิดพลาด จะโชว์ 'No Image' Placeholder ไม่ให้หน้าเว็บพัง
Tag System
ดึง Tag ตัวแรกจาก Array (เช่น Trending, New) มาโชว์เป็นป้ายทองขนาดเล็กเหนือรูปสินค้า
# Shop Architecture Workflow
Category Logic Flow
1. Fetch All Products
2. Extract Category Slugs
3. Match against Meta-titles
4. Group products for layout rendering
Pricing Guard
ระบบจะคำนวณราคาที่ต่ำที่สุดเสนอเป็นจุดเริ่มต้น เพื่อเพิ่มอัตรา Click-through rate (CTR) พร้อมทั้งตรวจสอบว่าหากสินค้ามีหลาย Variant ต้องคำนวณราคาเฉลี่ยหรือไม่