Hướng dẫn Thêm Sản Phẩm Mới (Web Admin)

Đối tượng: Business Admin
Route: /products/add
Cập nhật: 2026-04-21

1. Truy cập trang Thêm sản phẩm

1. Đăng nhập vào trang Admin (admincheckprovn)
2. Từ thanh bên, chọn Sản phẩm → Danh sách sản phẩm (/products/list)
3. Nhấn nút "+ Thêm sản phẩm" ở góc phải trên → chuyển đến /products/add

2. Giao diện tổng quan

Trang thêm sản phẩm chia làm 6 tab, mỗi tab chứa nhóm thông tin khác nhau:

3. Hướng dẫn từng Tab

Tab 1: Thông tin chung

Cột trái (chiếm 2/3 màn hình)

Cột phải (thanh bên)

• Trạng thái: Chọn từ danh sách thả xuống

  • Bản nháp (mặc định): Sản phẩm chưa công khai
  • Hoạt động: Sản phẩm công khai (hệ thống tự xử lý duyệt nếu cần)
  • Không hoạt động: Tạm ngừng kinh doanh

• Mã sản phẩm (SKU Code): Để trống hệ thống tự tạo dạng PRD-2026-XXXX, hoặc nhập mã tùy chỉnh (duy nhất trong tổ chức)

Lưu ý về trạng thái "Hoạt động":

• Nếu hệ thống bật Tự động duyệt → sản phẩm Hoạt động ngay
• Nếu tắt Tự động duyệt → hệ thống tự chuyển sang "Chờ duyệt", Master Admin phải phê duyệt

Card Mẫu mã mặc định (bên dưới)

Mỗi sản phẩm tạo mới sẽ tự động có 1 mẫu mã mặc định và 1 phiên bản đầu tiên (r1.0).

Mẫu mã mặc định:

Phiên bản đầu tiên (r1.0):

• Hiển thị bên dưới mẫu mã với đường viền trái xanh
• Nhấn nút "Chỉnh sửa" để mở hộp thoại chỉnh sửa:
  • Tên phiên bản (mặc định: "Nguyên bản")
  • Ngày hiệu lực
  • Thành phần
  • Thông số kỹ thuật
  • Tải lên ảnh phiên bản (ảnh bao bì)

Tab 2: Hình ảnh

Ảnh sản phẩm chung:

• Kéo thả hoặc nhấn để tải lên nhiều ảnh
• Nhấn vào ảnh để đặt làm ảnh đại diện (primary)
• Định dạng: JPG, PNG, GIF — khuyến nghị ≤ 5MB/ảnh

Ảnh mẫu mã:

• Nếu đã tải lên ảnh phiên bản (trong hộp thoại r1.0 ở Tab 1), ảnh sẽ hiển thị tại đây với khung viền xanh lá kèm huy hiệu "Mẫu mã"
• Khi mẫu mã đã có ảnh, dấu * (bắt buộc) ở ảnh sản phẩm sẽ ẩn đi

Quy tắc: Bắt buộc có ít nhất 1 ảnh (ảnh sản phẩm HOẶC ảnh mẫu mã)

Tab 3: Sản xuất & Khác

Tab 4: Truy xuất & OCOP

Tiêu chuẩn chất lượng:

• Chọn nhiều tiêu chuẩn từ danh sách (ISO, HACCP, Organic, GMP...)
• Hỗ trợ tìm kiếm keyword
• Ngăn chọn trùng lặp

Chứng nhận OCOP (tùy chọn):

Tab 5: Nội dung

Rich-text (CKEditor):

• Thông tin sản phẩm: Mô tả chi tiết sản phẩm
• Quy trình sản xuất: Mô tả quy trình
• Yêu cầu kỹ thuật: Thông số kỹ thuật chi tiết
• Câu chuyện sản phẩm: Backstory, thông tin thương hiệu

Các editor hỗ trợ: Bold, Italic, List, Link, Table, Image, Heading...

Thuộc tính đặc thù (Custom Attributes):

• Bảng dạng key-value tùy chỉnh
• Ví dụ: Nồng độ cồn → 12%, Dung tích → 750ml, Vùng trồng → Đà Lạt
• Tối đa 20 thuộc tính
• Nhấn "+ Thêm" để thêm dòng mới
• Nhấn icon 🗑️ để xóa dòng

Tab 6: Cấu hình QR

Tùy chỉnh thông tin nào hiển thị khi người tiêu dùng quét mã QR sản phẩm:

4. Lưu sản phẩm

1. Sau khi điền đủ thông tin bắt buộc:

   • ✅ Tên sản phẩm
   • ✅ Danh mục
   • ✅ Ít nhất 1 ảnh (sản phẩm hoặc mẫu mã)

2. Nhấn nút "Lưu sản phẩm" (góc phải trên)

3. Hệ thống sẽ:

   • Tạo sản phẩm + mẫu mã DEFAULT + phiên bản r1.0 (atomic, cùng 1 giao dịch)
   • Tải lên ảnh sản phẩm (song song)
   • Tải lên ảnh phiên bản (tuần tự, nếu có)
   • Hiển thị thông báo thành công
   • Tự động chuyển đến trang Chỉnh sửa sản phẩm (/products/{id}/edit)

5. Xử lý lỗi thường gặp

6. Mẹo sử dụng

1. Để trống SKU Code → hệ thống tự tạo mã dạng PRD-2026-XXXX (duy nhất, retry tối đa 5 lần)
2. Chọn "Bản nháp" trước khi hoàn thiện thông tin → chuyển sang "Hoạt động" sau khi kiểm tra
3. Tải lên ảnh mẫu mã nếu muốn hiển thị ảnh bao bì riêng cho từng phiên bản
4. Thuộc tính đặc thù giúp bổ sung thông tin riêng biệt mà biểu mẫu không có sẵn (VD: nồng độ, vùng trồng)
5. Cấu hình QR (Tab 6) quyết định người tiêu dùng sẽ thấy gì khi quét mã — tùy chỉnh theo nhu cầu