A fast, lightweight shopping cart component built with Svelte and Tailwind CSS
A fast, lightweight shopping cart component built with Svelte and Tailwind CSS. Perfect for e-commerce applications that need a performant, customizable cart solution.
<script src="https://cdn.jsdelivr.net/npm/cart-fast@latest/dist/cart-fast.umd.js"></script>
npm install cart-fast
<!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>
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",
},
],
});
Renders the cart component into the specified DOM element.
Parameters:
element (HTMLElement): The DOM element to render the cart intoprops (Object): Configuration objectProps:
items (Array): Array of cart itemscurrency (String): Currency symbol (default: '$')onUpdate (Function): Callback when cart is updatedonCheckout (Function): Callback when checkout is initiated{
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
}
// 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();
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.
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see the LICENSE file for details.
FAQs
A fast, lightweight shopping cart component built with Svelte and Tailwind CSS
The npm package cart-fast receives a total of 2 weekly downloads. As such, cart-fast popularity was classified as not popular.
We found that cart-fast demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.