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.
- Chọn các thông tin của sản phẩm: color, size, styles, material, logo(có thể chọn hoặc không).
- 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
Note: Các dữ liệu thông tin của sản phẩm (color, size, styles, material, logo) hiện tại đang được map thủ công. Hướng dẫn cách map dữ liệu: Hướng dẫn map dữ liệu dành cho sản phẩm
2.1 Review giỏ hàng
Khi người dùng nhấn nút Add To Cart thì sản phẩm đó sẽ được thêm vào giỏ hàng và có thể xem nhanh tại phần review của giỏ hàng.
- Tại bất kỳ trang danh sách sản phẩm nào hoặc tại danh sách yêu thích: modal hiện lên để người dùng chọn các thông tin chi tiết của sản phẩm như size, logo, color, style, material, cuối cùng nhấn
saveđể thêm sản phẩm - Tại trang chi tiết sản phẩm: vì đã có chọn thông tin từ trang chi tiết nên sản phẩm nên không hiển thị modal nữa. Khi bấm Add To Cart là sản phẩm sẽ được thêm
Tại đây người dùng có thể:
- Xem nhanh các sản phẩm đang có trong giỏ hàng theo tiêu chí mới đến cũ: 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) - 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 thì sản phẩm đó sẽ được thêm vào giỏ hàng và có thể xem nhanh tại phần review của giỏ hàng.
- Tại bất kỳ trang danh sách sản phẩm nào hoặc tại danh sách yêu thích: modal hiện lên để người dùng chọn các thông tin chi tiết của sản phẩm như size, logo, color, style, material, cuối cùng nhấn
saveđể thêm sản phẩm - Tại trang chi tiết sản phẩm: vì đã có chọn thông tin từ trang chi tiết nên sản phẩm nên không hiển thị modal nữa. Khi bấm Add To Cart là sản phẩm sẽ được thêm
- Sản phẩm sẽ xuất hiện trong giỏ hàng theo tiêu chí mới đến cũ 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 cùng với các chi tiết của sản phẩm: color, size, style, logo, material.
- Các sản phẩm giống nhau hoàn toàn về tên sản phẩm, các thông tin của sản phẩm như size, logo, color, style, material thì tính là cùng 1 sản phẩm hiện 1 dòng, trường hợp còn lại tính là khác sản phẩm, hiện nhiều dòng.
Note: Các sản phẩm trong giỏ hàng đã được xóa sẽ được làm mờ kèm dòng thông báo "Sản phẩm đã được xóa" (đang cập nhật, chưa lên staging)
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 khi nhấn nút
Proceed To Checkout (Tiến hành thanh toán).
2.6 Thanh toán
Có 2 cách để tiến hành thanh toán (đặt hàng):
- Khi nhấn nút
Proceed To Checkout (Tiến hành thanh toán)tại trang giỏ hàng:
- Hệ thống hiển thị popop xác nhận đặt hàng những sản phẩm đã chọn trong giỏ hàng.
- Khi nhấn nút
Checkout (Thanh toán)tại review giỏ 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:
- 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 đã đặt hàng. - Nhấn
Hủy (Cancel)để trở lại, tắt popup và không đặt hàng.
Trang xác nhận đã đặt hà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.
2.8 Chuyển đến trang chi tiết sản phẩm
- Tại trang giỏ hàng, nhấn vào hình ảnh sản phẩm hoặc tên sản phẩm, có thể chuyển đến trang chi tiết sản phẩm.
2.9 Chọn chi tiết cho sản phẩm (color, size, style, logo, material)
- Phần chi tiết sản phẩm (color, size, style, logo, material) sẽ được hiện ở bên dứoi tên sản phẩm, khi nhấn vào dropdown mở ra cho phép ngừoi dùng lựa chọn:
- Các sản phẩm tên giống nhau nhưng chi tiết khác nhau sẽ được hiện độc lập ở giỏ hàng (ít nhất 1 chi tiết khác nhau cũng khác nhau -> 2sản phẩm)
- Nếu giống nhau toàn bộ về sản phẩm và thông tin chi tiết sản phẩm thì tính là 1 sản phẩm.
- Tương tự như ở chi tiết sản phẩm, tại đây ngừoi dùng có thể chọn thay đổi color, size, style, logo, material của sản phẩm hiện tại:
- Đối với color, size, style: người dùng nhấp vào các ô tên/mã color, size, style tương ứng để chọn chi tiết cho sản phẩm, mỗi chi tiết chỉ được chọn 1 ô tương ứng.
- Đối với logo, material: ngừoi dùng chọn vào ô select, các mã/tên của logo, material tương ứng sẽ hiện lên cho phép chọn, chỉ được chọn 1 lựa chọn cho mỗi logo, material.
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ả | Tên cột/bảng dữ liệu tham chiếu |
|---|---|---|---|
user_id |
ID người dùng | ID của người đặt hàng | Cột id trong bảng ecom.users |
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 bị xóa mềm (Soft Delete) |
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ả | Tên cột/bảng dữ liệu tham chiếu |
|---|---|---|---|
shop-order_id |
ID đơn hàng | ID của đơn hàng | Cột id trong bảng ecom.shop-order |
product_id |
ID sản phẩm | ID của sản phẩm | Cột product_id trong bảng ecom_summary.product_patterns_summary |
color_id |
ID màu | ID màu | Cột id trong bảng ecom.colors |
size_id |
ID kích thước | ID kích thước | Cột id trong bảng ecom.size |
style_id |
ID kiểu nón | ID kiểu nón | Cột id trong bảng ecom.style |
logo_id |
ID logo | ID logo | Cột id trong bảng ecom.logo |
material_id |
ID của vật tư | ID của sản phẩm | Cột id trong bảng ecom.materials |
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 hiển thị trong trang giỏ hàng
| Trường (EN) | Trường (VI) | Cột DB | Tên DB | Mô tả |
|---|---|---|---|---|
| Product | Sản phẩm | name |
ecom_summary.product_patterns_summary |
Hiển thị tên sản phẩm trong giỏ hàng |
| Product | Sản phẩm | image_3d_path |
ecom_summary.product_patterns_summary |
Hiển thị hình ảnh sản phẩm trong giỏ hàng |
| Color | Màu sắc | name |
ecom.colors |
Hiển thị màu sắc sản phẩm trong giỏ hàng |
| Size | Kích thước | name |
ecom.size |
Hiển thị kích thước sản phẩm trong giỏ hàng |
| Style | Kiểu | name |
ecom.style |
Hiển thị kiểu sản phẩm trong giỏ hàng |
| Logo | Logo | name |
ecom.logo |
Hiển thị logo sản phẩm trong giỏ hàng |
| Material | Nguyên phụ liệu | name |
ecom.materials |
Hiển thị nguyên phụ liệu của sản phẩm trong giỏ hàng |
| Unit Price | Đơn giá | price |
Giá sản phẩm đơn lẻ (không có để contact-liên hệ) |
|
| Quantity | Số lượng | quantity |
Số lượng sản phẩm trong giỏ (4 số) | |
| Subtotal | Tạm tính | total_price |
Tổng tiền của sản phẩm trong giỏ (không có để contact-liên hệ) |
|
| Remove | Xóa | Không | Xóa sản phẩm khỏi giỏ hàng |
5.2 Tổng giá trị hiển thị trên trang 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 (không có để contact-liên hệ) |
| 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 (không có để contact-liên hệ) |
6. Tóm tắt
- Người dùng có thể thêm sản phẩm vào giỏ hàng và thêm vào review 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, chọn sản phẩm để thanh toán và chuyển đến trang chi tiết sản phẩm.
- Giỏ hàng còn có thể cho phép chọn, cập nhật các chi tiết của sản phẩm như: size, logo, style, material, color.
- Review giỏ hàng có thể xem nhanh các sản phẩm có trong giỏ hàng, tiến hành thanh toán nhanh tất cả sản phẩm có trong giỏ hàng, chuyển đến trang chi tiết sản phẩm, chuyển đến trang giỏ hàng.
- Sau khi chọn sản phẩm, người dùng có thể tiến hành thanh toán.
- 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.