Flow การแสดงผลหน้าสินค้าทั้งหมด (Shop / Archive)
ฉบับเจาะลึก (Native WooCommerce + Flatsome) - รูปแบบแนวนอน (ระบุเวลา)
รายละเอียดการทำงานและเวลา: แผนภาพนี้แสดงลำดับขั้นตอนการทำงานเชิงลึกพร้อมระบุ ระยะเวลาโดยประมาณ (Latency) ในแต่ละสเตปที่ส่งผลต่อความช้าเร็วของหน้าเว็บรวมสินค้า หากไม่มีการทำระบบ Caching
flowchart LR
%% Defining Styles
classDef user fill:#8b5cf6,stroke:#c4b5fd,stroke-width:2px,color:#fff;
classDef core fill:#3b82f6,stroke:#93c5fd,stroke-width:2px,color:#fff;
classDef db fill:#f59e0b,stroke:#fcd34d,stroke-width:2px,color:#fff;
classDef wc fill:#10b981,stroke:#6ee7b7,stroke-width:2px,color:#fff;
classDef theme fill:#ec4899,stroke:#fbcfe8,stroke-width:2px,color:#fff;
classDef timebox fill:#1e293b,stroke:#f87171,stroke-width:2px,color:#fca5a5,stroke-dasharray: 5 5;
%% Nodes and Subgraphs
subgraph Client ["🖥️ ฝั่งผู้ใช้งาน (Frontend)"]
direction TB
A(["👤 กดเข้าสู่ URL: /shop"])
L(["✨ แสดงผลหน้าเว็บ (HTML)
ให้ผู้ใช้เห็นบนเบราว์เซอร์"])
end
subgraph WP_Core ["⚙️ WordPress Core (ระบบแกนหลัก)"]
direction TB
B["วิเคราะห์ URL (Routing)
แยกแยะว่าเป็นหน้า Product Archive"]
C["สร้างคำสั่ง WP_Query
(กำหนด post_type=product)"]
H["Template Loader
เริ่มหาไฟล์ Template ที่ตรงกับหน้า"]
end
subgraph MySQL ["🗄️ MySQL Database (ฐานข้อมูล)"]
direction TB
D[("ตาราง wp_posts
(ดึงข้อมูลหลักของสินค้า)")]
E[("ตาราง wp_postmeta
(เช็กราคา, สถานะสต็อก)")]
F[("ตาราง wp_terms
(กรองหมวดหมู่ และป้ายกำกับ)")]
TimeDB[["⏱️ ค้นหาในฐานข้อมูล
(เคสเว็บจริง ข้อมูลเยอะ/คิวรีหนัก: 3000 - 6000+ ms)"]]
E --- TimeDB
end
subgraph WooCommerce ["🛒 WooCommerce (ปลั๊กอินร้านค้า)"]
direction TB
G["รวบรวมข้อมูลสินค้าที่ได้
และคำนวณแบ่งหน้า (Pagination)"]
I["บังคับใช้ Template หลัก
คือ archive-product.php"]
end
subgraph Flatsome ["🎨 Flatsome Theme (การแสดงผล UI)"]
direction TB
J["สร้างโครงสร้างรวม
(Header, Footer, แถบ Sidebar)"]
subgraph Loop ["🔁 The Loop (วนลูปวาดสินค้าทีละชิ้น)"]
direction LR
K1["📄 โหลดไฟล์
content-product.php"]
K2["🖼️ ดึงรูป Thumbnail"]
K3["🏷️ แปะป้าย
(Sale / หมด)"]
K4["💰 ใส่ราคา"]
K5["🛒 วาดปุ่ม
Add to Cart"]
K1 --> K2 --> K3 --> K4 --> K5
end
TimeTheme[["⏱️ ประกอบร่าง HTML
(เวลา: 100 - 300 ms)"]]
J --- TimeTheme
end
%% Extra Time nodes
TimeRender[["⏱️ เบราว์เซอร์โหลดส่วนประกอบ & Script จนเสร็จ
(Load Time รวม: 6000 - 7000+ ms)"]]
L --- TimeRender
%% Connections
A -->|ส่ง Request| B
B --> C
C -->|Query| D
D --> E
E --> F
F -->|Return Data| G
G --> H
H --> I
I -->|สิทธิตกเป็นของธีม| J
J --> Loop
Loop -->|สร้าง HTML เสร็จสิ้น| L
%% Assigning Classes
class A,L user;
class B,C,H core;
class D,E,F db;
class G,I wc;
class J,K1,K2,K3,K4,K5,Loop theme;
class TimeDB,TimeTheme,TimeRender timebox;