Trang chủ khi người dùng chưa đăng nhập

Khi người dùng truy cập vào website của hệ thống trong trạng thái chưa đăng nhập, website sẽ hiển thị giao diện trang chủ như hình 5.1 bên dưới.

Trên web sẽ hiển thị các nội dung gồm:

¥! Đầu tiên là header của website, nơi chứa các link dẫn tới trang chủ và các trang danh sách từng loại sản phẩm như điện thoại, laptop, máy tính bảng, đồng hồ thông minh, nút xem giỏ hàng và nút đăng nhập để hỗ trợ người dùng chuyển qua các form đăng nhập hoặc đăng ký tài khoản.

¥! Trường tìm kiếm sản phẩm: cho phép người dùng tìm kiếm sản phẩm bằng cách nhập từ khoá tên sản phẩm mà ta muốn tìm kiếm.

¥! Danh sách các sản phẩm phổ biến.

¥! Icon chatbot giúp cho người dùng có thể trò chuyện với chatbot, khi người dùng nhấp vào icon này sẽ hiển thị lên popup chatbot để người dùng có thể nhập tin nhắn trò chuyện với chatbot và được chatbot phản hồi một cách tự động.

¥! Icon của chatbot sẽ nằm cố định cho dù ta có cuộn lên xuống website.

¥! Bên dưới danh sách sản phẩm có thêm link bấm Xem thêm sản phẩm để người dùng muốn xem thêm sản phẩm thì sẽ click vào link này.

¥! Dưới cùng là footer của website.

Hình 5.1: giao diện trang chủ của website 5.2.2.!Trang chủ khi người dùng đã đăng nhập

Khi người dùng đăng nhập thành công sẽ chuyển đến trang chủ và nội dung trang chủ sẽ khác so với lúc người dùng chưa đăng nhập.

Có 2 trường hợp hợp khi người dùng đã đăng nhập.

¥! Nếu người dùng mới, chưa xem sản phẩm của hệ thống lần nào thì hệ thống sẽ hiển thị ra các sản phẩm phổ biến cho người dùng.

¥! Khi người dùng đã tương tác nhiều với các sản phẩm của hệ thống, hệ thống sẽ gợi ý sản phẩm cho người dùng dựa trên lịch sử tương tác và so sánh tương quan

5.2.3.!Chatbot và thanh toán trên chatbot

Tiếp theo là giao diện chatbot của website:

Hình 5.3: giao diện hiển thị khi click vào icon messenger chatbot

Khi nhấp vào nút Tiếp tục với vài trò khách sẽ hiển thị ra khung chat để trò chuyện với chatbot.

Ngoài ra, chatbot cũng có hỗ trợ người dùng đặt hàng và thanh toán đơn hàng trên chatbot. Sau đây là giao diện hỗ trợ người dùng thanh toán trên chatbot:

Hình 5.5: giao diện thanh toán trên chatbot khi người dùng chưa đăng nhập

Khi người dùng chưa đăng nhập thì các trường THÔNG TIN KHÁCH HÀNG sẽ trống. Khi người dùng đã đăng nhập thì hệ thống sẽ tự động lấy thông tin người dùng và hiển thị lên form.

Ta sẽ nhấn vào nút TIẾN HÀNH ĐẶT HÀNG để đặt hàng trên chatbot.

5.2.4.!Xem chi tiết sản phẩm

Khi muốn xem chi tiết sản phẩm, ta sẽ rê chuột vào sản phẩm mà ta muốn xem chi tiết, khi đó sẽ hiển thị nút xem chi tiết cũng như thêm sản phẩm vào giỏ hàng như hình:

Hình 5.7: hình 1 sản phẩm cụ thể hiển thị trong danh sách sản phẩm

Trên hình 5.7, có 2 nút: nút bên trái là nút xem chi tiết sản phẩm, nút bên phải là thêm sản phẩm vào giỏ hàng, ta sẽ nhấp vào nút xem chi tiết sản phẩm, khi đó sẽ hiển thị chi tiết sản phẩm như hình 5.8.

Nội dung trang chi tiết sản phẩm bao gồm:

¥! Hình sản phẩm.

¥! Tên, giá, mã, hãng sản phẩm.

¥! Hình slider chi tiết sản phẩm.

¥! Popup cấu hình sản phẩm bằng cách click vào nút CẤU HÌNH SẢN PHẨM CHI TIẾT để xem.

¥! Popup mô tả sản phẩm nếu nội dung popup nhiều hơn 3 đoạn văn.

¥! Nút ĐẶT MUA SẢN PHẨM.

¥! Danh sách hình sản phẩm liên quan dưới cùng. Danh sách này là do hệ thống gợi ý dựa trên sản phẩm mà người dùng đang xem. Tức là hệ thống sẽ dựa trên thông tin chi tiết của sản phẩm mà ta đang xem hiện tại(Apple MacBook Pro M1 2020 8GB/256GB (MYD82SA/A)) và so sánh sự tương quan với các sản phẩm trên hệ thống và chọn ra top 4 sản phẩm tương tự nhất với sản phẩm này và gợi ý ra cho người dùng.

Hình 5.8: chi tiết sản phẩm 5.2.5.!Đặt hàng trên hệ thống, thanh toán tiền mặt, paypal

¥! Cách 1: rê chuột vào mỗi sản phẩm như ta đã trình bày ở trên. Khi đó sẽ hiển thị ra 2 nút: xem chi tiết sản phẩm(bên trái) và thêm vào giỏ hàng(bên phải), ta sẽ click vào nút thêm vào giỏ hàng.

¥! Cách 2: ta đi vào trang chi tiết sản phẩm giống như hình 5.8, click vào nút ĐẶT MUA SẢN PHẨM.

Ta có thể thêm số lượng sản phẩm bằng cách nhấp vào nút đặt mua nhiều lần. Sau khi đặt mua sản phẩm, ta sẽ tiến hành thanh toán bằng cách nhấp vào nút giỏ hàng ở thanh tiêu đề. Khi đó sẽ hiển thị popup như hình 5.9:

Hình 5.9: popup hiển thị danh sách sản phẩm đã đặt mua trong giỏ hàng

Khi tiến hành đặt hàng, nếu người dùng chưa đăng nhập thì sẽ hiển thị form cho người dùng đặt mua sản phẩm, phần hiện thực form sẽ được nêu ở phần phụ lục.

Khi người dùng đã đăng nhập thì sẽ hiển thị trang cho người dùng xác nhận đặt hàng như hình 5.10 như sau:

Hình 5.10: form đặt hàng hệ thống

Trong form đặt hàng trên hệ thống này, ta có thể thay đổi phương thức thanh toán bằng tiền mặt hoặc bằng paypal.

Sau đó ta nhấn vào nút tiến hành đặt hàng để đặt hàng.

Nếu người dùng chọn phương thức thanh toán bằng tiền mặt thì sẽ hiển thị trang thông báo đặt hàng thành công như hình 5.11 sau đây:

Hình 5.11: thông báo đặt hàng thành công khi thanh toán tiền mặt

Nếu người dùng thanh toán bằng paypal thì hệ thống sẽ chuyển đến trang yêu cầu đăng nhập vào paypal để thanh toán như hình 5.12:

Hình 5.12: trang để thanh toán paypal

Click vào nút Continue để tiến hành thanh toán, khi thanh toán thành công sẽ chuyển về trang thông báo đặt hàng thành công như hình 5.13:

Hình 5.13: thông báo đặt hàng trên hệ thống và thanh toán paypal thành công 5.2.6.!Một số phần chính của trang quản trị viên

Trang quản trị viên gồm có các chức năng:

¥! Xem thống kê thông tin tổng quát. ¥! Thêm sản phẩm.

¥! Xem danh sách sản phẩm, chi tiết sản phẩm. ¥! Xem danh sách đơn hàng, chi tiết đơn hàng. ¥! Danh sách người dùng.

¥! Danh sách nhân viên. ¥! Tạo tài khoản nhân viên.

Trong phần này ta cũng sẽ hiện thực một số phần chính của trang quản trị viên, phần còn lại xem thêm ở phụ lục.

Trang chủ quản trị viên gồm nhiều phần, bao gồm:

¥! Thông tin số lượng người dùng, số lượng đơn hàng, số lượng sản phẩm. ¥! Hiển thị top 5 sản phẩm được xem nhiều nhất.

¥! Đánh giá hiệu quả của mô hình recommendation system, thông tin website. ¥! Thống kê top lịch sử tương tác với các sản phẩm giới thiệu cho người dùng thông

Ta sẽ hiện thực từng phần như sau:

Hình 5.14: thống kê thông tin số lượng người dùng, số đơn hàng, số sản phẩm

Hình 5.15: top 5 sản phẩm được xem nhiều nhất

Hệ thống sẽ chọn ra 5 sản phẩm có số lượt xem nhiều nhất để hiển thị lên hệ thống.

Hình 5.16: thông tin đánh giá mô hình phân hệ gợi ý và thông tin website

Hệ thống sẽ dựa vào nhật ký tương tác của người dùng với các sản phẩm gợi ý và trung bình cộng điểm tương tác.

Hình 5.18: top sản phẩm gợi ý theo sản phẩm được tương tác nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý theo sản phẩm mà được tương tác nhiều nhất.

Hình 5.19: top sản phẩm gợi ý theo sản phẩm được tương tác nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm được riêng gợi ý cho từng người dùng được tương tác nhiều nhất.

Hình 5.20: top sản phẩm gợi ý theo sản phẩm được xem nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm được hệ thống gợi ý theo sản phẩm mà người dùng tương tác nhiều nhất.

Hình 5.21: top gợi ý theo sản phẩm được thêm vào giỏ hàng nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý theo sản phẩm mà được người dùng quan tâm và thêm vào giỏ hàng.

Hình 5.22: top gợi ý theo sản phẩm được người dùng đặt mua nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm được gợi ý theo sản phẩm mà được người dùng đặt mua nhiều nhất.

Hình 5.23: top gợi ý cho từng người dùng được người dùng xem nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm mà hệ thống gợi ý cho người dùng và được người dùng xem nhiều nhất.

Hình 5.24: top gợi ý cho từng người dùng được thêm vào giỏ hàng nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý cho từng người dùng và được người dùng thêm vào giỏ hàng nhiều nhất.

Hình 5.25: top gợi ý cho từng người dùng được đặt mua nhiều nhất

Trường này sẽ thống kê top 5, 10 hoặc 20 sản phẩm gợi ý cho từng người dùng được người dùng đặt mua nhiều nhất.

5.2.7.!Quản trị viên xem danh sách đơn hàng

Hình 5.26: xem danh sách đơn hàng ở trang quản trị viên

Trang quản trị viên cho phép quản trị viên tra cứu thông tin đơn hàng theo mã đơn hàng hoặc số điện thoại. Đồng thời cho phép lọc đơn hàng theo các tình trạng: đơn hàng đã duỷ, đơn hàng chưa thanh toán, đơn hàng đã thanh toán, đơn hàng đã giao.

Quản trị viên có quyền xem chi tiết đơn hàng bằng cách nhấp vào icon chữ i ở cột chi tiết của sản phẩm mà quản trị viên muốn xem.

Hình 5.27: quản trị viên xem chi tiết đơn hàng 5.2.8.!Nhân viên xác nhận đơn hàng

Khi nhân viên đăng nhập vào trang dành cho nhân viên, hệ thống sẽ hiển thị trang danh sách đơn hàng mà khách hàng đã đặt mua. Giao diện như sau:

Hình 5.28: xem danh sách đơn hàng ở trang nhân viên

Trang này cho phép nhân viên tra cứu thông tin đơn hàng theo mã đơn hàng hoặc số điện thoại. Đồng thời cho phép lọc đơn hàng theo các tình trạng: đơn hàng đã duỷ, đơn hàng chưa thanh toán, đơn hàng đã thanh toán, đơn hàng đã giao.

Nhân viễn cũng có quyền xem chi tiết đơn hàng bằng cách nhấp vào icon chữ i ở cột chi tiết của sản phẩm mà nhân viên muốn xem.

Hình 5.29: nhân viên xem chi tiết đơn hàng

Nhân viên cũng có quyền thao tác huỷ hơn hàng, xác nhận mua hàng, xác nhận đã giao hàng.

5.2.9.!Hiển thị danh sách các sản phẩm gợi ý được người dùng xem, thêm vào giỏ hàng, mua nhiều nhất hàng, mua nhiều nhất

Ta sẽ thiết kế một trang danh sách top các sản phẩm mà hệ thống gợi ý cho người dùng hoặc gợi ý kèm theo sản phẩm cụ thể nào đó mà được người dùng quan tâm nhiều nhất.

Mục tiêu của danh sách này là để gợi ý cho người dùng những sản phẩm mà hệ thống đã gợi ý ra được người dùng ưa chuộng nhất.

Danh sách các sản phẩm gợi ý này được chia ra làm 8 phần:

Hình 5.30: danh sách gợi ý theo các sản phẩm được tương tác nhiều nhất

Phần này sẽ hiển thị thông tin top 10 sản phẩm gợi ý theo sản phẩm(sản phẩm liên quan) được người dùng tương tác(xem, thêm vào giỏ hàng, mua) nhiều nhất.