🛒 Shopping Cart Library

Một thư viện React component chuẩn hóa cho chức năng giỏ hàng với UI đẹp và dễ sử dụng.

✨ Tính năng

• 🎨 UI Components chuẩn hóa: Input, Button, Modal, Card
• 🛍️ Shopping Cart hoàn chỉnh: Thêm, sửa, xóa sản phẩm
• 📱 Responsive Design: Tối ưu cho mọi thiết bị
• 🎯 TypeScript Support: Type safety đầy đủ
• 🔧 Customizable: Dễ dàng tùy chỉnh giao diện
• 📦 Lightweight: Kích thước nhỏ gọn
• 🚀 Easy Integration: Dễ dàng tích hợp vào dự án

📦 Cài đặt

npm install shopping-cart-library

🚀 Sử dụng cơ bản

1. Thiết lập CartProvider

import React from 'react';
import { CartProvider } from 'shopping-cart-library';

function App() {
  return (
    <CartProvider>
      <YourApp />
    </CartProvider>
  );
}

2. Sử dụng ShoppingCart component

import React from 'react';
import { ShoppingCart } from 'shopping-cart-library';

function CartPage() {
  const handleCheckout = (items) => {
    console.log('Checkout items:', items);
    // Xử lý thanh toán
  };

  return (
    <ShoppingCart
      onCheckout={handleCheckout}
      showCheckoutButton={true}
      showClearButton={true}
    />
  );
}

3. Thêm sản phẩm vào giỏ hàng

import React from 'react';
import { useCart } from 'shopping-cart-library';

function ProductCard({ product }) {
  const { addItem } = useCart();

  const handleAddToCart = () => {
    addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      description: product.description,
      category: product.category
    });
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={handleAddToCart}>
        Add to Cart
      </button>
    </div>
  );
}

🎨 Components

Input

import { Input } from 'shopping-cart-library';

<Input
  type="text"
  placeholder="Enter your name"
  value={value}
  onChange={setValue}
  label="Name"
  error={error}
/>

Button

import { Button } from 'shopping-cart-library';

<Button
  variant="primary"
  size="medium"
  onClick={handleClick}
  loading={isLoading}
>
  Click me
</Button>

Modal

import { Modal } from 'shopping-cart-library';

<Modal
  isOpen={isOpen}
  onClose={handleClose}
  title="Confirmation"
  size="medium"
>
  <p>Are you sure you want to delete this item?</p>
</Modal>

Card

import { Card } from 'shopping-cart-library';

<Card
  title="Product Card"
  subtitle="Product description"
  hover={true}
  padding="medium"
>
  <p>Card content</p>
</Card>

CartItem

import { CartItem } from 'shopping-cart-library';

<CartItem
  item={cartItem}
  onUpdateQuantity={handleUpdateQuantity}
  onRemove={handleRemove}
  showImage={true}
  showDescription={true}
/>

🔧 API Reference

ShoppingCart Props

| Prop | Type | Default | Mô tả | |------|------|---------|-------| | onCheckout | (items: CartItem[]) => void | - | Callback khi người dùng checkout | | onItemUpdate | (item: CartItem) => void | - | Callback khi cập nhật sản phẩm | | onItemRemove | (id: string \| number) => void | - | Callback khi xóa sản phẩm | | showCheckoutButton | boolean | true | Hiển thị nút checkout | | showClearButton | boolean | true | Hiển thị nút xóa tất cả | | maxItems | number | - | Số lượng sản phẩm tối đa | | className | string | - | CSS class tùy chỉnh |

CartItem Type

interface CartItem {
  id: string | number;
  name: string;
  price: number;
  quantity: number;
  image?: string;
  description?: string;
  category?: string;
  inStock?: boolean;
  maxQuantity?: number;
}

useCart Hook

const {
  items,              // Danh sách sản phẩm trong giỏ
  addItem,           // Thêm sản phẩm
  removeItem,        // Xóa sản phẩm
  updateQuantity,    // Cập nhật số lượng
  clearCart,         // Xóa tất cả
  getTotalPrice,     // Tính tổng tiền
  getTotalItems,     // Tính tổng số lượng
  getItemQuantity    // Lấy số lượng của sản phẩm
} = useCart();

🎨 Customization

CSS Variables

Bạn có thể tùy chỉnh màu sắc thông qua CSS variables:

:root {
  --primary-color: #3b82f6;
  --secondary-color: #6b7280;
  --danger-color: #ef4444;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --background-color: #ffffff;
  --text-color: #111827;
  --border-color: #e5e7eb;
  --border-radius: 8px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Custom Styling

<ShoppingCart
  className="my-custom-cart"
  style={{
    '--primary-color': '#your-color',
    '--border-radius': '12px'
  }}
/>

📱 Responsive Design

Thư viện được thiết kế responsive và tối ưu cho:

• 📱 Mobile (320px+)
• 📱 Tablet (768px+)
• 💻 Desktop (1024px+)

🧪 Demo

Chạy demo để xem thư viện hoạt động:

# Mở file example/index.html trong trình duyệt
open example/index.html

🔨 Development

Cài đặt dependencies

npm install

Build thư viện

npm run build

Development mode

npm run dev

Linting

npm run lint

📄 License

MIT License - xem file LICENSE để biết thêm chi tiết.

🤝 Contributing

Mọi đóng góp đều được chào đón! Vui lòng:

1. Fork repository
2. Tạo feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Tạo Pull Request

📞 Support

Nếu bạn gặp vấn đề hoặc có câu hỏi, vui lòng tạo issue trên GitHub.

Được tạo với ❤️ bởi [Your Name]