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. API: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

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)

2.3 Cập nhật giỏ hàng (Update Cart)

  • Khi người dùng thay đổi số lượng sản phẩm hoặc xóa sản phẩm khỏi giỏ hàng, họ cần nhấn vào nút Update Cart để lưu lại thay đổi.
  • Hệ thống sẽ cập nhật thông tin giỏ hàng trong cơ sở dữ liệu.

2.4 Chọn sản phẩm để thanh toán (Select Product for Checkout)

  • Người dùng có thể chọn từng sản phẩm bằng cách tick vào ô checkbox hoặc chọn tất cả sản phẩm cùng lúc.
  • Chỉ các sản phẩm được chọn mới được đưa vào quá trình thanh toán.

2.5 Tiến hành thanh toán (Proceed to Checkout)

Khi nhấn nút Proceed To Checkout:

  • Hệ thống sẽ lưu thông tin giỏ hàng hiện tại của người dùng.
  • Chuyển sang trang xác nhận đơn hàng.
  • Hiển thị thông báo xác nhận đơn hàng đã được đặt thành công.

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.

3. API Endpoint

vàuser_product_pattern_3d_map_historyởDBEcom
Phương thức Route Mô tả
GET /api/v1/auth/post/save-user-product-pattern-3d-mapget/shop-order Lấy dữ liệu mẫugiỏ nónhàng từ API ở src TTD sang Ecomdatabase
POST /api/v1/auth/post/run/job/save-user-product-pattern-3d-mapshop-order Lưu/Update mẫu nóndữ liệu giỏ hàng vào bảng:user_product_pattern_3d_mapdatabase
POST /api/v1/auth/post/shop-order/update Cập khinhật Lưu/Updategiỏ mẫhàng (thay đổi số lượng, xóa)
POST/api/v1/auth/post/shop-order/checkoutXử lý thanh toán giỏ hàng

4. Cấu nóntrúc mớidữ từliệu APIgiỏ hàng

4.1 Bảng ecom.shop-order

  • Chứa thông tin ID của TTDngười dùng.
Trường (EN)Ý nghĩaMô tả
user_idID người dùngID của người đặt hàng
created_atNgày tạoNgày đơn hàng được tạo
updated_atNgày cập nhậtNgày đơn hàng được cập nhật
deleted_atNgày xóaNgày đơn hàng được xóa

2.4.2 MôBảng tả giao diện:ecom.shop-order-details

2.1. Ảnh

  • Chứa Field:chi ``tiết các sản phẩm trong đơn hàng của ngừoi dùng.
CộtDB:``
  • Hiể ả cầu:Nếucóả fieldvề
    Trường (EN)Ý nghĩaMô tả:
    shop-order_idID đơn thịhàng ID của đơn hàng
    product_idID sản phẩmID của sản phẩm
    priceGiá gốcGiá 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 từđó 3D.(price
  • * Yêuquantity)
    		•
    is_checkout Đặt hàngĐánh thì hiển thị ảnh, không có ảnh thì hiển thị No Images

    2.2. Têndấu sản phẩm

      đã
    • được Hiểthanh toán thị:chưa
    Lấcreated_atNgày từtạo Ngày nameđơn ởhàng apiđược trảtạo
    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 hàng được xóa

    DB-Bảng-5. Giao diện giỏ hàng

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

    TTD-product_pattern_info-name
    • cầu:
  • Ví dụ: 
    GF-Style 1 (2018)

    • 2.3. Mô tả
    Trường (EN)Trường (VI)Cột DB:DB Mô tả:
    Product Sản phẩmproduct_idHiển thị têsản phẩm trong giỏ hàng
    Unit PriceĐơn giápriceGiá sản phẩm đơn lẻ
    QuantitySố lượngquantitySố lượng sản phẩm trong giỏ
    SubtotalTạm tínhtotal_priceTổng tiền của sản phẩm.m
  • trong giỏ
    • YêuRemove 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)

    • Hiểnthị:từdescription ở api trả về
    • DB-Bảng-
      • TTD-product_pattern_info-description
      • Hiể Vídụ:
      Trường Lấy(EN) Trường field(VI) Cột DB:DB Mô tả:
      Subtotal Tạm tínhKhôngTổng tiền thị mô tả của tất cả sản phẩm.m
    • đã chọn
      • YêShippingPhí vận chuyểnKhôngPhí vận chuyển (nếu cầu:có)
      Total Tổng
    • cộng
      		•  Không Tổng 
      Snapbackgiá 5trị múi lưới - 58.5 cm

      2.4. Phâđơn tranghàng sau phí vận chuyển

      6. Tóm tắt

      • Người Input: Select số lươdùng muốn phân trang từ ô Show
      • DB-Bảng-Cột DB:
      • Mô tả: User có thể chọthêm sản sốphẩm lượvào giỏ hàng item để phân trang theo ý muốn.Có 3 mức phân trang mặc định: 30-50-100 items
      • Output: Thanh phân trang hiển thị phía dướitừ danh sách sản phẩm theohoặc trang chi tiết sản phẩm.
      • Giỏ hàng có thể cập nhật số itemslượ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 đã chọnđịnh nghĩa.

      3. Ref Task:task: #1236-Chi#1239 - QA

    Back to top