svelte-basket Svelte Themes

Svelte Basket

A shopping cart library for Svelte. UI components and data management.

Svelte basket

A shopping cart library for Svelte. UI components and data management.

How to use

install

npm install -D svelte-basket

Set up your product data.

import type { Item } from "svelte-basket";

// Exntends Item and add your need properties.
interface Product extends Item {
    name: string;
    price: number;
}

// Make your product list.
const products: Product[] = [
    { id: 1, name: 'Pencil', price: 300 },
    { id: 2, name: 'Pen', price: 500 },
    { id: 3, name: 'Eraser', price: 150 },
    { id: 4, name: 'Notebook', price: 350 },
    { id: 5, name: 'Tape', price: 400 },
]

Make product list with BasketButton component.

<script lang="ts">
    import BasketButton from "$lib/ui/BasketButton.svelte";
</script>
<ul>
{#each products as product}
    <li>
        <span>{product.name}</span>
        <BasketButton item={product} />
    </li>
{/each}
</ul>

Top categories

Loading Svelte Themes