Tích hợp chức năng Giỏ Hàng (Shopping Cart) với nhiều bạn sinh viên lần đầu thực hiện dự án web thương mại điện tử là một bước phức tạp. Bởi đây không chỉ là nơi lưu trữ danh sách hàng hóa mà còn thể hiện rõ nhất tư duy logic về Session, Database, và đặc biệt là trải nghiệm người dùng (UX) thông qua công nghệ AJAX.
Trong bài viết này, giảng viên Trần Bá Hộ (Bộ môn Công nghệ thông tin tại FPT Polytechnic TP HCM) sẽ hướng dẫn chi tiết cách tích hợp chức năng giỏ hàng cho các bạn sinh viên dễ dàng thực hành:
Giỏ hàng: “Trái tim” của dự án E-commerce
Khi làm đồ án hay dự án thực tế đầu tiên, chức năng giỏ hàng thường là cột mốc đánh dấu sự chuyển mình của bạn từ việc chỉ biết “CRUD” (Thêm, Xóa, Sửa, Xem) cơ bản sang việc xử lý logic nghiệp vụ phức tạp.
Một giỏ hàng tốt cần giải quyết được bài toán:
- Lưu giữ sản phẩm khách chọn dù họ đi qua trang khác (sử dụng Session).
- Tính toán chính xác tổng tiền.
- Cho phép thay đổi số lượng, xóa sản phẩm một cách mượt mà.
Và để đạt được sự “mượt mà” đó, chúng ta không thể dùng cách tải lại trang (reload) cổ điển mỗi khi khách bấm nút tăng số lượng. Đó là lúc AJAX và Fetch API xuất hiện.
Nâng tầm trải nghiệm với AJAX (Fetch API)
Thay vì mỗi lần khách hàng bấm [+] hay [-] là trình duyệt lại nháy một cái và tải lại từ đầu, chúng ta sẽ dùng JavaScript để gửi tín hiệu “ngầm” về server.
Trong các trình duyệt hiện đại, chúng ta sử dụng Fetch API thay vì XMLHttpRequest cũ kỹ hay thư viện jQuery. Code sẽ gọn gàng và tường minh hơn rất nhiều.
Logic hoạt động:
- Sự kiện: Khách bấm nút tăng số lượng.
- Frontend (JS): Dùng fetch() gửi ID sản phẩm và số lượng mới về file PHP xử lý (API).
- Backend (PHP): Cập nhật Session, tính toán lại tổng tiền, và trả về kết quả dạng JSON.
- Frontend (JS): Nhận JSON và cập nhật ngay lập tức con số trên màn hình mà không cần reload.
Ví dụ Code Frontend (Fetch API):
- Sự kiện: FE_code_view giỏ hàng từ session.png
- Frontend (JS): FE_code_JS_sử dụng fetch.png
- Backend (PHP): BE_code_nhận dữ liệu, xử lý và trả về FE.png
Lưu ý “sống còn”: Đừng tin tuyệt đối vào Session!
Đây là sai lầm kinh điển mà 90% sinh viên mắc phải trong các dự án đầu tay.
Vấn đề là gì?
Để tối ưu tốc độ, khi khách thêm hàng vào giỏ, chúng ta thường lưu luôn Giá (Price) vào Session.
- Lúc 8:00 sáng: Khách thêm iPhone 15 vào giỏ, giá trong Session lưu là 20.000.000đ.
- Lúc 9:00 sáng: Admin vào trang quản trị, cập nhật giá iPhone 15 lên 22.000.000đ.
- Lúc 9:30 sáng: Khách vào giỏ hàng bấm “Thanh toán”.
Nếu bạn chỉ lấy giá từ Session (20tr) để tạo hóa đơn và thanh toán, cửa hàng sẽ lỗ 2 triệu đồng!
Giải pháp chuyên nghiệp: Validate lại giá (Re-check Price)
Session chỉ nên dùng để lưu trữ tạm thời cho việc hiển thị nhanh (UX). Nhưng tại bước chốt đơn (Checkout), bạn bắt buộc phải thực hiện quy trình sau:
- Lấy danh sách ID sản phẩm từ giỏ hàng (Session).
- Dùng ID đó để Query lại Database một lần nữa để lấy giá hiện hành mới nhất.
- So sánh giá mới và giá cũ. Nếu có thay đổi, hãy thông báo cho người dùng: “Giá sản phẩm đã thay đổi, vui lòng xác nhận lại giỏ hàng”.
- Dùng giá lấy từ Database để lưu vào bảng Orders và Order_Details.
Ví dụ logic PHP tại bước Checkout:
Lập trình giỏ hàng là một bài toán thú vị kết hợp giữa kỹ thuật lập trình (PHP/JS) và tư duy nghiệp vụ thực tế. Việc áp dụng AJAX (Fetch API) sẽ làm dự án của bạn trở nên chuyên nghiệp, mượt mà. Nhưng các bạn đừng quên nguyên tắc bảo mật và toàn vẹn dữ liệu: Luôn kiểm tra lại giá gốc từ Database trước khi chốt đơn.
Chúc các bạn code vui và có một dự án đầu tay thật ấn tượng!
Giảng viên Trần Bá Hộ
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
