OOP Class – Giỏ hàng

Xây dựng một trang web e-commerce đơn giản với giỏ hàng, triển khai logic bằng JavaScript Class.

Yêu cầu thực hiện

Công nghệ sử dụng

• HTML/CSS/JavaScript (không framework, không backend)
• Local Storage để lưu trữ dữ liệu

Chức năng bắt buộc

A. Quản lý sản phẩm

1. Hiển thị lưới sản phẩm: ảnh, tên, giá, nút "Thêm vào giỏ"

B. Quản lý giỏ hàng

1. Thêm sản phẩm vào giỏ (mặc định qty=1; nếu đã có → tăng qty)
2. Tăng/giảm số lượng từng mặt hàng; xóa mặt hàng
3. Hiển thị: danh sách giỏ, tạm tính, phí ship, tổng cộng
4. Hiển thị số lượng item trên nút "Giỏ hàng"

C. Thanh toán (giả lập)

1. Form thông tin: họ tên, điện thoại, địa chỉ, ghi chú
2. Phương thức thanh toán: COD, Phương thức khác
3. Xác nhận đặt hàng: refresh giỏ hàng → tạo đơn hàng → lưu localStorage → thông báo mã đơn

Luồng nghiệp vụ

Thêm giỏ → Cập nhật giỏ → Thanh toán → Nhập thông tin → Xác nhận → Tạo đơn → Xóa giỏ → Thông báo

Mô hình dữ liệu (Tham khảo)

// Cart structure
cart: [{ id, qty }]

// Orders structure
orders: [{ id, email, items, total, date, shipTo, payment }]

Hướng dẫn triển khai Class

Class	Thuộc tính	Phương thức
Product	id, name, price	—
CartItem	product, quantity	getSubtotal()
Cart	items (danh sách CartItem)	addItem(), removeItem(), getTotalPrice()...

class Product {
  constructor(id, name, price) {
    // TODO: Khởi tạo thuộc tính
  }
}

class CartItem {
  constructor(product, quantity) {
    // TODO: Khởi tạo thuộc tính
  }

  getSubtotal() {
    // TODO: Tính tổng tiền item (Giá * Số lượng)
  }
}

class Cart {
  constructor() {
    this.items = [];
  }

  addItem(product, quantity = 1) {
    // TODO: Thêm sản phẩm vào giỏ hàng
  }

  removeItem(productId) {
    // TODO: Xóa sản phẩm khỏi giỏ hàng
  }

  increaseItem(productId, amount = 1) {
    // TODO: Cộng thêm 1 sản phẩm
  }

  decreaseItem(productId, amount = 1) {
    // TODO: Trừ 1 sản phẩm. Kiểm tra nếu số lượng về 0 thì tiến hành xóa.
  }

  getTotalPrice() {
    // TODO: Tính tổng tiền giỏ hàng
  }

  resetCart() {
    // TODO: Làm trống giỏ hàng
  }
}

Tiêu chí hoàn thành

• Tất cả chức năng hoạt động đúng
• Không lỗi JS console; kiểm tra input cơ bản
• Dữ liệu lưu/đọc từ localStorage nhất quán
• UI rõ ràng, có phản hồi (toast/alert)

Kiểm thử tối thiểu

• Luồng mua hàng: Thêm sản phẩm → tăng/giảm → thanh toán COD → kiểm tra orders
• Lịch sử đơn hàng: Xem "Đơn gần đây" hiển thị đúng

Tài liệu tham khảo

MDN Classes Documentation