cart-fast

v1.1.0

Published

10 months ago

A fast, lightweight shopping cart component built with Svelte and Tailwind CSS

Downloads

0High
0Medium
0Low

jakebennett18505

shopping-cart svelte ecommerce cart tailwind ui-component

Cart Fast 🛒

A fast, lightweight shopping cart component built with Svelte and Tailwind CSS. Perfect for e-commerce applications that need a performant, customizable cart solution.

Features

🚀 Lightning fast - Built with Svelte 5 for optimal performance
🎨 Fully customizable - Styled with Tailwind CSS
📱 Responsive - Works great on all devices
🔧 Easy integration - Simple API for any web application
🌐 CDN ready - Available via jsDelivr
💾 Persistent state - Cart data persists across sessions

Installation

Via CDN (Recommended)

<script src="https://cdn.jsdelivr.net/npm/cart-fast@latest/dist/cart-fast.umd.js"></script>

Via npm

npm install cart-fast

Quick Start

HTML + CDN

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/cart-fast@latest/dist/cart-fast.umd.js"></script>
  </head>
  <body>
    <div id="cart-container"></div>

    <script>
      // Initialize the cart
      CartFast.renderCart(document.getElementById("cart-container"), {
        items: [
          {
            id: "1",
            name: "Product 1",
            price: 29.99,
            quantity: 1,
            image: "https://example.com/image.jpg",
          },
        ],
      });
    </script>
  </body>
</html>

ES Modules

import { CartFast } from "cart-fast";

// Initialize the cart
CartFast.renderCart(document.getElementById("cart-container"), {
  items: [
    {
      id: "1",
      name: "Product 1",
      price: 29.99,
      quantity: 1,
      image: "https://example.com/image.jpg",
    },
  ],
});

API Reference

CartFast.renderCart(element, props)

Renders the cart component into the specified DOM element.

Parameters:

element (HTMLElement): The DOM element to render the cart into
props (Object): Configuration object

Props:

items (Array): Array of cart items
currency (String): Currency symbol (default: '$')
onUpdate (Function): Callback when cart is updated
onCheckout (Function): Callback when checkout is initiated

Cart Item Object

{
    id: 'unique-id',        // Required: Unique identifier
    name: 'Product Name',   // Required: Product name
    price: 29.99,          // Required: Product price
    quantity: 1,           // Required: Quantity in cart
    image: 'image-url',    // Optional: Product image URL
    description: 'text'    // Optional: Product description
}

Cart Actions

// Add item to cart
CartFast.addItem(item);

// Remove item from cart
CartFast.removeItem(itemId);

// Update item quantity
CartFast.updateQuantity(itemId, newQuantity);

// Clear entire cart
CartFast.clearCart();

// Get cart total
const total = CartFast.getTotal();

// Get cart items
const items = CartFast.getItems();

Styling

Cart Fast uses Tailwind CSS for styling. The component includes all necessary styles, but you can customize the appearance by overriding CSS classes or using Tailwind's utility classes.

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Changelog

v1.0.0

Initial release
Basic cart functionality
Responsive design
CDN distribution