Skip to main content

TMS-1236: Danh sách sản phẩm

Tài liệu mô tả danh sách sản phẩm trên trang web

1. Mô tả tổng quan

Trang danh sách sản phẩm là trang dùng để hiển thị tất cả sản phẩm mẫu nón. Tại đây, người dùng có thể:

  • Xem danh sách sản phẩm mẫu nón.
  • Tìm kiếm sản phẩm muốn xem.
  • Thêm sản phẩm vào danh sách yêu thích.
  • Thêm sản phẩm vào giỏ hàng
  • Xem chi tiết của sản phẩm.

2. Các chức năng và luồng hoạt động

2.1 Xem danh sách sản phẩm mẫu nón

  • Khi vừa đăng nhập xong/vừa vào trang web và đang ở trên HomePage, để chuyển đến trang danh sách sản phẩm thì người dùng cần click vào option Products trên thanh header.
  • Khi vào trang sẽ hiển thị toàn bộ danh sách sản phẩm theo dạng phân trang (paginate), tại đây người dùng có thể click vào từng trang để xem sản phẩm theo mỗi trang
  • Mỗi component chứa sản phẩm sẽ bao gồm các thông tin như Tên sản phẩm, Mô tả sản phẩm, button Add to cart, nhóm button chức năng nằm bên phải component ( bao gồm button Add to wishlist và quickview) ,hình ảnh sản phẩm ( nếu sản phẩm có hình thì sẽ hiển thị hình ảnh sản phẩm,nếu không thì hiển thị No Images) và phần label Giá bán sẽ mặc định để text Liên hệ
  • Phía dưới trang sản phẩm sẽ có 1 thanh paginate dữ liệu , người dùng có thể chọn số lượng items hiển thị trên 1 trang ở component Filters phía trên trang danh sách ( đang mặc định có 3 option là 30, 50 và 100 items và nếu không chọn thì mặc định paginate 30), lúc này dựa vào sự lựa chọn của user mà số lượng trang dưới thanh paginate sẽ được hiển thị, khi click chọn vào trang nào thì dữ liệu của trang đó sẽ được hiển thị ra.Ví dụ user chọn 50 items, đang có 100 dữ liệu trong database -> thì sẽ hiển thị 2 trang dưới thanh paginate, đồng thời phần Showing(a)-of(b) results lúc này sẽ là Showing 1-of 2 results, nếu chọn trang 2 để xem dữ liệu thì sẽ là Showing 2- of 2 results.

2.2 Tìm kiếm sản phẩm

  • Có 2 cách:

    • Cách 1: Tìm kiếm trên ô select và ô input trên thanh header

    -Trên thanh header cho phép người dùng tìm kiếm theo danh mục sản phẩm (trong ô select) và tên/mã sản phẩm trên ô input kế bên ô select. Khi chọn dữ liệu trong ô select/ nhập dữ liệu tên/mã trong ô input rồi ấn enter thì trang sẽ hiển thị toàn bộ sản phẩm liên quan đến những gì người dùng chọn

    • Cách 2: Tìm kiếm bằng bộ lọc (Filters)

    -Trên component Filters ( bao gồm các button : All Filters, Text Showing(a)-of(b)results, option Sort by và option Show) khi click vào button All Filters sẽ hiển thị 1 bộ lọc, trong đó sẽ có lọc dữ liệu theo các nhóm như : Kiểu nón, Chi nhánh, Nguyên phụ liệu, Logo và Thời gian vận chuyển. Chọn dữ liệu muốn lọc bằng cách click chuột vào các checkbox chứa giá trị muốn chọn. Trường hợp các nhóm dữ liệu có nhiều hơn 11 dữ liệu thì sẽ hiển thị thêm text Others, khi click vào sẽ hiển thị component Others, trong component này khi scroll xuống sẽ hiển thị đầy đủ dữ liệu của nhóm dữ liệu đó. Khi muốn xóa tất cả bộ lọc trên component thì click vào button Reset Filters, còn khi muốn xác nhận chọn bộ lọc đó thì click vào button Confirm ( trên modal Others) hoặc button Apply Filters , lúc này trang sẽ tiến hành lọc toàn bộ dữ liệu theo những giá trị đã chọn -Khi click vào option Sort by thì dữ liệu trên trang sẽ được sắp xếp theo thứ tự đã chọn ( hiện tại có 2 loại cho Sort by là Cũ nhất và Mới nhất, tức là trang sẽ sắp xếp sản phẩm theo Cũ nhất hoặc Mới nhất lên đầu trang) -Khi click vào option Show thì dữ liệu trên trang sẽ được paginate theo option đã chọn

2.3 Thêm sản phẩm vào danh sách yêu thích

  • Trên mỗi component chứa thông tin sản phẩm ở phía góc tay phải sẽ có nhóm nút chức năng, trên đó có nút Add to wishlist, khi click vào thì sản phẩm đó sẽ được thêm vào Danh sách yêu thích. Khi thêm thành công thì biểu tượng wishlist trên thanh header sẽ được cập nhật số lượng

2.4 Xem chi tiết sản phẩm

  • Cách 1: Click vào từng component chứa sản phẩm để mở ra modal chi tiết sản phẩm
  • Cách 2: Trên component Swiper ngay phía dưới thanh header có thể click vào ảnh/tên sản phẩm để chuyển sang trang chi tiết sản phẩm

2.5 Thêm sản phẩm vào giỏ hàng

  • Khi chọn button Add to cart trên component chứa sản phẩm thì sản phẩm đó sẽ được thêm vào giỏ hàng, tương tự danh sách yêu thích, lúc này biểu tượng giỏ hàng trên thanh header sẽ được cập nhật số lượng khi thêm mới sản phẩm vào giỏ

2.6 Xóa sản phẩm trong giỏ hàng

Khi nhấn nút icon thùng rác ở mỗi dòng:

  • Hệ thống sẽ tiến hành xóa sản phẩm đó ở giỏ hàng trên máy.
  • Bấm update cart để tiến hành cập nhật các thay đổi ở giỏ hàng của máy lên database.
  • Hiển thị thông báo xác nhận đơn hàng đã được cập nhật thành công.

2.7 Chức năng trở về đầu trang

  • Khi lướt trang danh sách xuống dưới sẽ có 1 button scroll to top hiển thị ở góc dưới cùng bên phải của trang, click vào sẽ chuyển về đầu trang
  • Khi lướt xuống dưới trang danh sách thì phần header cũng được giữ lại

2.8 Swiper

  • Khi click vào button sang trái hay phải thì slide chứa sản phẩm sẽ trượt qua và hiển thị sản phẩm trong slide phía trước/ phía sau.Mỗi slide mặc định 3 sản phẩm

3. API Endpoint

Phương thức Route Mô tả
GET /api/v1/auth/get/products Lấy danh sách sản phẩm từ database
GET /api/v1/auth/get/list-hat-styles Lấy danh sách mẫu nón từ database
GET /api/v1/auth/get/list-material-styles Lấy danh sách nguyên phụ liệu từ database
GET /api/v1/auth/get/list-branch Lấy danh sách chi nhánh từ database
GET /api/v1/auth/get/list-logo Lấy danh sách logo từ database
GET /api/v1/auth/get/list-delivery Lấy danh sách mẫu nón từ database
GET /api/v1/auth/get/list-product-category Lấy danh sách danh mục của mẫu nón từ database

4. Cấu trúc dữ liệu giỏ hàng

4.1 Bảng ecom.shop-orderecom_summary.product_patterns_summary

  • ChứaLưu đồng bộ thông tin ID củgiữa ngườimẫu dùng.nón ở TTD và ecom.
hàngmẫu
Trường (EN)Fields Ý nghĩa Mô tả
user_idproduct_id ID ngườimẫu dùngnón ID mẫu nón từ TTD
delivery_time_idID thời gian vận chuyểnID thời gian vận chuyển của ngưmẫu nón
company_branch_idID chi nhánhID chi nhánh của mẫu nón
material_idID nguyên phụ liệuID nguyên phụ liệu của mẫu nón
hat_modelsKiểu nónKiểu nón của mẫu nón
product_category_idID danh mụcID danh mục của mẫu nón
codeCode mẫu nónCode của mẫu nón
nameTên mẫu nónTên của mẫu nón
descriptionMô tảMô tả của mẫu nón
size_idID kích thướcID kích thước của mẫu nón
size_codeCode kích thướcCode của kích thước mẫu nón
size_nameTên kích thướcTên của kích thước mẫu nón
logo_idID logoID logo của mẫu nón
logo_codeCode logoCode của logo mẫu nón
logo_nameTên logoTên của logo mẫu nón
color_idID màuID màu của mẫu nón
color_codeCode màuCode của màu mẫu nón
color_nameTên màuTên của màu mẫu nón
style_idID styleID style của mẫu nón
style_codeCode styleCode của style mẫu nón
style_nameTên styleTên của style mẫu nón
video_pathĐường dẫn videoĐường dẫn video của mẫu nón
image_3d_pathĐường dẫn ảnh 3DĐường dẫn ảnh 3D của mẫu nón
creator_idNgười đặttạo Người tạo mẫu nón
created_at Ngày tạo Ngày đơn hàng được tạo mẫu nón
updated_at Ngày cập nhật Ngày đơn hàng được cập nhật
deleted_atNgày xóaNgày đơnón hàng được xóa

4.2 Bảng ecom.shop-order-detailsdelivery_time

  • ChứaBảng chimaster tiếtlưu cácthông sảtin thời gian vận phẩm trong đơchuyển hàngmẫu của ngừoi dùng.non
Trường (EN)Fields Ý nghĩa Mô tả
shop-order_idcode ID đơn hàngCode IDCode của đơmỗi khung thời gian vận hàngchuyển
product_idmin_days IDNgày sảngắn phẩmnhất IDNgày củagiao sảnhàng phẩsớm nhất
pricemax_days GiáNgày gốcchậm nhất GiáNgày sản phẩm
quantitySố lượngSố lượng sản phẩm
total_priceTạm tínhTổng giá của sản phẩm đó (price * quantity)
is_checkoutĐặtgiao hàng Đánh dấu sản phẩchậm đã được thanh toán chưanhất
created_at Ngày tạo Ngày đơtạo thời gian vận hàng được tạochuyển
updated_at Ngày cập nhật Ngày đơn hàng được cập nhật thời gian vận chuyển
deleted_at Ngày xóa Ngày đơxóa thời gian vận hàchuyển
  • Bảng master lưu thông tin logo của mẫu non
FieldsÝ nghĩaMô tả
codeCodeCode của logo
nameTênTên của logo
created_atNgày tạoNgày tạo logo
updated_atNgày cập nhậtNgày cập nhật logo
deleted_atNgày xóaNgày xóa logo

4.4 Bảng ecom.product_categories

  • Bảng master lưu thông tin danh mục của mẫu non
FieldsÝ nghĩaMô tả
codeCodeCode của danh mục
nameTênTên của danh mục
user_idNgười tạoNgười tạo danh mục
created_atNgày tạoNgày tạo danh mục
updated_atNgày cập nhậtNgày cập nhật danh mục
deleted_atNgày xóaNgày xóa danh mục

5. Giao diện giỏ hàng

5.1 Danh sách sản phẩm trong giỏ hàng

Trường (EN) Trường (VI) Cột DB Mô tả
Product Sản phẩm product_id Hiển thị sản phẩm trong giỏ hàng
Unit Price Đơn giá price Giá sản phẩm đơn lẻ
Quantity Số lượng quantity Số lượng sản phẩm trong giỏ
Subtotal Tạm tính total_price Tổng tiền của sản phẩm trong giỏ
Remove Xóa Không Xóa sản phẩm khỏi giỏ hàng

5.2 Tổng giá trị giỏ hàng (Checkout Summary)

Trường (EN) Trường (VI) Cột DB Mô tả
Subtotal Tạm tính Không Tổng tiền của tất cả sản phẩm đã chọn
Shipping Phí vận chuyển Không Phí vận chuyển (nếu có)
Total Tổng cộng Không Tổng giá trị đơn hàng sau phí vận chuyển

6. Tóm tắt

  • Người dùng có thể thêm sản phẩm vào giỏ hàng từ danh sách sản phẩm hoặc trang chi tiết sản phẩm.
  • Giỏ hàng có thể cập nhật số lượng sản phẩm, xóa sản phẩm, và chọn sản phẩm để thanh toán.
  • Sau khi chọn sản phẩm, người dùng có thể tiến hành thanh toán và lưu đơn hàng.
  • Dữ liệu giỏ hàng được lưu vào cơ sở dữ liệu thông qua các API đã định nghĩa.

Ref task: #1239 - QA

Back to top