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.
• Cách hiển thị của component paginate: Luôn hiển thị trang đầu tiên và trang cuối, nếu chọn trang khác cách trang đầu tiên hơn 2 trang thì sẽ hiển thị dấu ... ( ví dụ: đang có 40 trang và chọn trang thứ 5 thì sẽ hiển thị dạng [1 ... 3 4 5 6 7 ... 40]), nhóm trang cố định ở giữa ... và ... sẽ luôn là 5 trang, trường hợp nếu chọn trang cuối cùng thì component hiển thị [ 1 ... 35 36 37 38 39 40], nếu chọn trang 1 thì hiển thị [1 2 3 4 5 ... 40].
• Trên component All Filters có dòng Showing(a)of(b)results : ví dụ dữ liệu tìm kiếm có 5 kết quả, và đang có tổng 10 dữ liệu trong database thì (a) sẽ là 5 và (b) sẽ là 10, kết quả đúng sẽ là Showing 5-of 10 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 thì lập tức dữ liệu tương ứng với option đã chọn sẽ được hiển thị ra (Option default cho ô select là Select all, khi không muốn chọn option khác thì chọn option Select all).Đối với input nhập dữ liệu tên/mã sản phẩm thì sau khi nhập xong 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 nhập, khi không muốn lọc theo giá trị vừa nhập thì click vào button clear kế bên giá trị vừa nhập để trang hiển thị lại dữ liệu ban đầu.

  • 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

  • Khi tìm kiếm không có bất kì kết quả nào thì hiển thị No results found

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 để chuyển sang trang chi tiết sản phẩm (đang ẩn chuyển trang khi click vào sản phẩm do task TMS-1238 chưa xong)
• 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 (đang ẩn chuyển trang khi click vào sản phẩm do task TMS-1238 chưa xong)
• Cách 3: Click vào button QuickView trên component chứa sản phẩm để mở ra modal hiển thị chi tiết sản phẩm (đang ẩn chuyển trang khi click vào sản phẩm do task TMS-1238 chưa xong)

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

• Khi chọn button Add to cart trên component chứa sản phẩm thì sản phẩm đó sẽ được thêm vào giỏ hàng, tương tự danh sách yêu thích, lúc này biểu tượng giỏ hàng trên thanh header sẽ được cập nhật số lượng khi thêm mới sản phẩm vào giỏ

2.6 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.7 Swiper

• Khi click vào button sang trái hay phải thì slide chứa sản phẩm sẽ trượt qua và hiển thị sản phẩm trong slide phía trước/ phía sau.Mỗi slide mặc định 3 sản phẩm mà mỗi khi trượt qua trái/phải thì hiển thị thêm 1 sản phẩm mới ( có thể dùng chuột để kéo sang trái/phải). Do đang mặc định hiển thị 5 sản phẩm mới nhất nên khi hiển thị tới sản phẩm cuối cùng hay đầu tiên thì sẽ không kéo qua/click chuyển slide qua trái/phải được nữa. Ví dụ đang có 5 dữ liệu của sản phẩm mới nhất, slide đầu tiên đang có 3 sản phẩm (A, B, C) đầu tiên rồi thì khi click vào button chuyển sang trái thì sẽ không chuyển slide được nữa, khi click chuyển slide sang phải thì slide kế tiếp sẽ hiển thị thêm 1 sản phẩm mới bao gồm B, C, D, click chuyển slide sang phải 1 lần nữa thì hiển thị C,D,E và E là sản phẩm cuối thì click chuyển slide sang phải sẽ không chuyển slide nữa, ngược lại khi slide đang hiển thị sản phẩm cuối thì có thể click/kéo slide sang bên trái để xem lại các sản phẩm trước.
• Mỗi component trên 1 slide sẽ hiển thị: Ảnh 3D của sản phẩm (nếu không có thì hiển thị No Images như danh sách sản phẩm), Danh mục của sản phẩm (nếu có thì sẽ hiển thị), Tên sản phẩm (nếu có) và Mô tả sản phẩm (nếu có)

3. API Endpoint

4. Cấu trúc dữ liệu danh sách sản phẩm

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.

• Note: Hiện tại dữ liệu đã được lấy sẵn từ TTD qua, riêng cột product_category_id cần map thủ công từ bảng product_categories sang bằng cách lấy id của bảng product_categories gắn qua cột product_category_id của bảng product_patterns_summary từ DB ecom

• Tương tự cột material_id ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id từ bảng materials đưa vào cột material_id của bảng product_patterns_summary từ DB ecom

• Tương tự cột delivery_time_id ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id từ bảng delivery_time đưa vào cột delivery_time_id của bảng product_patterns_summary từ DB ecom

• Tương tự cột hat_models ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id từ bảng hat_models đưa vào cột hat_models của bảng product_patterns_summary từ DB ecom

• Cột company_branch_id ở bảng product_patterns_summary được map thủ công bằng cách lấy id của bảng company_branchs ở DB TTĐ đưa vào cột company_branch_id ở bảng product_patterns_summary từ DB ecom ( note: A.Tài confirm lấy theo brand nhưng hiện tại đang cho hiển thị theo branch tạm thời tester vẫn test bình thường)

• Tương tự cột size_id,size_code,size_name ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id,code,name từ bảng size đưa vào cột size_id,size_code,size_name của bảng product_patterns_summary từ DB ecom

• Tương tự cột logo_id,logo_code,logo_name ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id,code,name từ bảng logo đưa vào cột logo_id,logo_code,logo_name của bảng product_patterns_summary từ DB ecom

• Tương tự cột color_id,color_code,color_name ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id,code,name từ bảng colors đưa vào cột color_id,color_code,color_name của bảng product_patterns_summary từ DB ecom

• Tương tự cột style_id,style_code,style_name ở bảng product_patterns_summary cũng map thủ công bằng cách lấy id,code,name từ bảng style đưa vào cột style_id,style_code,style_name của bảng product_patterns_summary từ DB ecom

4.2 Bảng ecom.delivery_time

• Bảng master lưu thông tin thời gian vận chuyển mẫu nón

4.3 Bảng ecom.logo

• Bảng master lưu thông tin logo của mẫu nón

4.4 Bảng ecom.product_categories

• Bảng master lưu thông tin danh mục của mẫu nón

4.5 Bảng ecom.hat_models

• Bảng master lưu thông tin kiểu nón của mẫu nón

4.6 Bảng ecom.size

• Bảng master lưu thông tin kích thước của mẫu nón

4.7 Bảng ecom.style

• Bảng master lưu thông tin style của mẫu nón

4.8 Bảng ecom.colors

• Bảng master lưu thông tin màu của mẫu nón

5. Giao diện danh sách sản phẩm

5.1 Danh sách 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 khi click vào ảnh/tên sản phẩm trên component của swiper thì chưa chuyển đến trang chi tiết sản phẩm được do task TMS-1238 của dev-Tuấn chưa lên)
• 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)
• Chức năng chi tiết sản phẩm (dev-Tuấn) chưa gắn component chi tiết, chưa gắn chuyển sang trang chi tiết khi click vào sản phẩm

Ref task: #1236, #1237 - Chi