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
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
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 danh sách sản phẩm
- Ecom: materials <-> TTD: product_summary (Tạo mới/ cập nhật NPL / Duyệt PYC thay đổi thông tin NPL)
- Ecom: logo <-> TTD: order_logo (Tạo mới/ cập nhật / import đơn hàng khách hàng)
- Ecom: hat_model, size, color (Tạo mới/ cập nhật / import mẫu nón)
4.1 Bảng ecom_summary.product_patterns_summary
- Lưu đồng bộ thông tin giữa mẫu nón ở TTD và ecom.
| Fields |
Ý nghĩa |
Mô tả |
product_id |
ID mẫu nón |
ID mẫu nón từ TTD |
delivery_time_id |
ID thời gian vận chuyển |
ID thời gian vận chuyển của mẫu nón |
company_branch_id |
ID chi nhánh |
ID chi nhánh của mẫu nón |
material_id |
ID nguyên phụ liệu |
ID nguyên phụ liệu của mẫu nón |
hat_models |
Kiểu nón |
Kiểu nón của mẫu nón |
product_category_id |
ID danh mục |
ID danh mục của mẫu nón |
code |
Code mẫu nón |
Code của mẫu nón |
name |
Tên mẫu nón |
Tên của mẫu nón |
description |
Mô tả |
Mô tả của mẫu nón |
size_id |
ID kích thước |
ID kích thước của mẫu nón |
size_code |
Code kích thước |
Code của kích thước mẫu nón |
size_name |
Tên kích thước |
Tên của kích thước mẫu nón |
logo_id |
ID logo |
ID logo của mẫu nón |
logo_code |
Code logo |
Code của logo mẫu nón |
logo_name |
Tên logo |
Tên của logo mẫu nón |
color_id |
ID màu |
ID màu của mẫu nón |
color_code |
Code màu |
Code của màu mẫu nón |
color_name |
Tên màu |
Tên của màu mẫu nón |
style_id |
ID style |
ID style của mẫu nón |
style_code |
Code style |
Code của style mẫu nón |
style_name |
Tên style |
Tê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_id |
Người tạo |
Người tạo mẫu nón |
created_at |
Ngày tạo |
Ngày tạo mẫu nón |
updated_at |
Ngày cập nhật |
Ngày cập nhật mẫu nón |
4.2 Bảng ecom.delivery_time
- Bảng master lưu thông tin thời gian vận chuyển mẫu non
| Fields |
Ý nghĩa |
Mô tả |
code |
Code |
Code của mỗi khung thời gian vận chuyển |
min_days |
Ngày ngắn nhất |
Ngày giao hàng sớm nhất |
max_days |
Ngày chậm nhất |
Ngày giao hàng chậm nhất |
created_at |
Ngày tạo |
Ngày tạo thời gian vận chuyển |
updated_at |
Ngày cập nhật |
Ngày 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 chuyển |
4.3 Bảng ecom.logo
- Bảng master lưu thông tin logo của mẫu non
| Fields |
Ý nghĩa |
Mô tả |
code |
Code |
Code của logo |
name |
Tên |
Tên của logo |
created_at |
Ngày tạo |
Ngày tạo logo |
updated_at |
Ngày cập nhật |
Ngày cập nhật logo |
deleted_at |
Ngày xóa |
Ngà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ĩa |
Mô tả |
code |
Code |
Code của danh mục |
name |
Tên |
Tên của danh mục |
user_id |
Người tạo |
Người tạo danh mục |
created_at |
Ngày tạo |
Ngày tạo danh mục |
updated_at |
Ngày cập nhật |
Ngày cập nhật danh mục |
deleted_at |
Ngày xóa |
Ngày xóa danh mục |
5. Giao diện danh sách sản phẩm
5.1 Danh sách sản phẩm
| Fields(EN) |
Fields (VI) |
Cột DB |
Tên DB |
Mô tả |
| Name |
Tên sản phẩm |
name |
ecom_summary.product_patterns_summary |
Tên của mẫu nón |
| Description |
Mô tả sản phẩm |
description |
ecom_summary.product_patterns_summary |
Mô tả sản phẩm |
| Images |
Ảnh 3D của mẫu nón |
image_3d_path |
ecom_summary.product_patterns_summary |
Link ảnh 3D của mẫu nón |
| Showing |
Hiển thị |
Không có |
Không có |
Trang hiện tại người dùng đang xem |
| results |
Kết quả |
Không có |
Không có |
Tổng số trang chứa dữ liệu |
| Hat styles |
Kiểu nón |
hat_models |
dev_test_data.product_pattern_info |
Kiểu nón |
| Branch |
Chi nhánh |
name |
dev_test_auth.company_branch |
Chi nhánh |
| Material |
Nguyên phụ liệu |
name |
dev_test_data.product_details |
Nguyên phụ liệu |
| Logo |
Nguyên phụ liệu |
name |
ecom.logo |
Logo của mẫu nón |
| Delivery time |
Thời gian vận chuyển |
min_days-max_days |
ecom.delivery_time |
Thời gian giao hàng sớm nhất-Thời gian giao hàng chậm nhất |
| Select category |
Chọn danh mục |
name |
ecom.product_categories |
Các loại danh mục của mẫu nón |
| Search for code/name of items |
Tìm kiếm mã/tên sản phẩm |
name, code |
ecom_summary.product_patterns_summary |
Mã/Tên sản phẩm |
6. Tóm tắt
- Người dùng có thể xem danh sách sản phẩm, thêm sản phẩm vào danh sách yêu thích, vào giỏ hàng , xem chi tiết sản phẩm và tìm kiếm sản phẩm
7. Các chức năng đang tạm ẩn và chưa triển khai
- Chức năng so sánh sản phẩm
- Chức năng lướt xem các sản phẩm trên thanh Swiper ( hiện tại dữ liệu đang gắn cứng trên Swiper để test button chuyển trang )
- Các hình ảnh banner trên trang cũng đang được gắn cưng theo template do chưa có xác nhận về ảnh sẽ hiển thị
- Chức năng chat ( hiện tại chỉ có giao diện cho khung chat và button mở khung chat)
- Các footer hiện tại cũng đang hiển thị theo template
- Thanh sidebar bên tay trái sẽ hiển thị các mẫu nón theo từng danh mục của mẫu nón ( hiện tại thanh sidebar này vẫn đang gắn cứng dữ liệu theo template)
Ecom: materials <-> TTD: product_summary (Tạo mới/ cập nhật NPL / Duyệt PYC thay đổi thông tin NPL)
Ecom: logo <-> TTD: order_logo (Tạo mới/ cập nhật / import đơn hàng khách hàng)
Ecom: hat_model, size, color (Tạo mới/ cập nhật / import mẫu nón)
Ref task: #1236, #1237 - Chi
