TechShop - Hệ thống đặt hàng online

Hệ thống đặt hàng online hoàn chỉnh cho các sản phẩm công nghệ được xây dựng bằng HTML, CSS và JavaScript thuần.

Tính năng

Dành cho khách hàng:

• ✅ Trang chủ - Hiển thị sản phẩm nổi bật
• ✅ Danh sách sản phẩm - Xem tất cả sản phẩm với bộ lọc và tìm kiếm
• ✅ Chi tiết sản phẩm - Xem thông tin chi tiết và thông số kỹ thuật
• ✅ Giỏ hàng - Thêm, sửa, xóa sản phẩm trong giỏ hàng
• ✅ Thanh toán - Form đặt hàng với thông tin giao hàng
• ✅ Đơn hàng - Xem lịch sử đơn hàng của khách hàng
• ✅ Đăng nhập/Đăng ký - Hệ thống xác thực người dùng

Dành cho quản trị viên:

• ✅ Quản lý sản phẩm - Thêm, sửa, xóa sản phẩm
• ✅ Quản lý đơn hàng - Xem và cập nhật trạng thái đơn hàng

Cấu trúc dự án

project_web/
├── index.html          # Trang chủ
├── products.html       # Danh sách sản phẩm
├── product-detail.html # Chi tiết sản phẩm
├── cart.html          # Giỏ hàng
├── checkout.html      # Thanh toán
├── orders.html        # Đơn hàng
├── admin.html         # Quản trị
├── css/
│   └── style.css      # Stylesheet chính
└── js/
    ├── app.js         # Core application logic
    ├── auth.js        # Xác thực người dùng
    ├── index.js       # Trang chủ
    ├── products.js    # Trang sản phẩm
    ├── product-detail.js # Chi tiết sản phẩm
    ├── cart.js        # Giỏ hàng
    ├── checkout.js    # Thanh toán
    ├── orders.js      # Đơn hàng
    └── admin.js       # Quản trị

Cách sử dụng

1. Mở trang web: Mở file index.html bằng trình duyệt web
2. Khám phá sản phẩm: Duyệt qua các sản phẩm trên trang chủ hoặc trang sản phẩm
3. Thêm vào giỏ hàng: Click vào "Thêm vào giỏ" trên bất kỳ sản phẩm nào
4. Thanh toán:
   • Đăng ký/Đăng nhập tài khoản
   • Vào giỏ hàng và click "Thanh toán"
   • Điền thông tin giao hàng và đặt hàng
5. Quản trị: Vào trang "Quản trị" để thêm/sửa sản phẩm và quản lý đơn hàng

Lưu ý

• Dữ liệu được lưu trong localStorage của trình duyệt
• Mỗi trình duyệt sẽ có dữ liệu riêng biệt
• Để reset dữ liệu, xóa localStorage trong Developer Tools

Tính năng kỹ thuật

• Responsive design - Tương thích mobile và desktop
• LocalStorage - Lưu trữ dữ liệu client-side
• Modern UI/UX - Giao diện hiện đại, dễ sử dụng
• Form validation - Kiểm tra dữ liệu đầu vào
• Search & Filter - Tìm kiếm và lọc sản phẩm
• Order management - Quản lý đơn hàng hoàn chỉnh

Trình duyệt hỗ trợ

• Chrome (khuyến nghị)
• Firefox
• Safari
• Edge

---

TechShop - Cửa hàng công nghệ hàng đầu Việt Nam 🚀