เอกสารโมดูล · CHANNEL · STOREFRONT (WEB)

เว็บไซต์สำหรับลูกค้า
(Storefront / E-Commerce Website)

เอกสารข้อกำหนดเชิงธุรกิจ ครอบคลุมเว็บไซต์ครบทุก Section พร้อม Mockup จาก Figma ฉบับเต็ม

รหัสโมดูล

WEB (Storefront)

เวอร์ชัน / วันที่

v2.0 พฤษภาคม 2569

เจ้าของโครงการ

บริษัท ยงเจริญศูนย์เครื่องเขียน จำกัด

ผู้พัฒนาระบบ

บริษัท อะเดพทิโอ จำกัด

แหล่งดีไซน์

Figma: Yongcharoen (mM7WCqGCqFcPLXUY6Ea3c4)

อ้างอิงเอกสารแม่บท

ysc_business_rules.html v2.2

ฉบับนี้เป็นการเขียนใหม่ทั้งหมด (v2.0):

ฉบับ v1.0 ครอบคลุมเฉพาะ กระบวนการซื้อสินค้า (Buying Flow) เท่านั้น ขาด Section สำคัญหลายส่วน — ฉบับ v2.0 นี้รวมครบทุก Flowตามที่ออกแบบใน Figma จริง: Mobile experience, Login/Register (3 ทาง), My Account (Dashboard, Profile, Addresses, Orders, Pre-Orders, Quotations, Cart Templates), Loyalty & Rewards, Promotion campaigns, Brand pages, Help/Policy/About pages

วัตถุประสงค์ของเอกสาร

ระบุข้อกำหนดของเว็บไซต์สำหรับลูกค้า (Storefront)ของยงเจริญฯ ครอบคลุมทุกหน้าจอที่ออกแบบใน Figma แบ่งเป็น 8 Section (A-H) แต่ละ Section มี Flow Diagram จาก Figma เป็น Overview และ Use Cases ภายใน รวมถึงกฎเกณฑ์เชิงธุรกิจอ้างอิง ysc_business_rules.html v2.2

สารบัญ

ข้อมูลเอกสารและการอนุมัติ
วัตถุประสงค์เชิงธุรกิจ
ขอบเขตของงาน
ผู้มีส่วนได้ส่วนเสียและบทบาทผู้ใช้งาน
โครงสร้างเว็บไซต์ (8 Sections)
กระบวนการในอนาคต (To-Be)
ข้อกำหนดเชิงหน้าที่ — กรณีการใช้งาน (Use Cases) ตาม Section
1. Section A: หน้าแรก ค้นหา และหน้าตามแบรนด์/โปรโมชั่น (4 UCs)
2. Section B: รายละเอียดสินค้าและตะกร้า (3 UCs)
3. Section C: ขั้นตอนชำระเงิน (5 UCs)
4. Section D: เข้าสู่ระบบและสมัครสมาชิก (5 UCs)
5. Section E: บัญชีของฉัน (My Account) (6 UCs)
6. Section F: คะแนนสะสมและของรางวัล (4 UCs)
7. Section G: หน้าข้อมูลทั่วไป (Footer Pages) (4 UCs)
8. Section H: เวอร์ชัน Mobile (1 UC)
การออกแบบประสบการณ์ผู้ใช้ (Screen Inventory)
กฎเกณฑ์เชิงธุรกิจ — อ้างอิงเอกสารแม่บท
การเชื่อมต่อระบบภายนอก (Integration)
ข้อกำหนดเชิงคุณภาพ (NFR)
ความปลอดภัยและความเป็นส่วนตัว
SEO และ Analytics
สมมติฐานและข้อจำกัด
เกณฑ์การยอมรับผลงาน
ประเด็นเปิดและความเสี่ยง

สรุปกรณีการใช้งาน (Use Case Catalog)

ตารางสรุปทั้ง 32 รายการ ของเว็บไซต์ครบทุก Section รายละเอียดเต็มอยู่ในหัวข้อที่ 7 พร้อม Flow Diagram + Mockup จาก Figma

#	รหัส	ชื่อกรณีการใช้งาน	Section	กฎที่เกี่ยวข้อง	สถานะ Figma
1	UC-WEB-A01	เข้าหน้าแรกเว็บไซต์	A. Browse	—	มี Mockup
2	UC-WEB-A02	ค้นหาสินค้าและดูผลค้นหา	A. Browse	PRD-03	มี Mockup
3	UC-WEB-A03	ดูหน้าสินค้าตามแบรนด์ (Brand Page)	A. Browse	PRD-11	มี Mockup
4	UC-WEB-A04	ดูหน้าแคมเปญโปรโมชั่น (Promotion Page)	A. Browse	PR-01 PR-07	มี Mockup
5	UC-WEB-B01	ดูรายละเอียดสินค้า (Product Detail Page)	B. Product	PRD-06 PRD-08	มี Mockup
6	UC-WEB-B02	เพิ่มสินค้าและจัดการตะกร้า	B. Product	AUTH-01	มี Mockup
7	UC-WEB-B03	ใช้เทมเพลตตะกร้า (Cart Templates: Marketing + ส่วนตัว)	B. Product	—	มี Mockup
8	UC-WEB-C01	Checkout Step 1: ตรวจสอบตะกร้า	C. Checkout	—	มี Mockup
9	UC-WEB-C02	Checkout Step 2: ที่อยู่และวิธีจัดส่ง	C. Checkout	INV-04 SHP-02	มี Mockup
10	UC-WEB-C03	Checkout Step 3: วิธีการชำระเงิน	C. Checkout	P-01 BNK-03	มี Mockup
11	UC-WEB-C04	Checkout Step 4: ตรวจสอบและยืนยัน	C. Checkout	RTN-01	มี Mockup
12	UC-WEB-C05	หน้าสั่งซื้อสำเร็จ (Order Confirmation)	C. Checkout	CC-04 NTF-01	มี Mockup
13	UC-WEB-D01	เข้าสู่ระบบด้วยอีเมล / รหัสผ่าน	D. Auth	NTF-04	มี Mockup
14	UC-WEB-D02	เข้าสู่ระบบด้วย OTP (ไม่ใช้รหัสผ่าน)	D. Auth	NTF-03	มี Mockup
15	UC-WEB-D03	สมัครสมาชิกบุคคลธรรมดา	D. Auth	AUTH-01 AUTH-02	มี Mockup
16	UC-WEB-D04	สมัครสมาชิกนิติบุคคล (รับใบกำกับในนามนิติบุคคล)	D. Auth	C-01 INV-04	มี Mockup
17	UC-WEB-D05	ลืมรหัสผ่าน / รีเซ็ตรหัสผ่าน	D. Auth	NTF-04	มี Mockup
18	UC-WEB-E01	หน้าหลักบัญชีของฉัน (Account Dashboard)	E. My Account	หมวด 10	มี Mockup
19	UC-WEB-E02	จัดการข้อมูลบัญชีผู้ใช้งาน	E. My Account	NTF-03	มี Mockup
20	UC-WEB-E03	จัดการที่อยู่ (จัดส่ง + ออกเอกสาร)	E. My Account	INV-04	มี Mockup
21	UC-WEB-E04	ดูประวัติคำสั่งซื้อและ Pre-Order	E. My Account	SO-01 RO-01	มี Mockup
22	UC-WEB-E05	ดูใบเสนอราคา (Quotations)	E. My Account	Q-01 Q-04	มี Mockup
23	UC-WEB-E06	จัดการเทมเพลตตะกร้า (My Cart Templates)	E. My Account	—	มี Mockup
24	UC-WEB-F01	ดูคะแนนสะสมและกิจกรรม	F. Loyalty	หมวด 10	มี Mockup
25	UC-WEB-F02	แลกของรางวัลจาก Rewards Catalog	F. Loyalty	หมวด 10	มี Mockup
26	UC-WEB-F03	คูปองส่วนลด ของขวัญวันเกิด สิทธิ์พิเศษ	F. Loyalty	PR-05	มี Mockup
27	UC-WEB-F04	ดูประวัติคะแนน (Points History)	F. Loyalty	NTF-05	มี Mockup
28	UC-WEB-G01	หน้าช่วยเหลือ FAQ และติดต่อ	G. Info	—	มี Mockup
29	UC-WEB-G02	หน้านโยบาย (Privacy, Return, Terms)	G. Info	—	มี Mockup
30	UC-WEB-G03	หน้าเกี่ยวกับเรา (About Us / Story)	G. Info	—	มี Mockup
31	UC-WEB-G04	หน้าผลิตภัณฑ์โบนัส / Special Offers	G. Info	—	มี Mockup
32	UC-WEB-H01	การใช้งานบน Mobile (Responsive)	H. Mobile	—	มี Mockup

1. ข้อมูลเอกสารและการอนุมัติ

1.1 ผู้อนุมัติเอกสาร

บทบาท	ชื่อ-นามสกุล	วันที่อนุมัติ	ลายเซ็น
เจ้าของผลิตภัณฑ์ (YSC)	____________________	____________	____________
หัวหน้าฝ่ายการตลาด (YSC)	____________________	____________	____________
หัวหน้าฝ่ายดิจิทัล (YSC)	____________________	____________	____________
UX/UI Designer (Adeptio)	____________________	____________	____________
ผู้จัดการโครงการ (Adeptio)	____________________	____________	____________

2. วัตถุประสงค์เชิงธุรกิจ

เว็บไซต์สำหรับลูกค้าเป็นช่องทางการขายออนไลน์หลักของยงเจริญฯ รองรับทั้งลูกค้าบุคคลธรรมดาและนิติบุคคล ครอบคลุมตั้งแต่การสำรวจสินค้า การสั่งซื้อ การชำระเงิน การจัดการบัญชีและที่อยู่ การติดตามคำสั่งซื้อ การสะสมและแลกของรางวัล จนถึงการขอใบเสนอราคา

รหัส	เป้าหมายธุรกิจ	ตัวชี้วัด (KPI)
BG-WEB-1	เพิ่มยอดขายผ่านช่องทางออนไลน์	สัดส่วนยอดขายจากเว็บ ≥ 40% ในปีที่ 1
BG-WEB-2	ลูกค้าสั่งซื้อและชำระเงินครบในเว็บ ไม่ต้องโทร	Cart Abandonment Rate ≤ 60%
BG-WEB-3	รองรับทั้งลูกค้าบุคคลธรรมดาและนิติบุคคล (เครดิต/ใบกำกับ)	ครอบคลุมการสมัคร 2 ประเภท + วงเงินเครดิต + ใบกำกับ Y/N/M/A
BG-WEB-4	Mobile-friendly เปิดบนมือถือได้ดีเทียบเท่า Desktop	Mobile Friendly ≥ 90/100, ยอดจาก Mobile ≥ 50%
BG-WEB-5	ระบบสะสมคะแนนและของรางวัลกระตุ้นการกลับมาซื้อ	อัตรา Re-purchase 90 วัน ≥ 35%
BG-WEB-6	เทมเพลตตะกร้าช่วยลูกค้าธุรกิจสั่งซื้อซ้ำได้รวดเร็ว	การใช้ Cart Template ≥ 20% ของคำสั่งซื้อ B2B

3. ขอบเขตของงาน

3.1 อยู่ในขอบเขต (In Scope)

Browse — หน้าแรก, ค้นหา, หน้าแบรนด์, หน้าโปรโมชั่น
Product & Cart — รายละเอียดสินค้า, ตะกร้า, เทมเพลตตะกร้า (Marketing + ส่วนตัว)
Checkout 4 ขั้นตอน + หน้าสั่งซื้อสำเร็จ
Authentication — Login (Email+Password / OTP), Register บุคคลธรรมดา + นิติบุคคล, ลืมรหัสผ่าน
My Account — Dashboard, Profile, Addresses (2 ประเภท), Orders + Pre-Orders, Quotations, Cart Templates
Loyalty — คะแนนสะสม, ของรางวัล, คูปอง, สิทธิ์พิเศษวันเกิด, ประวัติคะแนน
Info Pages — ช่วยเหลือ, FAQ, ติดต่อ, นโยบาย, เกี่ยวกับเรา, ผลิตภัณฑ์โบนัส
Mobile Web (Responsive) — ทุกหน้าจอใน 7 Section ข้างต้น
SEO basics: Sitemap, Meta tags, Schema.org

3.2 ไม่อยู่ในขอบเขต (Out of Scope)

Mobile Native App — ใช้ Responsive Web ไปก่อน
Social Login (Facebook/Google) — เฟสถัดไป
Live Chat บนเว็บ — ใช้ LINE OA แทน
ระบบรีวิวสินค้า/ดาวคะแนน — เฟสถัดไป

4. ผู้มีส่วนได้ส่วนเสียและบทบาทผู้ใช้งาน

บทบาท	หน้าที่	สิทธิ์
ลูกค้าทั่วไป (Guest)	ดูสินค้า อ่านโปรโมชั่น สั่งซื้อไม่ได้ ตาม AUTH-01	ดูอย่างเดียว
ลูกค้าบุคคลธรรมดา (สมาชิก)	สั่งซื้อ ชำระเงิน ดูประวัติ จัดการที่อยู่ คะแนน	เฉพาะข้อมูลตนเอง
ลูกค้านิติบุคคล	สั่งซื้อด้วยวงเงินเครดิต ขอใบกำกับ Y/N/M/A ขอใบเสนอราคา ใช้ Cart Templates	เฉพาะข้อมูลบริษัทตนเอง

5. โครงสร้างเว็บไซต์ (8 Sections)

เว็บไซต์แบ่งโครงสร้างเป็น 8 Section หลัก โดยแต่ละ Section อ้างอิง Flow Diagram จาก Figma ดังภาพรวมต่อไปนี้:

[Sitemap — ดู Figma node 437:1248]

Sitemap ภาพรวมเว็บไซต์ทั้งหมด (Figma node 437:1248)

Section	เนื้อหา	หน้าจออ้างอิง (SCR)
A. Browse	หน้าแรก ค้นหา หน้ารวมสินค้า แบรนด์ โปรโมชั่น	A01 A02 A03 A04 A05
B. Product & Cart	รายละเอียดสินค้า ตะกร้า ขอใบเสนอราคา	B01 B02 B03
C. Checkout	4 ขั้นตอน + สั่งซื้อสำเร็จ	C01 C02 C03 C04 C05
D. Authentication	Login อีเมล / เบอร์โทร, Register บุคคลธรรมดา + นิติบุคคล, ลืมรหัสผ่าน	D01 D02 D03 D04 D05
E. My Account	Dashboard, Profile, ที่อยู่, ประวัติออเดอร์, ใบเสนอราคา, Cart Templates	E01 E02 E03 E04 E05 E06
F. Loyalty	คะแนน รางวัล แลกคูปอง สิทธิ์พิเศษ ประวัติคะแนน	F01 F02 F03 F04 F05
G. Info Pages	ช่วยเหลือ ขายสินค้ากับเรา สิทธิประโยชน์ นโยบาย เกี่ยวกับบริษัท	G01 G02 G03 G04 G05 G06
H. Mobile	เวอร์ชัน Mobile ของทุกหน้า	H01
I. Content	ข่าวสารและกิจกรรม	I01 I02

6. กระบวนการในอนาคต (To-Be)

เว็บไซต์ E-Commerce ครบวงจร ลูกค้าสั่งซื้อและจัดการบัญชีตนเองได้
รองรับ 2 ประเภทลูกค้า ในเว็บเดียว — บุคคลธรรมดา + นิติบุคคล (วงเงิน, ใบกำกับ, Cart Templates)
ระบบ Loyalty ครบ สะสมคะแนน, แลกของรางวัล, คูปอง, สิทธิ์พิเศษวันเกิด
Cart Templates สำหรับลูกค้าธุรกิจ — ทำซ้ำคำสั่งซื้อประจำได้รวดเร็ว
Login 2 ทาง — รหัสผ่าน หรือ OTP
Responsive ทุกหน้า Desktop / Tablet / Mobile

7. ข้อกำหนดเชิงหน้าที่ — กรณีการใช้งาน (Use Cases)

หัวข้อนี้แบ่งเป็น 8 Section (A-H) แต่ละ Section มี Flow Diagram จาก Figma แสดงภาพรวม + Use Cases รายละเอียด

หน้าแรก ค้นหา และหน้าสินค้าตามแบรนด์/โปรโมชั่น

4 Use Cases — เกี่ยวกับการค้นพบและสำรวจสินค้า

[Flow Diagram: โปรโมชั่น — ดู Figma node 5383:32810]

Flow Diagram: หน้าโปรโมชั่นและแคมเปญ (Figma node 5383:32810)

UC-WEB-A01เข้าหน้าแรกเว็บไซต์

SCR-WEB-A01 — หน้าแรก (Figma Design)node 8559:52297

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-A01.png

✓ อัพโหลดแล้ว

Homepage Layout Zones — FR-1.1.x Reference

FR Code	Zone	รายละเอียด Component	Data Source
FR-1.1.1	Top bar Ticker	ข้อความประกาศเคลื่อนไหว: วันที่ Flash Sale / Warehouse Sale · Countdown นับถอยหลัง	CMS
FR-1.1.2	Header	Logo YONGCHAROEN · Mega Menu (สินค้าทั้งหมด, โปรโมชั่น, สมาชิกพิเศษ, อื่น ๆ) · Search Bar · Cart + Badge · แต้มสะสม (Login)	CRM / PRD
FR-1.1.3	Promo Strip (3 Banners)	แบนเนอร์นับถอยหลัง 3 ชิ้น — ลดคลัง / แพ็กที่ 2 แห่ 8,800 / ซื้อ 2 ลด 70%	CMS + Promo Engine
FR-1.1.4	Hero Banner	Full-width: "WAREHOUSE HOT SALE UP TO 80%" + วันที่ Flash Sale	CMS
FR-1.1.5	Flash Sale Event Bar	แถบวันเวลา Flash Sale: "16 - 30 ก.พ. 2569 \| 09:30 - 18:00 น." + Countdown Timer ซิงค์ Server	CMS
FR-1.1.6	Category Sidebar	Tree หมวดหมู่ฝั่งซ้าย พร้อมไอคอน — คลิกไปหน้า Category Listing A03	PRD
FR-1.1.7	Promo Carousel (4 Banners)	Slider อัตโนมัติ: 40% · 50% · -20~60% · 30% — คลิกไปหน้าโปรโมชั่น A05	CMS + Promo Engine
FR-1.1.8	Shelf: สินค้าขายดีประจำสัปดาห์	Horizontal scroll · Product Card (รูป + ชื่อ + ราคา + ปุ่ม +/- + Add to Cart) · เรียงตาม OMS ยอดขาย	PRD + OMS
FR-1.1.9	Shelf: สินค้าใหม่ YONG CHAROEN	Product Card เหมือน FR-1.1.8 — เรียงตาม Date Added DESC	PRD
FR-1.1.10	Mid Banners (2 ชิ้น)	Full-width banner คู่: SALE 50% + SUMMER SALE 60%	CMS
FR-1.1.11	Featured Product Spotlight	สินค้าเด่น 1 รายการ (Hero Card) + Grid สินค้าประกอบ (ตัวอย่าง: Duracell)	PRD + Promo Engine
FR-1.1.12	Category Blocks + Sports Banner	4 กลุ่ม: เฟอร์นิเจอร์ · เครื่องดนตรี · เครื่องเขียน · สันทนาการ — Carousel สินค้า + Banner ลด 40%	PRD + CMS
FR-1.1.13	Brand Shelf (Advertiser)	Logo แบรนด์ + Product Cards ของแบรนด์ — ตัวอย่าง: Horse · จัดการโดย CMS	PRD + CMS
FR-1.1.14	ข่าวสารและกิจกรรม	3 บทความล่าสุด: รูป + วันที่ + หัวข้อ → คลิกไป I01 / I02	CMS
FR-1.1.15	Footer (Info Columns)	4 คอลัมน์: ติดต่อบริษัท · บริการลูกค้า · สิทธิประโยชน์โปรโมชั่น · เกี่ยวกับสมาชิก	CMS
FR-1.1.16	Footer (Brand + Social)	Logo YONG CHAROEN · About text · Social icons (FB/IG/TikTok/LINE) · DBD Registered · Trust Badge	CMS

ขั้นตอนหลัก

ลูกค้าเข้า URL หลัก — ระบบแสดง Header (Logo, Mega Menu, Search, Cart, แต้มสะสม)
Top bar Ticker แสดงข้อความ Warehouse / Flash Sale + Countdown
Promo Strip 3 แบนเนอร์ + Hero Banner ปรากฏเหนือ fold
Category Sidebar ฝั่งซ้าย + Promo Carousel 4 แบนเนอร์ฝั่งขวา
Shelf สินค้าขายดีประจำสัปดาห์ (Horizontal scroll + Product Card + Add to Cart)
Shelf สินค้าใหม่ YONG CHAROEN
Mid Banners (2 ชิ้น) + Featured Product Spotlight
Category Blocks 4 กลุ่ม พร้อม Carousel สินค้าแต่ละกลุ่ม
Brand Shelf + ข่าวสารและกิจกรรม 3 บทความ
Footer ลิงก์นโยบาย ติดต่อ โซเชียล DBD

เกณฑ์การยอมรับผลงาน

AC-A01-01: โหลด ≤ 3 วินาที (LCP ผ่าน Google Web Vitals)

AC-A01-02: Promo Carousel เปลี่ยนสไลด์อัตโนมัติ 5 วินาที

AC-A01-03: Banner / Top bar / Promo Strip มาจาก CMS Backoffice — อัปเดตใน ≤ 5 นาที

AC-A01-04: Product Shelf แสดง Real-time Stock (ไม่มีสต็อก = ปุ่มเพิ่มตะกร้าถูก Disable)

AC-A01-05: Countdown Timer ซิงค์เวลาจาก Server — ไม่ใช้ Client local time

UC-WEB-A02ค้นหาสินค้าและดูผลค้นหา

SCR-WEB-A02 — ผลการค้นหา (Search Result + Auto-suggest)Figma node 1037:5301

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-A02.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ลูกค้าพิมพ์คำค้นใน Search Bar (Header)
ตั้งแต่ 2 ตัวอักษร ระบบแสดง Auto-suggest: หมวดหมู่ที่ตรง + สินค้าแนะนำ 5 รายการ
ลูกค้ากด Enter / คลิกผลที่ต้องการ ไปหน้าผลค้นหาเต็ม
หน้าผลค้นหามีตัวกรอง: แบรนด์, ราคา, หมวดหมู่, สต็อก

เกณฑ์การยอมรับผลงาน

AC-A02-01: Auto-suggest ตอบสนอง ≤ 1 วินาที

AC-A02-02: รองรับการค้นหาด้วย SKU / Barcode ตาม PRD-03

AC-A02-03: รองรับภาษาไทย + อังกฤษ และผสม

UC-WEB-A03ดูหน้าสินค้าตามแบรนด์ (Brand Page)

SCR-WEB-A04 — หน้าตามแบรนด์ — Brand Page (ตัวอย่าง: ESY)Figma node 8865:70318

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-A04.png

✓ อัพโหลดแล้ว

จุดประสงค์

หน้ารวมสินค้าตามแบรนด์ พร้อม Banner ของแบรนด์, แคมเปญพิเศษของแบรนด์, และส่วนแลกของรางวัล

ขั้นตอนหลัก

ลูกค้าคลิกแบรนด์จาก Homepage หรือ Menu / Search Filter
หน้า Brand Page แสดง: Brand Logo + คำอธิบาย ("อุปกรณ์เครื่องเขียนคู่ใจ ของคนมีไอเดีย"), Hero Banner, Promo Banner 2 รายการ (เช่น 50% off + 60% off)
ส่วน "Back to School Promotion" (Sub-campaign ของแบรนด์) — Product Grid 16 รายการ
Pagination + ตัวเลือกแสดงต่อหน้า (20 / 40 / 60)
ส่วนแลกของรางวัล / สินค้าแนะนำท้ายหน้า
ปุ่ม "แชร์โปรนี้" (Link, Facebook, LINE, อื่นๆ)

เกณฑ์การยอมรับผลงาน

AC-A03-01: Banner และ Promo Banner ของแบรนด์มาจาก CMS

AC-A03-02: Sub-campaign แสดงเมื่อมีโปรโมชั่น Active ของแบรนด์

AC-A03-03: ป้าย "ลด %", "Promotion", "ใหม่" ตาม PRD-11

AC-A03-04: ปุ่มแชร์ตรวจ Tracking ของแคมเปญ

UC-WEB-A04ดูหน้าแคมเปญโปรโมชั่น (Promotion Page)

SCR-WEB-A05 — หน้าโปรโมชั่น (Promotion Hub + Landing Page)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-A05.png

✓ อัพโหลดแล้ว

จุดประสงค์

หน้ารวมแคมเปญและโปรโมชั่นทั้งหมด รวมถึง Landing Page ของแคมเปญพิเศษ

ประเภทของ Promotion Page (จาก Figma Flow)

หน้าโปรโมชั่นรวม (Main) — Catalog ของแคมเปญทั้งหมด
หน้าแคมเปญเฉพาะกิจ — ลดราคา (Promo: Sale)
หน้าแคมเปญเฉพาะกิจ — ลูกค้าใหม่ (New Customer)
หน้าแคมเปญเฉพาะกิจ — เฉพาะหน้า (Featured Landing)

ขั้นตอนหลัก

ลูกค้าคลิก "โปรโมชั่น" จาก Menu / Banner / Email Campaign
ระบบแสดง Catalog แคมเปญที่ Active
ลูกค้าเลือกแคมเปญ ระบบเปิด Landing Page ของแคมเปญนั้น
Landing Page แสดงสินค้าในแคมเปญ + รายละเอียดเงื่อนไข + นับถอยหลังหมดอายุ
ลูกค้าสามารถเพิ่มสินค้าลงตะกร้าจากที่นี่

เกณฑ์การยอมรับผลงาน

AC-A04-01: Landing Page สร้างจาก CMS Backoffice

AC-A04-02: ส่วนลดคำนวณอัตโนมัติเมื่อเพิ่มสินค้าจากแคมเปญลงตะกร้า ตาม PR-01

AC-A04-03: นับถอยหลังหยุดทันทีเมื่อหมดเวลา

รายละเอียดสินค้าและตะกร้า

3 Use Cases — ดูสินค้า เพิ่มลงตะกร้า และใช้เทมเพลตตะกร้า

UC-WEB-B01ดูรายละเอียดสินค้า (PDP)

SCR-WEB-B01 — รายละเอียดสินค้า (PDP)Figma node 487:2653

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-B01.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ลูกค้าคลิกสินค้าจาก Listing / Search
หน้า PDP แสดง: รูปสินค้าสูงสุด 8 รูป + Zoom, ชื่อ, SKU, แบรนด์, ป้าย (New/Promotion)
ราคาตามระดับลูกค้า (P1-P5), สต็อกคงเหลือ, ปุ่มเลือกจำนวน + "เพิ่มลงตะกร้า"
รายละเอียดสินค้า + Tab ข้อกำหนด/การส่ง
สินค้าที่คล้ายกัน (Similar) ตาม PRD-09
กรณีหมดสต็อก แสดงสินค้าทดแทน (Substitute) ตาม PRD-08
กรณี Pre-Order แสดงวันคาดเข้าคลัง + "ชำระ 100% ล่วงหน้า"

เกณฑ์การยอมรับผลงาน

AC-B01-01: Guest เห็นราคา P5 / สมาชิกเห็นตาม Tier ของตน

AC-B01-02: ราคาตาม Effective Date PRD-06

UC-WEB-B02เพิ่มสินค้าและจัดการตะกร้า

SCR-WEB-B02 — ตะกร้าสินค้า (Cart)Figma node 857:5081

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-B02.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ลูกค้ากด "เพิ่มลงตะกร้า" จาก PDP / Promotion Page / Brand Page
ระบบเพิ่มสินค้าและแสดง Toast ยืนยัน + ปรับ Cart Badge
ลูกค้าคลิกไอคอนตะกร้า เปิดหน้า Cart
หน้า Cart แสดง 3 Tabs:
- รายการสั่งซื้อ (สินค้าปกติ)
- รายการขอใบเสนอราคา
- รายการ Pre-Order
สินค้าจัดกลุ่มตามแบรนด์ (เพื่อแสดงโปรโมชั่นแบรนด์)
แสดงข้อความ "ซื้อเพิ่ม ฿x รับโปรโมชั่น y" เมื่อใกล้ถึงเงื่อนไข
Right Panel: เลือกประเภทรับสินค้า (รับเอง/ส่ง), สรุปยอด, ค่าจัดส่ง, ปุ่ม "ดำเนินการต่อ"

ขั้นตอนกรณีผิดพลาด

3-E. ลูกค้าไม่ Login ระบบขอ Login ก่อน Checkout ตาม AUTH-01

5-E. สินค้าหมดสต็อกระหว่างอยู่ในตะกร้า ระบบเตือนและเสนอเปลี่ยนเป็น Pre-Order

เกณฑ์การยอมรับผลงาน

AC-B02-01: Persistent Cart เก็บข้อมูลแม้ปิด Browser

AC-B02-02: Pre-Order ไม่มีโปรโมชั่นใดๆ

UC-WEB-B03ใช้เทมเพลตตะกร้า (Cart Templates)

SCR-WEB-B03 — ขอใบเสนอราคา / Cart Templates (B03)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-B03.png

✓ อัพโหลดแล้ว

จุดประสงค์

ช่วยลูกค้าธุรกิจสั่งซื้อสินค้าที่ซื้อประจำได้รวดเร็ว ผ่าน Template ที่บันทึกไว้ หรือ Template จาก Marketing

ประเภทของ Cart Template

Template ของฉัน — ลูกค้าสร้างและตั้งชื่อเอง
Template ของ Marketing — YSC สร้างให้ (ชุดสินค้าโปรโมชั่น, ชุดเปิดเทอม, ฯลฯ)

ขั้นตอนหลัก

ลูกค้าเข้า My Account → "เทมเพลตตะกร้า"
เลือก Tab: ของฉัน / ของ Marketing
คลิกเทมเพลต ระบบเปิดรายละเอียด (สินค้าและจำนวน)
ลูกค้ากด "เพิ่มลงตะกร้า" ระบบเพิ่มทั้งหมดไปยังตะกร้าหลัก
ลูกค้าปรับจำนวนได้ก่อน Checkout

ขั้นตอนทางเลือก

1a. ลูกค้าสร้าง Template ใหม่จากตะกร้าปัจจุบัน — กด "บันทึกเป็น Template"

เกณฑ์การยอมรับผลงาน

AC-B03-01: Template เก็บได้ไม่จำกัดจำนวนต่อบัญชี

AC-B03-02: สินค้าใน Template ที่หมดสต็อก ระบบแจ้งก่อนเพิ่มลงตะกร้า

ขั้นตอนชำระเงิน (Checkout 4 Steps)

5 Use Cases — Step 1-4 + หน้าสั่งซื้อสำเร็จ

UC-WEB-C01Step 1: ตรวจสอบตะกร้า

SCR-WEB-C01 — Checkout Step 1 — ตรวจสอบตะกร้าFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C01.png

✓ อัพโหลดแล้ว

หน้าตะกร้าทำหน้าที่เป็น Step 1 ของ Checkout (ดู UC-WEB-B02 สำหรับรายละเอียด)

ลูกค้ากด "ดำเนินการต่อ" → ไป Step 2

UC-WEB-C02Step 2: ที่อยู่และวิธีจัดส่ง

SCR-WEB-C02 — Checkout Step 2 — ที่อยู่และวิธีจัดส่งFigma node 867:14194

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C02.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

เลือก/เพิ่มที่อยู่จัดส่ง (จาก Address Book)
เลือกประเภทใบกำกับ Y/N/M/A ตาม INV-04
เลือกวิธีจัดส่ง: YSC (สาย A/B/C), ด่วน (Express), Carrier ภายนอก, รับเอง (Self-Pickup)
Self-Pickup เลือกเวลานัด (≥ 12 ชั่วโมง) ตาม SHP-09

เกณฑ์การยอมรับผลงาน

AC-C02-01: ค่าจัดส่งคำนวณจากที่อยู่ + น้ำหนัก/ขนาดสินค้า

AC-C02-02: Fragile fee 5-10 บาท/ชิ้น ตาม SHP-06

UC-WEB-C03Step 3: วิธีการชำระเงิน

SCR-WEB-C03a — Step 3 — โอนผ่านธนาคาร (Bank Transfer)Figma node 614:1753

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C03a.png

✓ อัพโหลดแล้ว

SCR-WEB-C03b — Step 3 — บัตรเครดิต/เดบิตFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C03b.png

✓ อัพโหลดแล้ว

SCR-WEB-C03c — Step 3 — หักวงเงินเครดิต (Credit Line)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C03c.png

✓ อัพโหลดแล้ว

SCR-WEB-C03d — Step 3 — จ่ายหน้าร้าน (มารับเอง)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C03d.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ระบบแสดงวิธีชำระเงินตาม P-01 ถึง P-08:
- โอนเงิน (11 ธนาคารตาม BNK-01)
- บัตรเครดิต/เดบิต (+3%)
- วงเงินเครดิต (เฉพาะนิติบุคคล)
ลูกค้าเลือกวิธี ระบบแสดงค่าธรรมเนียม/รายละเอียด
กด "ดำเนินการต่อ" → Step 4

ขั้นตอนทางเลือก

1a. วงเงินไม่พอ → ดู UC-OMS-014 (Over-limit) ตาม หมวด 6

เกณฑ์การยอมรับผลงาน

AC-C03-01: ค่าธรรมเนียมบัตร 3% แสดงในยอดรวม

AC-C03-02: แสดงโลโก้ธนาคาร + ปุ่มคัดลอกเลขบัญชี ตาม BNK-03

UC-WEB-C04Step 4: ตรวจสอบและยืนยันคำสั่งซื้อ

SCR-WEB-C04 — Checkout Step 4 — ตรวจสอบและยืนยันคำสั่งซื้อFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C04.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

หน้าสรุปแสดงทั้งหมด: สินค้า, จำนวน, ราคา, ที่อยู่จัดส่ง, ที่อยู่ใบกำกับ, วิธีจัดส่ง, วิธีชำระเงิน, ยอดสุทธิ
ลูกค้ายอมรับเงื่อนไขการสั่งซื้อ
กด "ยืนยันคำสั่งซื้อ"
ระบบสร้างคำสั่งซื้อ ส่งให้ ConX รับเลข SO/OD
ระบบเปิดหน้า "สั่งซื้อสำเร็จ" + ส่งอีเมลแจ้ง ตาม NTF-01

เกณฑ์การยอมรับผลงาน

AC-C04-01: Auto-cancel 24 ชั่วโมงถ้าไม่ชำระ ตาม RTN-01

AC-C04-02: ป้องกัน Duplicate Order กรณีกด 2 ครั้งติด

UC-WEB-C05หน้าสั่งซื้อสำเร็จ (Order Confirmation)

SCR-WEB-C05 — หน้าสั่งซื้อสำเร็จ (Order Confirmation)Figma node 618:2356

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-C05.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

แสดง Modal "คำสั่งซื้อสำเร็จ" พร้อมรหัส SO (เช่น OD2510000147), วันที่, สถานะ
กรณีโอน — แสดงเลขบัญชี + คำแนะนำให้อัปโหลดสลิป
ปุ่ม "ตรวจสอบคำสั่งซื้อของฉัน" และ "สั่งซื้ออีกครั้ง"

เข้าสู่ระบบและสมัครสมาชิก

5 Use Cases — Login 2 ทาง + Register 2 ประเภท + ลืมรหัสผ่าน

[Flow Diagram: Login & Register — ดู Figma node 5822:37207]

Flow Diagram: เข้าสู่ระบบและสมัครสมาชิก (Figma node 5822:37207)

UC-WEB-D01เข้าสู่ระบบด้วยอีเมล / รหัสผ่าน

SCR-WEB-D01 — เข้าสู่ระบบด้วยอีเมล (Login)Figma node 994:7246

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-D01.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ลูกค้าคลิก "เข้าสู่ระบบ" ที่ Header
กรอกอีเมล + รหัสผ่าน (Show/Hide eye)
Checkbox "จดจำการเข้าสู่ระบบ" (Remember Me 30 วัน)
กด "เข้าสู่ระบบ" ระบบตรวจสอบ → Redirect ไปหน้าที่เรียก

ขั้นตอนทางเลือก

2a. ลูกค้ากด "เข้าสู่ระบบด้วย OTP" → UC-WEB-D02

2b. ลูกค้ากด "ลืมรหัสผ่าน?" → UC-WEB-D05

2c. ลูกค้ากด "สมัครสมาชิก" → UC-WEB-D03 / D04

UC-WEB-D02เข้าสู่ระบบด้วย OTP (Passwordless)

SCR-WEB-D02 — เข้าสู่ระบบด้วยเบอร์โทรศัพท์ (OTP Login)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-D02.png

✓ อัพโหลดแล้ว

จุดประสงค์

ลูกค้าเข้าสู่ระบบโดยไม่ใช้รหัสผ่าน — เหมาะกับลูกค้าที่ลืมรหัสบ่อยหรือใช้คอมส่วนกลาง

ขั้นตอนหลัก

ลูกค้ากด "เข้าสู่ระบบด้วย OTP" ที่หน้า Login
กรอกอีเมล / เบอร์โทร ระบบส่ง OTP 6 หลัก
ลูกค้ากรอก OTP กด "ยืนยัน"
ระบบเข้าสู่ระบบและ Redirect

เกณฑ์การยอมรับผลงาน

AC-D02-01: OTP มีอายุ 10 นาที

AC-D02-02: ส่งใหม่ได้สูงสุด 3 ครั้ง/ชั่วโมง

AC-D02-03: ช่องทาง OTP ตาม NTF-03

UC-WEB-D03สมัครสมาชิกบุคคลธรรมดา

SCR-WEB-D03 — สมัครสมาชิกบุคคลธรรมดา (Register Personal)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-D03.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ลูกค้าเลือก "สมัครสมาชิก" — เลือก "บุคคลธรรมดา"
กรอกเบอร์โทรศัพท์หรืออีเมล ระบบส่ง OTP ไปยังช่องทางที่กรอก (SMS / Email) ตาม AUTH-02
ลูกค้ายืนยัน OTP
กรอกข้อมูลส่วนตัว: ชื่อ-สกุล, เบอร์โทร, วันเกิด (สำหรับสิทธิ์วันเกิด), เพศ
กรอกที่อยู่จัดส่งหลัก
ยอมรับเงื่อนไขและกด "สมัคร"
ระบบสร้างบัญชีระดับ Prospect และเข้าสู่ระบบทันที

เกณฑ์การยอมรับผลงาน

AC-D03-01: ใช้งานบัญชีได้ทันทีหลังสมัคร ตาม AUTH-02

AC-D03-02: Guest Checkout ไม่รองรับ ตาม AUTH-01

UC-WEB-D04สมัครสมาชิกนิติบุคคล (รับใบกำกับในนามนิติบุคคล)

SCR-WEB-D04 — สมัครสมาชิกนิติบุคคล (Register Business)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-D04.png

✓ อัพโหลดแล้ว

จุดประสงค์

ลูกค้าธุรกิจที่ต้องการรับใบกำกับภาษีในนามนิติบุคคล และอาจขอวงเงินเครดิต

ขั้นตอนหลัก

เลือก "สมัครสมาชิก" — เลือก "นิติบุคคล / รับใบกำกับในนามนิติบุคคล"
กรอกอีเมล + ยืนยัน OTP
กรอกข้อมูลผู้ติดต่อ (ชื่อ, เบอร์, ตำแหน่ง)
กรอกข้อมูลบริษัท: เลขทะเบียน 13 หลัก, ชื่อบริษัท, ประเภทธุรกิจ
กรอกที่อยู่บริษัท (ตามทะเบียน) + ที่อยู่ออกใบกำกับ (ถ้าต่างกัน)
อัปโหลดเอกสาร: หนังสือรับรอง, ภ.พ.20, สำเนาบัตรประชาชนกรรมการ
เลือกประเภทใบกำกับ Y/N/M/A เริ่มต้น ตาม INV-04
ระบุว่าต้องการขอวงเงินเครดิตหรือไม่ (ถ้าใช่ จะมีขั้นตอนเพิ่ม — ดู UC-CRM-006)
ยอมรับเงื่อนไข + กด "สมัคร"
ระบบสร้างบัญชี รอ Admin ตรวจสอบเอกสาร (สถานะ "รอตรวจสอบ")

เกณฑ์การยอมรับผลงาน

AC-D04-01: เอกสารที่อัปโหลดตรวจสอบขนาดไฟล์ ≤ 5 MB/ไฟล์

AC-D04-02: ก่อนอนุมัติเอกสาร ลูกค้าสั่งซื้อแบบโอน/บัตรได้ แต่ขอวงเงินไม่ได้

AC-D04-03: หลังอนุมัติ ระบบส่งอีเมลแจ้งและเปิดให้ขอวงเงินเครดิตได้

UC-WEB-D05ลืมรหัสผ่าน / รีเซ็ตรหัสผ่าน

ยังไม่มีใน Figma

SCR-WEB-D05.png

ขั้นตอนหลัก

ลูกค้ากด "ลืมรหัสผ่าน?" ที่หน้า Login
กรอกอีเมลที่ใช้ลงทะเบียน
ระบบส่งลิงก์รีเซ็ต + OTP ไปอีเมล
ลูกค้าคลิกลิงก์ / กรอก OTP
กรอกรหัสผ่านใหม่ 2 ครั้ง
ระบบบันทึกและให้ Login ใหม่

เกณฑ์การยอมรับผลงาน

AC-D05-01: ลิงก์รีเซ็ตหมดอายุภายใน 30 นาที

AC-D05-02: รหัสผ่านใหม่ต้องตรงเงื่อนไข (อย่างน้อย 8 ตัว, ผสม)

บัญชีของฉัน (My Account)

6 Use Cases — Dashboard, Profile, Addresses, Orders, Quotations, Cart Templates

[Flow Diagram: My Account — ดู Figma node 3172:13345]

Flow Diagram: บัญชีของฉัน — Dashboard, Loyalty, Orders, Profile, Addresses, Quotations, Cart Templates (Figma node 3172:13345)

UC-WEB-E01หน้าหลักบัญชีของฉัน (Account Dashboard)

SCR-WEB-E01 — หน้าหลักบัญชีของฉัน (Account Dashboard)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E01.png

✓ อัพโหลดแล้ว

จุดประสงค์

หน้าเริ่มต้นของ My Account แสดงข้อมูลสำคัญและทางลัดไปยัง Sub-pages

เนื้อหาที่แสดง

Header บัญชี — ชื่อลูกค้า, Tier ปัจจุบัน (Prospect/Member/Silver/Gold/Platinum/Diamond/Coronet)
Quick Stats — คะแนนคงเหลือ, คำสั่งซื้อล่าสุด, ใบเสนอราคารอ, คูปองคงเหลือ
กรณีนิติบุคคลที่มีวงเงิน — แสดงวงเงินคงเหลือ + วันครบกำหนดชำระ
กรณีลูกค้าทั่วไป (ไม่มีเครดิต) — แสดงคำเชิญสมัครเป็นนิติบุคคล
Menu ด้านข้าง — ลิงก์ไป Sub-pages: ข้อมูลบัญชี, ที่อยู่, คำสั่งซื้อ, ใบเสนอราคา, คะแนน, รางวัล, เทมเพลตตะกร้า

เกณฑ์การยอมรับผลงาน

AC-E01-01: Dashboard มี 2 layout — ลูกค้าทั่วไป / นิติบุคคลที่มีเครดิต

AC-E01-02: Quick Stats อัปเดตเวลาจริง

UC-WEB-E02จัดการข้อมูลบัญชีผู้ใช้งาน (Profile)

SCR-WEB-E02 — ข้อมูลบัญชีผู้ใช้งาน (Profile)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E02.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

ลูกค้าเข้า My Account → "ข้อมูลบัญชี"
ระบบแสดง: ชื่อ-สกุล, อีเมล, เบอร์โทร, วันเกิด, เพศ, รูปโปรไฟล์
กรณีนิติบุคคล แสดงเพิ่ม: ชื่อบริษัท, เลขทะเบียน, ประเภทธุรกิจ
ลูกค้ากด "แก้ไข" ระบบเปิดฟอร์ม
เปลี่ยนเบอร์โทร / อีเมล — ต้อง OTP ยืนยัน ตาม NTF-03
เปลี่ยนรหัสผ่าน — ต้อง OTP ยืนยัน ตาม NTF-04
ระบบบันทึกและ Activity Log

เกณฑ์การยอมรับผลงาน

AC-E02-01: รองรับการอัปโหลดรูปโปรไฟล์ (JPG/PNG ≤ 2 MB)

AC-E02-02: ลบบัญชี (Account Deletion) ตามสิทธิ์ PDPA

UC-WEB-E03จัดการที่อยู่ (Address Book)

SCR-WEB-E03 — จัดการที่อยู่ (Address Book)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E03.png

✓ อัพโหลดแล้ว

จุดประสงค์

จัดการที่อยู่ 2 ประเภท — ที่อยู่จัดส่ง + ที่อยู่ออกเอกสาร

ขั้นตอนหลัก

เข้า My Account → "ที่อยู่"
ระบบแสดง 2 Tabs: ที่อยู่จัดส่ง + ที่อยู่ออกเอกสาร
แต่ละรายการแสดง: ชื่อผู้รับ, ที่อยู่เต็ม, เบอร์โทร, ป้าย "Default"
ลูกค้ากด "เพิ่ม / แก้ไข / ลบ"
กรอกข้อมูลที่อยู่ครบ — ตรวจสอบรหัสไปรษณีย์
กำหนด Default ของแต่ละประเภท
บันทึก

เกณฑ์การยอมรับผลงาน

AC-E03-01: เก็บที่อยู่ได้ไม่จำกัดต่อบัญชี

AC-E03-02: ลบที่อยู่ Default ไม่ได้ ต้องตั้งใหม่ก่อน

AC-E03-03: ที่อยู่ออกเอกสารต้องตรงกับ ภ.พ.20 (นิติบุคคล)

UC-WEB-E04ดูประวัติคำสั่งซื้อและ Pre-Order

SCR-WEB-E04 — ประวัติคำสั่งซื้อ — รายการ + FilterFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E04.png

✓ อัพโหลดแล้ว

SCR-WEB-E04b — ประวัติคำสั่งซื้อ — รายละเอียด + Pre-OrderFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E04b.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

เข้า My Account → "คำสั่งซื้อ"
ระบบแสดง 2 Tabs: คำสั่งซื้อทั่วไป + คำสั่งซื้อ Pre-Order
แต่ละรายการแสดง: รหัส SO/OD, วันที่, สถานะ (10 สถานะ ตาม SO-01-06), ยอดรวม, สินค้าตัวอย่าง
ลูกค้าคลิกดูรายละเอียด — เห็น Tracking สถานะแบบ Timeline
กรณีรอชำระ — มีปุ่ม "อัปโหลดสลิป" / "ยกเลิก"
กรณีจัดส่งแล้ว — มีปุ่ม "ติดตามขนส่ง" + Carrier Tracking Code
กรณีปิดงานแล้ว — มีปุ่ม "สั่งซื้อซ้ำ (Re-order)" ตาม RO-01

เกณฑ์การยอมรับผลงาน

AC-E04-01: Re-order เปิดตะกร้าใหม่จากรายการเดิม เตือนหากสินค้าหมดสต็อก

AC-E04-02: ดาวน์โหลดใบกำกับภาษี PDF ได้

UC-WEB-E05ดูใบเสนอราคา (Quotations)

SCR-WEB-E05 — ประวัติใบเสนอราคา (Quotations)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E05.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

เข้า My Account → "ใบเสนอราคา"
ระบบแสดงรายการใบเสนอราคาเรียงตามวันที่
แต่ละรายการแสดง: เลขที่ Quote, วันที่, อายุ (วันที่หมดอายุ), สถานะ (Active / Expired / Used)
ลูกค้าคลิกดูรายละเอียด
ลูกค้ากด "แปลงเป็นคำสั่งซื้อ" — ระบบเปิด Checkout ด้วยข้อมูลจาก Quote
หรือดาวน์โหลด PDF / แชร์ลิงก์ให้ฝ่ายจัดซื้อ

เกณฑ์การยอมรับผลงาน

AC-E05-01: ราคาตามใบเสนอราคาคงที่จนหมดอายุ ตาม Q-01

AC-E05-02: อายุใบเสนอราคา รอยืนยัน

UC-WEB-E06จัดการเทมเพลตตะกร้า (My Cart Templates)

SCR-WEB-E06 — เทมเพลตตะกร้า — ของฉัน + ของ Marketing (E06)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-E06.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

เข้า My Account → "เทมเพลตตะกร้า"
2 Tabs: ของฉัน + ของ Marketing
Template ของฉัน — แสดงรายการที่ลูกค้าสร้างเอง พร้อมจำนวนสินค้าและยอดรวม
คลิกดูรายละเอียด → แสดงสินค้าครบ + ปุ่ม "เพิ่มลงตะกร้า"
ลูกค้าสามารถ: แก้ไขชื่อ, ลบ Template, ปรับจำนวนสินค้าใน Template
Template ของ Marketing — แสดง Template ที่ YSC สร้างไว้ (ชุดเปิดเทอม, ฯลฯ)

เกณฑ์การยอมรับผลงาน

AC-E06-01: ลูกค้ามีสิทธิ์สร้าง/แก้/ลบ เฉพาะ Template ของตน

AC-E06-02: Template ของ Marketing อ่านอย่างเดียว

คะแนนสะสมและของรางวัล (Loyalty & Rewards)

4 Use Cases — Points, Rewards, Coupons (รวมวันเกิด), History

Flow Diagram: Loyalty section อยู่ใน Account Flow เดียวกัน (Figma node 3172:13345) — ดูภาพรวมที่ section E ด้านบน

UC-WEB-F01ดูคะแนนสะสมและกิจกรรม

SCR-WEB-F01 — คะแนนสะสมและกิจกรรม (Loyalty Points)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-F01.png

✓ อัพโหลดแล้ว

เนื้อหาที่แสดง

คะแนนคงเหลือ ขนาดใหญ่
Tier ปัจจุบัน + ความก้าวหน้าไป Tier ถัดไป (Progress Bar)
คะแนนที่กำลังจะหมดอายุ (31 ธ.ค.) + จำนวน
กิจกรรมที่ทำได้ — ซื้อสินค้า ฿1,500 = 1 คะแนน, รีวิวสินค้า, สมัครรับข่าวสาร รอยืนยันอัตรา

เกณฑ์การยอมรับผลงาน

AC-F01-01: แจ้งเตือนคะแนนใกล้หมดอายุล่วงหน้า 60 วัน ตาม NTF-05

UC-WEB-F02แลกของรางวัลจาก Rewards Catalog

SCR-WEB-F02 — Rewards Catalog — แลกรับสินค้าFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-F02.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

เข้า My Account → "ของรางวัล"
ระบบแสดง Catalog ของรางวัล แบ่ง: สินค้า, คูปอง, ส่วนลด
แต่ละรายการแสดง: รูป, ชื่อ, คะแนนที่ใช้, สต็อกคงเหลือ
ลูกค้าคลิก "แลก" — ระบบตรวจคะแนนพอ
กรณีพอ — หักคะแนนและเพิ่มของรางวัลในตะกร้าครั้งถัดไป / ส่งคูปองให้
กรณีไม่พอ — แสดงข้อความ "ต้องเพิ่ม x คะแนน"

เกณฑ์การยอมรับผลงาน

AC-F02-01: ของรางวัลตัดสต็อกจากคลัง Reward (ไม่ใช่คลังขาย)

AC-F02-02: Reward Tier exclusive — บางรางวัลเฉพาะ Tier สูง

UC-WEB-F03คูปองส่วนลด ของขวัญวันเกิด สิทธิ์พิเศษ

SCR-WEB-F04 — คูปองส่วนลด + สิทธิ์พิเศษ + รางวัลที่แลกไว้Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-F04.png

✓ อัพโหลดแล้ว

เนื้อหาที่แสดง

คูปองคงเหลือ — รหัส, ส่วนลด, วันหมดอายุ, เงื่อนไข
สิทธิ์พิเศษวันเกิด — แสดงเมื่อใกล้/ในเดือนเกิด (ส่วนลด/ของขวัญพิเศษ)
สิทธิ์เฉพาะ Tier — Diamond/Coronet มีสิทธิ์พิเศษเพิ่ม

ขั้นตอนหลัก

เข้า My Account → "คูปองและสิทธิ์พิเศษ"
คลิกคูปองดูเงื่อนไขครบ
ปุ่ม "ใช้คูปองนี้" — ระบบนำไปหน้าสินค้าที่ใช้ได้ หรือเพิ่มในตะกร้าทันที

เกณฑ์การยอมรับผลงาน

AC-F03-01: สิทธิ์วันเกิดส่งให้ลูกค้า 7 วันก่อนวันเกิด

AC-F03-02: คูปองที่หมดอายุย้ายไป "ประวัติ"

UC-WEB-F04ดูประวัติคะแนน (Points History)

SCR-WEB-F05 — ประวัติคะแนนสะสม (Points History)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-F05.png

✓ อัพโหลดแล้ว

ขั้นตอนหลัก

เข้า My Account → "ประวัติคะแนน"
ระบบแสดง Timeline เรียงตามวันที่ล่าสุด
แต่ละรายการแสดง: วันที่, เหตุการณ์ (ซื้อสินค้า/แลกรางวัล/หมดอายุ), คะแนน +/-, คะแนนคงเหลือหลังรายการ
ตัวกรอง: ทุกประเภท / เพิ่มเข้า / ใช้ออก / หมดอายุ

เกณฑ์การยอมรับผลงาน

AC-F04-01: ประวัติย้อนหลังไม่จำกัดเวลา

AC-F04-02: ดาวน์โหลด Excel ได้ ≥ 2 ปี

หน้าข้อมูลทั่วไป (Footer / Info Pages)

4 Use Cases — Help, Policy, About, Bonus

[Flow Diagram: Info Pages — ดู Figma node 7100:44288]

Flow Diagram: หน้าข้อมูลทั่วไป (Figma node 7100:44288)

UC-WEB-G01หน้าช่วยเหลือ FAQ และติดต่อ

SCR-WEB-G01 — หน้าช่วยเหลือ FAQ และติดต่อ (Help Center)Figma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-G01.png

✓ อัพโหลดแล้ว

เนื้อหา

FAQ จัดหมวด: บัญชี / การสั่งซื้อ / การชำระเงิน / การจัดส่ง / การคืน / โปรโมชั่น
วิธีการสั่งซื้อ — Step-by-step พร้อมรูป
คู่มือการใช้งานเว็บไซต์ — Video Tutorial (ถ้ามี)
ติดต่อเรา — เบอร์, อีเมล, LINE OA, แผนที่, แบบฟอร์มส่งคำถาม

UC-WEB-G02หน้านโยบาย (Privacy / Return / Terms)

SCR-WEB-G04 — หน้านโยบาย — เงื่อนไข / ส่งสินค้า / ความเป็นส่วนตัวFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-G04.png

✓ อัพโหลดแล้ว

เนื้อหา

นโยบายความเป็นส่วนตัว — ตามมาตรฐาน PDPA
นโยบายการคืนสินค้า — 7 วัน (บุคคลธรรมดา) / 14 วัน (นิติบุคคล) ตาม RTN-04
นโยบายการจัดส่ง — สาย A/B/C, Carrier ภายนอก, ค่าบริการ
เงื่อนไขการใช้งาน — Terms of Service

เกณฑ์การยอมรับผลงาน

AC-G02-01: เนื้อหาจัดการผ่าน CMS Backoffice

AC-G02-02: Print-friendly และ Download PDF ได้

UC-WEB-G03หน้าเกี่ยวกับเรา (About Us)

SCR-WEB-G05 — หน้าเกี่ยวกับเรา — ประวัติบริษัท สาขา สมัครงานFigma

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-G05.png

✓ อัพโหลดแล้ว

เนื้อหา

เรื่องราวบริษัท — ประวัติยงเจริญฯ, วิสัยทัศน์, ทีมงาน
สาขาและจุดบริการ — รายชื่อสาขา, แผนที่
การรับรอง / มาตรฐาน — ISO, รางวัล
ติดต่องาน / สมัครงาน (ถ้ามี)

UC-WEB-G04หน้าผลิตภัณฑ์โบนัส / Special Offers

ยังไม่มีใน Figma

SCR-WEB-G06.png

จุดประสงค์

รวมสินค้าพิเศษ โปรพิเศษ ของแถมพิเศษที่ไม่ได้อยู่ในแคมเปญหลัก

เนื้อหา

สินค้าแถม / ของรางวัลพิเศษ
ข้อเสนอเฉพาะกลุ่ม (B2B Volume Discount, etc.)
ลิงก์ไปหน้า Brand / Promotion ที่เกี่ยวข้อง

เวอร์ชัน Mobile (Responsive Web)

1 Use Case — Mobile experience ของทุก Section

[Flow Diagram: Mobile — ดู Figma node 5246:37634]

Flow Diagram: เวอร์ชัน Mobile ทั้งเว็บ — Homepage, Product List, News & Event, Product Detail, Cart > Payment > Complete, Login & Register, More (Figma node 5246:37634)

UC-WEB-H01การใช้งานบน Mobile (Responsive)

ยังไม่มีใน Figma

SCR-WEB-H01.png

จุดประสงค์

ทุกหน้าจอใน Section A-G รองรับ Mobile responsive โดยมี Layout / Component พิเศษสำหรับขนาดเล็ก

ส่วนประกอบ Mobile-specific

Hamburger Menu แทน Top Menu — กดเปิดเมนูข้างซ้าย
Sticky Bottom Bar — ทางลัด: หน้าแรก / ค้นหา / ตะกร้า / บัญชี
Cards 1-2 คอลัมน์ ใน Product Listing
Image Gallery แบบ Swipe ใน PDP
Sticky CTA "เพิ่มลงตะกร้า" ที่ด้านล่าง PDP
Checkout เป็นหลาย Step ทีละหน้า (ไม่ใช่หลายคอลัมน์)

เกณฑ์การยอมรับผลงาน

AC-H01-01: Google Mobile-Friendly Test ผ่าน ≥ 90/100

AC-H01-02: Web Vitals (LCP, FID, CLS) ผ่านเกณฑ์ Google

AC-H01-03: ใช้งานได้กับ iOS Safari 15+ และ Android Chrome 90+

8. การออกแบบประสบการณ์ผู้ใช้ (Screen Inventory)

ภาพรวมของหน้าจอทั้งหมดที่อยู่ในขอบเขต — อ้างอิงจาก Figma Front End (Web) tracking sheet ทั้งหมด 54 หน้าจอ

รหัส	ชื่อหน้าจอ	Section	รายละเอียด / Sub-screens	สถานะ Figma
A — Discovery (ค้นพบสินค้า)
SCR-WEB-A01	หน้าแรก (Homepage)	A	Top bar Ticker · Hero Flash Sale + นับถอยหลัง · Category Sidebar (Tree) · Promo Carousel (4 แบนเนอร์) · Shelf ขายดีประจำสัปดาห์ · Shelf สินค้าใหม่ · Mid Banners (2 ใบ) · Featured Product Spotlight · Category Blocks (เฟอร์นิเจอร์/ดนตรี/เครื่องเขียน/กีฬา) · Brand Shelf (Horse) · ข่าวสารและกิจกรรม (3 บทความ) · Footer	มี
SCR-WEB-A02	ผลการค้นหา (Search Result + Auto-suggest)	A	—	มี
SCR-WEB-A03	หน้ารวมสินค้าทั้งหมด (All Products / Category Listing)	A	ตาม Figma #2	มี
SCR-WEB-A04	หน้าตามแบรนด์ (Brand Page)	A	ตัวอย่าง ESY	มี
SCR-WEB-A05	หน้าโปรโมชั่น (Promotion Hub + Landing)	A	4 รูปแบบ: Hub แบนเนอร์รวม (#15) · ภาพ+รายละเอียด+สินค้า (#16) · Shelf ภาพ Header+ลิสต์ type 1 (#17) · type 2 (#18)	มี
B — Shopping (สั่งซื้อสินค้า)
SCR-WEB-B01	รายละเอียดสินค้า (PDP)	B	4 variants: +โปรโมชั่น (#3) · +ตัวเลือก 3 Level (#4) · +กลุ่ม/ขนาด/โปร ต่างกัน (#5) · +Pre-Order (#6)	มี
SCR-WEB-B02	ตะกร้า (Cart)	B	3 Tabs รวม Pre-Order Tab (#7) · Cart Templates	มี
SCR-WEB-B03	ขอใบเสนอราคา (Quote Request Cart)	B	รายการสินค้าในตะกร้า ขอใบเสนอราคา (#14)	มี
C — Checkout (ชำระเงิน)
SCR-WEB-C01	Checkout Step 1: ตรวจสอบตะกร้า	C	Flow overview step 1 (#8)	มี
SCR-WEB-C02	Checkout Step 2: ที่อยู่และวิธีจัดส่ง	C	มารับเอง / ขนส่งเอกชน (#9)	มี
SCR-WEB-C03	Checkout Step 3: Payment	C	4 วิธี: โอนผ่านธนาคาร (#10) · บัตรเครดิต (#11) · หักวงเงินเครดิต (#12) · จ่ายหน้าร้าน-มารับเอง (#13)	มี
SCR-WEB-C04	Checkout Step 4: Review & Confirm	C	—	มี
SCR-WEB-C05	หน้าสั่งซื้อสำเร็จ (Order Success)	C	—	มี
D — Authentication (เข้าสู่ระบบ / สมัครสมาชิก)
SCR-WEB-D01	เข้าสู่ระบบด้วยอีเมล (Email Login + OTP)	D	Figma #27	มี
SCR-WEB-D02	เข้าสู่ระบบด้วยเบอร์โทรศัพท์ (Phone OTP Login)	D	Figma #26 — หน้าแยกจาก Email Login	มี
SCR-WEB-D03	สมัครสมาชิกบุคคลธรรมดา (Register)	D	Figma #28	มี
SCR-WEB-D04	สมัครสมาชิกนิติบุคคล (Multi-step)	D	—	มี
SCR-WEB-D05	ลืม/รีเซ็ตรหัสผ่าน	D	—	มี
E — My Account (บัญชีและประวัติ)
SCR-WEB-E01	Account Dashboard	E	2 variants: มีวงเงินเครดิต (#19) · ไม่มีวงเงินเครดิต (#20)	มี
SCR-WEB-E02	ข้อมูลบัญชีผู้ใช้งาน (Profile)	E	ข้อมูลส่วนตัว · ข้อมูลเครดิต · ข้อมูลติดต่อ (#35)	มี
SCR-WEB-E03	จัดการที่อยู่	E	2 Tabs: ที่อยู่จัดส่ง (#36) · ที่อยู่ออกเอกสาร (#37)	มี
SCR-WEB-E04	ประวัติคำสั่งซื้อ	E	List+Filter ตามสถานะ (#21) · รายละเอียด+ของรางวัล (#22) · Pre-Order (#23)	มี
SCR-WEB-E05	ประวัติใบเสนอราคา	E	List+Filter ตามสถานะ (#24) · รายละเอียด (#25)	มี
SCR-WEB-E06	เทมเพลตตะกร้าของฉัน + ของ Marketing	E	—	มี
F — Loyalty (คะแนน รางวัล คูปอง)
SCR-WEB-F01	คะแนนสะสมและกิจกรรม	F	หน้าหลัก (#29) · รางวัลและคะแนน Tab (#30)	มี
SCR-WEB-F02	Rewards Catalog (แลกรับสินค้า)	F	Figma #31	มี
SCR-WEB-F03	แลกคะแนนเป็นคูปอง	F	Figma #32	มี
SCR-WEB-F04	คูปองส่วนลด + สิทธิ์พิเศษ + รางวัลที่แลกไว้	F	คูปองและรางวัลที่แลกไว้ (#33) · วันเกิด · สิทธิ์พิเศษ	มี
SCR-WEB-F05	ประวัติคะแนน	F	Figma #34	มี
G — Info Pages (หน้าข้อมูลทั่วไป)
SCR-WEB-G01	ช่วยเหลือ (Help Center)	G	FAQ (#38) · เปลี่ยน/คืน/เคลมสินค้า (#39) · เช็คสถานะสั่งซื้อ (#40) · การขอเครดิตเทอม (#41)	มี
SCR-WEB-G02	ขายสินค้ากับเรา (Sell With Us)	G	Figma #42	มี
SCR-WEB-G03	สิทธิประโยชน์สมาชิก	G	การสมัครสมาชิก (#43) · ราคาพิเศษสมาชิกขายส่ง (#44) · วิธีแลกของรางวัลและอื่น ๆ (#45)	กำลังทำ
SCR-WEB-G04	นโยบาย	G	เงื่อนไขการใช้งาน (#46) · การส่งสินค้า (#47) · ความเป็นส่วนตัว (#48) · คุกกี้ (#49)	มี
SCR-WEB-G05	เกี่ยวกับบริษัท	G	ประวัติบริษัท (#50) · สาขา (#51) · สมัครงาน (#52)	มี
SCR-WEB-G06	ผลิตภัณฑ์โบนัส	G	—	มี
H — Mobile
SCR-WEB-H01	Mobile (ทุก Section)	H	ดู Mobile Flow Diagram	มี
I — Content (ข่าวสารและกิจกรรม)
SCR-WEB-I01	ข่าวสารและกิจกรรม — หน้ารวม	I	Figma #53	มี
SCR-WEB-I02	ข่าวสารและกิจกรรม — หน้ารายละเอียด	I	Figma #54	มี

รวม 43 หน้าจอ (SCR-WEB-A01 ถึง I02) — อ้างอิง Figma Front End (Web) tracking sheet ครบทั้ง 54 Figma screens

8.1 SCR-WEB-A01 — Homepage Layout Zones (หน้าจริง)

โครงสร้างหน้าแรกที่ใช้งานจริง (Live Site) — แต่ละ Zone ระบุแหล่งข้อมูลที่ระบบต้องเรียก

SCR-WEB-A01 — Homepage พร้อม FR Zone Labels

SCR-WEB-A01-annotated — Homepage Layout Zones (FR-1.1.1 – FR-1.1.16)สร้าง: 2026-05-18

คลิกเพื่ออัพโหลดรูปภาพ

SCR-WEB-A01-annotated.png

✓ อัพโหลดแล้ว

FR Code	Zone	รายละเอียด Component	Data Source
FR-1.1.1	Top bar Ticker	ข้อความเลื่อน: วันที่ Flash Sale · Countdown นับถอยหลัง	CMS
FR-1.1.2	Header	Logo · Mega Menu · Search Bar (Auto-suggest) · Cart + Badge · แต้มสะสม (Login เท่านั้น)	CRM / PRD
FR-1.1.3	Promo Strip (3 Banners)	แบนเนอร์ขนาดเล็ก 3 ชิ้น พร้อม Countdown — ลดคลัง / Bundle / ซื้อ 2 ลด 70%	CMS + Promo Engine
FR-1.1.4	Hero Banner	Full-width: "WAREHOUSE HOT SALE UP TO 80%" + วันที่ Flash Sale	CMS
FR-1.1.5	Flash Sale Event Bar	แถบวันเวลา Flash Sale + Countdown Timer ซิงค์ Server (ไม่ใช้ client local time)	CMS
FR-1.1.6	Category Sidebar	Tree หมวดหมู่ฝั่งซ้าย พร้อมไอคอน — คลิกไปหน้า Category Listing A03	PRD
FR-1.1.7	Promo Carousel (4 Banners)	Slider อัตโนมัติ: 40% / 50% / -20~60% / 30% — คลิกไปหน้าโปรโมชั่น A05	CMS + Promo Engine
FR-1.1.8	Shelf: สินค้าขายดีประจำสัปดาห์	Horizontal scroll · Product Card (รูป + ชื่อ + ราคา + ปุ่ม +/- + Add to Cart) · เรียงตาม OMS ยอดขาย	PRD + OMS
FR-1.1.9	Shelf: สินค้าใหม่ YONG CHAROEN	Product Card เหมือน FR-1.1.8 — เรียงตาม Date Added DESC	PRD
FR-1.1.10	Mid Banners (2 ชิ้น)	Full-width banner คู่: SALE 50% + SUMMER SALE 60%	CMS
FR-1.1.11	Featured Product Spotlight	สินค้าเด่น 1 รายการ (Hero Card) + Grid สินค้าประกอบ (ตัวอย่าง: Duracell)	PRD + Promo Engine
FR-1.1.12	Category Blocks + Sports Banner	4 กลุ่ม: เฟอร์นิเจอร์ · เครื่องดนตรี · เครื่องเขียน · สันทนาการ — Carousel สินค้า + Banner ลด 40%	PRD + CMS
FR-1.1.13	Brand Shelf (Advertiser)	Logo แบรนด์ + Product Cards ของแบรนด์นั้น — ตัวอย่าง: Horse · จัดการโดย CMS	PRD + CMS
FR-1.1.14	ข่าวสารและกิจกรรม	3 บทความล่าสุด: รูป + วันที่ + หัวข้อ → คลิกไป I01 / I02	CMS
FR-1.1.15	Footer (Info Columns)	4 คอลัมน์: ติดต่อบริษัท · บริการลูกค้า · สิทธิประโยชน์โปรโมชั่น · เกี่ยวกับสมาชิก	CMS
FR-1.1.16	Footer (Brand + Social)	Logo YONG CHAROEN · About text · Social icons (FB/IG/TikTok/LINE) · DBD Registered · Trust Badge	CMS

9. กฎเกณฑ์เชิงธุรกิจ — อ้างอิงเอกสารแม่บท

หมายเหตุ: กฎฉบับเต็มอยู่ใน ysc_business_rules.html v2.2

รหัส	กฎเกณฑ์ที่ใช้
AUTH-01, AUTH-02	ห้าม Guest Checkout — OTP ผ่านเบอร์โทรศัพท์ (SMS) หรืออีเมล แล้วแต่ที่ลูกค้ากรอก
หมวด 2	ประเภทคำสั่งซื้อ 3 ประเภท
P-01 ถึง P-08	การชำระเงิน 4 วิธี (เว็บไม่รับเงินสด)
C-01 ถึง C-10	วงเงินเครดิตลูกค้านิติบุคคล
Q-01 ถึง Q-04	ใบเสนอราคา
RO-01 ถึง RO-03	การสั่งซื้อซ้ำ
หมวด 10	ระดับสมาชิก 7 ระดับ + คะแนนสะสม + ระดับราคา P1-P5
PR-01 ถึง PR-07	โปรโมชั่น
INV-04	ใบกำกับ Y/N/M/A
SO-01 ถึง SO-06	10 สถานะคำสั่งซื้อ
PRD-06, PRD-08, PRD-09, PRD-11	ราคา Effective, สินค้าทดแทน, คล้าย, ป้ายสถานะ
RTN-01, RTN-04	Auto-cancel 24 ชั่วโมง + ระยะเวลาคืน
SHP-02 ถึง SHP-11	วิธีจัดส่งทุกรูปแบบ
BNK-01, BNK-03	11 ธนาคารและการแสดงเลขบัญชี
NTF-01 ถึง NTF-05	แจ้งเตือนอีเมล/LINE และ OTP

10. การเชื่อมต่อระบบภายนอก (Integration)

ระบบ	ข้อมูล	ทิศทาง
OMS (Backoffice)	คำสั่งซื้อ การชำระเงิน สถานะ ใบเสนอราคา Pre-Order	เว็บ ↔ OMS
PRD (Backoffice)	ข้อมูลสินค้า ราคา รูปภาพ สต็อก	PRD → เว็บ
CRM (Backoffice)	ข้อมูลลูกค้า สมาชิก Tier คะแนน วงเงิน คูปอง Cart Templates	เว็บ ↔ CRM
Promotion Engine	แคมเปญ คูปอง การคำนวณส่วนลด	Promotion → เว็บ
CMS (Backoffice)	Banner ข่าวสาร Landing Page Pop-up FAQ นโยบาย	CMS → เว็บ
Payment Gateway	การชำระเงินบัตร	เว็บ ↔ Gateway
ConX ERP	SO/OD ใบกำกับ ผ่าน OMS	ทางอ้อม
LINE OA	การแจ้งเตือนสถานะ + Loyalty Update	เว็บ → LINE
Google Analytics	การติดตามพฤติกรรม	เว็บ → GA

11. ข้อกำหนดเชิงคุณภาพ (NFR)

หัวข้อ	เกณฑ์
เวลาตอบสนอง	หน้าแรก ≤ 3 วินาที, PDP ≤ 2 วินาที, ค้นหา ≤ 1 วินาที
Web Vitals	LCP ≤ 2.5s, FID ≤ 100ms, CLS ≤ 0.1
ความพร้อมใช้งาน	99.9% ตลอด 24/7
Concurrent Users	≥ 5,000 ผู้ใช้พร้อมกัน
Browser	Chrome, Safari, Edge, Firefox (2 เวอร์ชันล่าสุด)
Mobile	iOS Safari 15+, Android Chrome 90+
ภาษา	ไทย (หลัก), อังกฤษ (เฟส 2)

12. ความปลอดภัยและความเป็นส่วนตัว

HTTPS ทุกหน้า
การยืนยันตัวตน Session-based + JWT, Remember Me 30 วัน
OTP สำหรับการสมัคร / เปลี่ยนข้อมูล / ธุรกรรมเสี่ยง
การชำระบัตร ผ่าน Payment Gateway มาตรฐาน PCI-DSS — ไม่เก็บข้อมูลบัตรในระบบ
PDPA ขอความยินยอม + รองรับคำขอลบข้อมูล
Rate Limiting ป้องกัน Brute-force
CAPTCHA ในหน้าสมัครและหลัง Login ผิด 3 ครั้ง

13. SEO และ Analytics

Meta Tags, OG Tags, Twitter Cards ทุกหน้า
Sitemap.xml อัปเดตอัตโนมัติ
Schema.org: Product, Organization, BreadcrumbList
Friendly URL: /product/{slug}, /category/{slug}, /brand/{slug}
Google Analytics 4 + Google Search Console
Event tracking: view_item, add_to_cart, begin_checkout, purchase, sign_up, login, view_promotion

14. สมมติฐานและข้อจำกัด

ดีไซน์ Mobile + Desktop ใน Figma ครอบคลุมครบทุก Section A-H (จาก Flow Diagrams ที่อ้างอิง)
Adeptio backend เป็นแหล่งข้อมูลหลัก — ConX เป็น ERP สำหรับบัญชี
Mobile Native App ไม่อยู่ในขอบเขต Phase 1
LINE OA ใช้ Notification เท่านั้น ไม่ใช่ Order Channel

15. เกณฑ์การยอมรับผลงาน (Acceptance Criteria)

รหัส	เกณฑ์	UC อ้างอิง
AC-WEB-G01	ลูกค้าสมัครและสั่งซื้อได้ครบทั้ง 2 ประเภท (บุคคลธรรมดา + นิติบุคคล)	UC-D03, D04, C01-C05
AC-WEB-G02	My Account ครบทุก Sub-page (Profile, Addresses, Orders, Quotations, Templates, Loyalty)	UC-E01-E06, F01-F04
AC-WEB-G03	การคำนวณส่วนลด/คะแนน/วงเงิน ตรงกัน 100% กับ Backoffice	ทุก UC
AC-WEB-G04	Mobile Responsive ผ่าน Google Mobile-Friendly Test	UC-H01
AC-WEB-G05	OTP สำเร็จ ≥ 99% (สมัคร + Login + เปลี่ยนข้อมูล)	UC-D02, D03, E02
AC-WEB-G06	Cart Templates ใช้งานได้ครบทั้งของฉัน + ของ Marketing	UC-B03, E06
AC-WEB-G07	Loyalty: สะสม-แลก-ใช้คูปอง-สิทธิ์วันเกิด ทำงานครบ	UC-F01-F04

16. ประเด็นเปิดและความเสี่ยง

รหัส	ประเด็น / ความเสี่ยง
Q-WEB-001	อัตราส่วนคะแนนต่อบาท รอฝ่ายการตลาด
Q-WEB-002	เปอร์เซ็นต์เงินมัดจำ Pre-Order P-01
Q-WEB-003	อายุใบเสนอราคา (วัน) รอยืนยัน
Q-WEB-004	สิทธิ์พิเศษวันเกิดในแต่ละ Tier รอฝ่ายการตลาด
Q-WEB-005	เกณฑ์การได้ Reward Tier exclusive
Q-WEB-006	การรองรับภาษาอังกฤษ เฟสไหน
R-WEB-001	ความเสี่ยง: Cart Abandonment Rate สูงในขั้นตอน Checkout 4 ขั้น พิจารณาลดเป็น 3 ขั้น
R-WEB-002	ความเสี่ยง: Payment Gateway ล่ม — ต้องมี Fallback เป็นโอนเงิน
R-WEB-003	ความเสี่ยง: PDPA Compliance — ต้องมีหน้าจัดการความยินยอมและลบข้อมูล

เว็บไซต์สำหรับลูกค้า(Storefront / E-Commerce Website)

สารบัญ

สรุปกรณีการใช้งาน (Use Case Catalog)

1. ข้อมูลเอกสารและการอนุมัติ

1.1 ผู้อนุมัติเอกสาร

2. วัตถุประสงค์เชิงธุรกิจ

3. ขอบเขตของงาน

3.1 อยู่ในขอบเขต (In Scope)

3.2 ไม่อยู่ในขอบเขต (Out of Scope)

4. ผู้มีส่วนได้ส่วนเสียและบทบาทผู้ใช้งาน

5. โครงสร้างเว็บไซต์ (8 Sections)

6. กระบวนการในอนาคต (To-Be)

7. ข้อกำหนดเชิงหน้าที่ — กรณีการใช้งาน (Use Cases)

8. การออกแบบประสบการณ์ผู้ใช้ (Screen Inventory)

8.1 SCR-WEB-A01 — Homepage Layout Zones (หน้าจริง)

9. กฎเกณฑ์เชิงธุรกิจ — อ้างอิงเอกสารแม่บท

10. การเชื่อมต่อระบบภายนอก (Integration)

11. ข้อกำหนดเชิงคุณภาพ (NFR)

12. ความปลอดภัยและความเป็นส่วนตัว

13. SEO และ Analytics

14. สมมติฐานและข้อจำกัด

15. เกณฑ์การยอมรับผลงาน (Acceptance Criteria)

16. ประเด็นเปิดและความเสี่ยง

เว็บไซต์สำหรับลูกค้า
(Storefront / E-Commerce Website)