Skip to main content

TMS-1239: Cart - Giỏ hàng

Tài liệu mô tả giỏ hàng trên trang web

1. Mô tả tổng quan

Trang giỏ hàng là nơi hiển thị danh sách các sản phẩm mà người dùng đã chọn để mua. Tại đây, người dùng có thể:

  • Xem danh sách sản phẩm đã thêm vào giỏ.
  • Điều chỉnh số lượng sản phẩm.
  • Xóa sản phẩm khỏi giỏ hàng.
  • Tiến hành thanh toán.
  • Lưu trạng thái giỏ hàng.

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

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

Khi người dùng nhấn nút Add To Cart tại bất kỳ trang danh sách sản phẩm hoặc chi tiết sản phẩm nào, sản phẩm đó sẽ được thêm vào phần review của giỏ hàng. Tại đây người dùng có thể:

  • Xem nhanh các sản phẩm đang có trong giỏ hàng: tên, hình ảnh, số lượng, giá (nếu có).
  • Xem tổng tiền của các sản phẩm (nếu có giá cả của sản phẩm).
  • Vào trang giỏ hàng bằng cách nhấn View cart (Xem giỏ hàng)
  • Thanh toán nhanh tất cả sản phẩm có trong giỏ hàng, nhấn Checkout (Thanh toán), hệ thống hiển thị popup xác nhận.
    • Nhấn Xác nhận (Confirm ) để đặt hàng, sau đó chuyển sang trang xác nhận đơn hàng.
    • Nhấn Hủy (Cancel) để trở lại.
  • Chuyển đến trang chi tiết sản phẩm bằng cách nhấn vào tên sản phẩm.

2.2 Thêm sản phẩm vào giỏ hàng (Add to Cart)

  • Khi người dùng nhấn nút Add To Cart tại bất kỳ trang danh sách sản phẩm hoặc chi tiết sản phẩm nào, sản phẩm đó sẽ được thêm vào giỏ hàng.
  • Sản phẩm sẽ xuất hiện trong giỏ hàng cùng với các thông tin chi tiết như tên, giá, số lượng, tổng tiền, v.v.

2.3 Tiếp tục mua sắm (Continue Shopping)

  • Khi người dùng nhấn vào nút Continue Shopping, hệ thống sẽ đưa họ trở lại trang danh sách sản phẩm để tiếp tục mua hàng.

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

  • Nhấn nút "Cập nhật giỏ hàng": Khi đã đăng nhập, các thao tác trên giỏ hàng (thêm, xóa, chỉnh sửa số lượng,...) chỉ được lưu lại và áp dụng chính thức khi người dùng nhấn nút "Cập nhật giỏ hàng" trên trang giỏ hàng.
  • Không nhấn nút "Cập nhật giỏ hàng": Các thay đổi chỉ được lưu tạm thời trên thiết bị đang sử dụng. Nếu người dùng đăng nhập trên một thiết bị khác, giỏ hàng sẽ không có những thay đổi đã thực hiện trên thiết bị trước đó.

2.5 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.n khi nhấn nút Proceed To Checkout (Tiến hành thanh toán).

2.6 TiếThanh toán

Có 2 cách để tiến hành thanh toán (Proceedđặt tohàng):

Checkout)

  1. Khi nhấn nút Proceed To Checkout (Tiến hành thanh toán):

     tại trang giỏ hàng:
  • Hệ thống sẽhiển lưuthị thôpopop xác nhận đặt hàng tin checkout những sản phẩm đã chọn trong giỏ hàngng.
    • hiệ
  1. Khi nhấn nút Checkout (Thanh toán) tại củareview ngườigiỏ dùhàng:
  • Hệ thống hiển thị popop xác nhận đặt hàng tất cả các sản phẩm trong giỏ hàng.

Popup xác nhận:

  • ChuyểNhấn Xác nhận (Confirm ) để đặt hàng, thông báo thành công hệ thống sẽ lưu các thông tin sản phẩm đã đặt hàng, sau đó chuyển sang trang xác nhận đơnã đặt hàng.
  • HiểNhấn thịHủy thô(Cancel) để trở lại, tắt popup và không báođặt hàng.

Trang xác nhận đơn hàng đã được đặt thànhhàng:

công.
  • Sau 15s tự chuyển sang trang sản phẩm để tiếp tục mua sắm
  • Nhấn Tiếp tục mua sắm để chuyển sang trang sản phẩm để tiếp tục mua sắm

2.7 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

Phương thức Route Mô tả
GET /api/v1/auth/get/shop-order Lấy dữ liệu giỏ hàng từ database
POST /api/v1/auth/post/shop-order/save Lưu dữ liệu giỏ hàng vào database
POST /api/v1/auth/post/shop-order/update Cập nhật giỏ hàng (thay đổi số lượng, xóa)
POST /api/v1/auth/post/shop-order/checkout Xử lý thanh toán giỏ hàng

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

4.1 Bảng ecom.shop-order

  • Chứa thông tin ID của người dùng.
Trường (EN) Ý nghĩa Mô tả
user_id ID người dùng ID của người đặt hàng
created_at Ngày tạo Ngày đơn hàng được tạo
updated_at Ngày cập nhật Ngày đơn hàng được cập nhật
deleted_at Ngày xóa Ngày đơn hàng được xóa

4.2 Bảng ecom.shop-order-details

  • Chứa chi tiết các sản phẩm trong đơn hàng của ngừoi dùng.
Trường (EN) Ý nghĩa Mô tả
shop-order_id ID đơn hàng ID của đơn hàng
product_id ID sản phẩm ID của sản phẩm
price Giá gốc Giá sản phẩm
quantity Số lượng Số lượng sản phẩm
total_price Tạm tính Tổng giá của sản phẩm đó (price * quantity)
is_checkout Đặt hàng Đánh dấu sản phẩm đã được thanh toán chưa
created_at Ngày tạo Ngày đơn hàng được tạo
updated_at Ngày cập nhật Ngày đơn hàng được cập nhật
deleted_at Ngày xóa Ngày đơn hàng được xóa

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