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 ~~tại bất kỳ trang danh sách sản phẩm hoặc chi tiết sản phẩm nào,~~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)

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.

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.

Note: Phần summary checkout hiện đang được ẩn trên app mobile chờ cập nhật.