Jquery được hiểu như một thư viện được tạo ra từ ngôn ngữ lập trình JavaScript, giúp cho việc xây dựng chức năng trở nên thuận tiện và đơn giản hơn. Bởi vậy có thể coi Jquery như một công cụ JavaScript, được thiết kế nhằm đơn giản hóa công việc lập trình của các nhà phát triển.
Lập trình giỏ hàng với javascript hay lập trình giỏ hàng với jquery đều đem đến sự thuận tiện nhất định và tạo cảm giác tức thì, load thông tin nhanh nhất mà người lập trình luôn hướng đến.
Hiểu rõ quá trình lập trình giỏ hàng là nền tảng để lập trình thuận tiện hơn cho dù có dùng ngôn ngữ lập trình là gì. Quá trình tạo giỏ hàng có thể trải qua các bước sau:
- Khởi tạo một mảng để lưu trữ giỏ hàng (có thể sử dụng sessionstorage để lưu trữ mảng nếu cần chuyển trang trong html)
- Sử dụng DOM HTML, nhận giá trị thông tin của một sản phẩm (có thể ghi nhận số lượng, không thì mặc định số lượng là 1), sau đó tạo mảng mới để lưu thông tin này.
- Thêm mảng sản phẩm vừa tạo vào mảng giỏ hàng (nếu trong giỏ hàng không có sản phẩm)
- Cập nhật số lượng sản phẩm (nếu trong giỏ hàng đã có sản phẩm)
- Khi nhấn xóa sản phẩm trong giỏ hàng (lấy được tên sản phẩm), xóa DOM html ngay vị trí hiện tại của nút xóa sản phẩm
- Xóa sản phẩm trong mảng với tên sản phẩm vừa nhận được
- Xóa tất cả sản phẩm trong giỏ hàng, nghĩa là làm rỗng giỏ hàng
Để thực hiện việc lập trình giỏ hàng với javascript hay jquery, các bạn phải nắm vững kiến thức cơ bản về javascript qua danh sách phát sau đây:
Theo đó, những kiến thức cơ bản các bạn không nên bỏ qua như khai báo biến, câu điều khiển, vòng lặp. Đặc biệt để thuận tiện cho việc lập trình giỏ hàng thì kiến thức về mảng của các bạn phải vững:
Hay kiến thức về hàm cũng phải vững
Ngoài ra, DOM HTML cũng là một kỹ năng bắt buộc nắm vững trong việc lập trình giỏ hàng
Và bây giờ, một demo đơn giản về lập trình giỏ hàng với mảng, dom html. Quá trình thêm, xóa, sửa giỏ hàng chỉ tồn tại trên 1 trang.
========
Và bây giờ, nâng cấp lên một bước, chúng ta sẽ lập trình giỏ hàng với javascript cùng với DOM HTML. Mặc khác chúng ta cũng sử dụng sessionStorage để lưu trữ giỏ hàng nhằm thuận tiện cho việc chuyển trang html. 6 clips trong danh sách phát sau đây, các bạn không nên bỏ qua, để hiểu rõ hơn quá trình tạo giỏ hàng trong javascript khi chuyển trang là như thế nào. Click vào kênh youtube để xem theo thứ tự clip
==============
Cuối cùng, để code gọn và nhẹ hơn, chúng ta cũng có thể thực hiện lập trình giỏ hàng với jquery, kết hợp mảng, object, DOM HTML. Các bạn có thể tham khảo clip hướng dẫn nhanh gọn lẹ như sau:
Hy vọng, qua loạt clip trên sẽ hỗ trợ các bạn có cái nhìn cơ bản nhất về lập trình giỏ hàng. Cho dù thực hiện với ngôn ngữ lập trình nào javascript hay jquery các bạn đều cũng dễ dàng chỉnh sửa và nâng cấp.
Chúc các bạn mãi luôn thành công!!!!