Ở bài trước về hành trình đa kênh, chúng ta đã kết nối các điểm chạm để đưa khách hàng về website Hương Camera. Hiện tại, trang chủ hiển thị giống nhau cho mọi người truy cập. Ai mở trang cũng thấy banner "Đổi thiết bị. Mở góc nhìn mới.", khối "Bạn đang cần gì?", các thiết bị mới cập nhật, góc kiến thức và phần FAQ. Người mới vào lần đầu và người đã xem kỹ vài chiếc máy hôm trước đều nhận cùng một giao diện.
Với một cửa hàng máy ảnh, khách thường không mua ngay trong lần ghé đầu tiên. Họ xem vài mẫu máy, so sánh giá rồi quay lại sau. Trong bài này, chúng ta bổ sung một thay đổi cho lần quay lại đó: website ghi nhớ những sản phẩm khách đã xem và hiển thị chúng ngay trên trang chủ ở lần truy cập tiếp theo. Mỗi người truy cập sẽ thấy một trang chủ khác nhau, tùy vào những gì họ đã xem trước đó.
Quy trình gồm năm bước: xác định phần giao diện thay đổi, ghi nhận sản phẩm đã xem, bổ sung chức năng trong VS Code, publish rồi kiểm tra bằng hai lần truy cập, và cuối cùng là kiểm tra các trường hợp đặc biệt.

1. Xác định phần giao diện thay đổi ở lần truy cập thứ hai

Trước khi viết code, chúng ta cần thống nhất trang chủ sẽ khác đi ở điểm nào. Ở lần đầu, khách chưa xem sản phẩm nào nên website giữ nguyên giao diện mặc định. Từ lần truy cập sau, trang chủ có thêm khối "Sản phẩm bạn đã xem". Khối này hiển thị những sản phẩm khách mở gần đây nhất, mỗi sản phẩm có ảnh, tên, giá hiện tại và liên kết về trang chi tiết.
Khu vựcLần truy cập đầu tiênLần quay lại sau khi đã xem sản phẩm
Banner"Đổi thiết bị. Mở góc nhìn mới."Giữ nguyên
Khối "Bạn đang cần gì?"Giữ nguyênGiữ nguyên
Sản phẩm bạn đã xemKhông hiển thịHiển thị các sản phẩm đã xem, mới nhất đứng trước
Thiết bị mới cập nhật, Góc kiến thức, FAQGiữ nguyênGiữ nguyên, nằm bên dưới khối đã xem
Khối "Sản phẩm bạn đã xem" nên đặt ngay dưới khối "Bạn đang cần gì?". Khách quay lại thường muốn tiếp tục với chiếc máy họ đang cân nhắc, nên khối này cần nằm ở nơi họ nhìn thấy trước khi phải cuộn xuống. Ở lần triển khai đầu, chúng ta chỉ thêm một khối này và giữ các phần khác như cũ. Nhờ vậy, khi kiểm tra, mọi thay đổi trên trang đều đến từ chức năng mới.
Screenshot 2026-10-11 155358.png

2. Ghi nhận sản phẩm khách đã xem

Để trang chủ hiển thị được sản phẩm đã xem, website cần ghi lại mỗi lần khách mở trang chi tiết sản phẩm. Mỗi lần ghi chỉ cần mã sản phẩm và thời điểm xem. Nếu khách mở lại một sản phẩm đã có trong danh sách, sản phẩm đó được chuyển lên đầu thay vì thêm một dòng trùng. Danh sách giữ khoảng tám sản phẩm gần nhất để khối trên trang chủ gọn và dễ xem trên điện thoại.
Danh sách này được lưu ngay trong trình duyệt của khách, bằng một vùng nhớ gọi là localStorage. Có thể hình dung nó như một tờ ghi chú nhỏ mà website để lại trên máy của khách. Tờ ghi chú vẫn nằm đó khi khách tắt trình duyệt, nên hôm sau họ mở lại website thì trang chủ đọc được tờ ghi chú và biết lần trước họ đã xem những máy nào. Nhờ vậy trang chủ mới hiển thị khác đi ở lần quay lại. Nếu lưu bằng sessionStorage như cách làm trước đây, tờ ghi chú sẽ mất ngay khi khách đóng tab, và lần sau họ vào sẽ lại thấy trang chủ như người mới.
Website chỉ lưu mã sản phẩm, không lưu tên hay giá. Khi hiển thị khối đã xem, trang chủ lấy thông tin mới nhất của sản phẩm từ dữ liệu hiện có trên EzyPlatform. Nhờ vậy, nếu giá thay đổi hoặc sản phẩm tạm ngừng bán, khách vẫn thấy thông tin đúng thay vì thông tin của lần xem trước.
Ở phạm vi này, lịch sử xem gắn với từng trình duyệt. Khách xem trên máy tính rồi mở website bằng điện thoại sẽ chưa thấy danh sách đó. Việc đồng bộ theo tài khoản hoặc dùng dữ liệu khách hàng từ EzyCRM cần có phần tích hợp riêng.
Screenshot 2026-10-11 155537.png

3. Bổ sung chức năng trong VS Code

Khi đã rõ giao diện cần thay đổi và cách ghi nhận dữ liệu, chúng ta mở dự án website Hương Camera trong VS Code và yêu cầu AI kiểm tra phần giao diện camera-store. Nếu đã kết nối MCP Server, hãy yêu cầu AI xác minh cách lấy dữ liệu sản phẩm hiện có trước khi chỉnh code.
Bạn có thể dùng prompt sau:
Hãy bổ sung chức năng hiển thị sản phẩm đã xem trên trang chủ camera-store
của website Hương Camera.

Trước khi sửa, kiểm tra cấu trúc trang chủ, trang chi tiết sản phẩm
và cách lấy dữ liệu sản phẩm hiện có.
Nếu cần, xác minh chức năng và schema qua MCP Server.
Không tự đặt tên API hoặc EzyFunction.

Trên trang chi tiết sản phẩm:
- Mỗi lần khách mở trang, lưu mã sản phẩm và thời điểm xem vào localStorage.
- Nếu sản phẩm đã có trong danh sách, đưa lên đầu, không lưu trùng.
- Chỉ giữ 8 sản phẩm gần nhất.
- Chỉ lưu mã sản phẩm, không lưu tên, giá hoặc thông tin cá nhân.

Trên trang chủ:
- Thêm khối "Sản phẩm bạn đã xem" ngay dưới khối "Bạn đang cần gì?".
- Chỉ hiển thị khối khi localStorage có ít nhất một sản phẩm hợp lệ.
- Lấy ảnh, tên, giá và đường dẫn mới nhất của sản phẩm từ dữ liệu hiện có.
- Bỏ qua sản phẩm không còn tồn tại hoặc đã bị ẩn.
- Sắp xếp sản phẩm xem gần nhất lên trước.
- Thêm nút "Xóa danh sách" để khách tự xóa lịch sử xem.

Giữ nguyên banner, khối "Bạn đang cần gì?", Thiết bị mới cập nhật,
Góc kiến thức và FAQ.
Nếu không có dữ liệu hoặc không đọc được localStorage, hiển thị giao diện mặc định.
Đảm bảo khối mới hiển thị tốt trên điện thoại.
Sau khi AI chỉnh sửa, hãy xem bản chạy thử trước khi publish. Cần kiểm tra cả hai trạng thái: trang chủ khi chưa có lịch sử xem và trang chủ sau khi đã mở vài sản phẩm.

4. Publish và kiểm tra bằng hai lần truy cập

Bản chạy thử chỉ là bước đầu. Chức năng chỉ được xem là hoạt động khi chạy đúng trên website thật, nên sau khi publish, chúng ta kiểm tra bằng đúng hành trình của một khách quay lại.
Trước tiên, xóa dữ liệu trang web của Hương Camera trong trình duyệt để đóng vai một người truy cập lần đầu. Mở trang chủ và xác nhận khối "Sản phẩm bạn đã xem" chưa xuất hiện. Tiếp theo, mở lần lượt hai hoặc ba sản phẩm khác nhau, ví dụ một thân máy và một ống kính. Sau đó đóng hẳn trình duyệt.
Mở lại trình duyệt và vào trang chủ. Lúc này, khối "Sản phẩm bạn đã xem" cần xuất hiện ngay dưới khối "Bạn đang cần gì?", với sản phẩm mở cuối cùng đứng đầu. Bấm vào từng sản phẩm để kiểm tra liên kết mở đúng trang chi tiết. Cùng một URL trang chủ, nhưng giao diện ở lần thứ hai đã khác lần đầu theo đúng những gì người truy cập này đã xem.
Cuối cùng, mở trang chủ bằng một trình duyệt khác hoặc một thiết bị khác. Trang chủ ở đó vẫn là giao diện mặc định, vì lịch sử xem được lưu riêng trên từng trình duyệt.
Screenshot 2026-10-11 160106.png

5. Kiểm tra các trường hợp đặc biệt

Khi khối đã hiển thị đúng, còn một số trường hợp cần kiểm tra để chức năng chạy ổn định. Mở lại một sản phẩm đã có trong danh sách và xác nhận nó chuyển lên đầu, không xuất hiện hai lần. Nếu có thể, thử với một sản phẩm đã bị ẩn trong admin để xác nhận trang chủ bỏ qua sản phẩm đó, không hiện ô trống hoặc liên kết lỗi. Bấm "Xóa danh sách" rồi tải lại trang để kiểm tra trang chủ trở về giao diện mặc định.
Trên điện thoại, kiểm tra khối đã xem có dễ lướt, ảnh sản phẩm không bị cắt và giá vẫn đọc rõ. Ghi kết quả vào bảng dưới đây:
Tình huống kiểm traKết quả cần cóKết quả thực tế
Lần truy cập đầu tiênKhông có khối đã xem, giao diện mặc định[Điền]
Quay lại sau khi xem sản phẩmKhối đã xem hiển thị, sản phẩm mới nhất đứng đầu[Điền]
Bấm sản phẩm trong khốiMở đúng trang chi tiết[Điền]
Xem lại sản phẩm đã cóChuyển lên đầu, không trùng[Điền]
Sản phẩm đã bị ẩnKhông hiển thị trong khối[Điền]
Bấm "Xóa danh sách"Trở về giao diện mặc định[Điền]
Mở trên điện thoạiKhối dễ xem, ảnh và giá hiển thị rõ[Điền]

Kết luận

Trước đây, trang chủ Hương Camera giống nhau với mọi người truy cập. Sau phần thực hành này, trang chủ ghi nhớ sản phẩm từng khách đã xem và đưa chúng lên ngay ở lần quay lại. Người đang cân nhắc một chiếc máy không phải tìm lại từ đầu, còn người mới vào lần đầu vẫn thấy giao diện mặc định.
Đây là mức cá nhân hóa dựa trên chính hành vi của khách trên từng trình duyệt. Khi website có thêm dữ liệu từ tài khoản hoặc EzyCRM, chúng ta có thể mở rộng sang đồng bộ giữa các thiết bị. Hiển thị đúng sản phẩm mới chỉ là một nửa câu chuyện. Ở [bài tiếp theo về trải nghiệm khách hàng – bổ sung URL], chúng ta sẽ kiểm tra khách quay lại có tiếp tục xem sản phẩm, bấm vào trang chi tiết và đi đến bước tiếp theo hay không.