Market Components

Mobile-first e-commerce components designed for local farmers markets. Each component is optimized for touch interactions and accessibility.

Product Cards

The core component for displaying products. Features responsive design, touch-optimized interactions, and real-time stock status.

Organic Heirloom Tomatoes

Sweet and juicy heirloom tomatoes, perfect for salads or sandwiches

$4.99 /lb

In Stock

New Organic

Sunny Field Gardens 7.3 mi

Fresh Basil Bunches

Aromatic fresh basil, perfect for pesto or caprese

$3.50 /bunch

In Stock

Sweet Corn

Freshly picked sweet corn, great for grilling

$0.75 /ear

In Stock

Organic

Happy Acres Farm 7.6 mi

Rainbow Chard

Colorful and nutritious chard, great for sautéing

$3.99 /bunch

Only 4 left!

Organic

Morning Dew Farm 0.6 mi

Local Honey

Raw, unfiltered honey from local wildflowers

$12.00 /jar

Out of Stock

Cherry Tomatoes

Sweet cherry tomatoes, perfect for snacking

$5.50 /pint

In Stock

Enhanced ProductCard with Edit Mode

The enhanced ProductCard supports an edit mode for growers and market managers, allowing in-place editing of product information directly from the market page.

Enable Edit Mode 👁️ Customer View

🚗 12 miles New 🌱 Organic

Happy Acres Farm

Organic Heirloom Tomatoes

$4.99 /lb 🌱 Harvested to order

Sweet and juicy heirloom tomatoes, perfect for salads or sandwiches

Available for Pre-order

🚗 12 miles New 🌱 Organic

Happy Acres Farm

Fresh Basil Bunches

$3.50 /bunch 🌱 Harvested to order

Aromatic fresh basil, perfect for pesto or caprese

Available for Pre-order

Edit Mode Features

🛠️ Management Controls

Edit - Opens full product modal
Duplicate - Creates a copy
Toggle availability/featured
Delete (admin only)
Shows product copy code

✏️ In-place Editing

Click product name to edit
Click price/unit to edit
Edit quantity (if allowed)
Edit surcharge (admin)
Auto-saves with debounce

📝 Rich Features

Expandable descriptions
Markdown support
Nutritional info links
Inactive product styling
Touch-optimized controls

Key Features

📱

Mobile First

48px minimum touch targets and optimized for small screens

⚡

Performance

GPU-accelerated animations and lazy-loaded images

♿

Accessible

WCAG AAA compliant with full keyboard and screen reader support

🎨

Themeable

CSS custom properties for easy market customization

🔄

Real-time

Live stock updates and reactive state management

🌐

Responsive

Adapts seamlessly from mobile to desktop layouts

Usage Example

// Import the component
import ProductCard from '$lib/components/market/ProductCard.svelte';

// Example product data
const product = {
  id: 1,
  name: 'Organic Tomatoes',
  price: 4.99,
  unit: 'lb',
  quantity: 25,
  growerId: 1,
  categoryId: 15,
  // ... other properties
};

// Example grower data
const grower = {
  id: 1,
  name: 'Happy Acres Farm',
  location: 'Watkinsville, GA',
  growingMethod: 'organic',
  // ... other properties
};

// In your component template:
<ProductCard
  {product}
  {grower}
  featured={true}
  onAddToCart={(product) => addToCart(product)}
  onQuickView={(product) => showQuickView(product)}
/>

Props Documentation

Prop	Type	Default	Description
`product` *	`Product`	—	Product data object containing id, name, price, unit, quantity, etc.
`grower` *	`GrowerInfo`	—	Grower information including name, location, growingMethod, etc.
`featured`	`boolean`	`false`	Highlights the product with a special badge and styling
`distance`	`number`	—	Distance to the grower in miles (optional)
`loading`	`boolean`	`false`	Shows skeleton loading state
`onAddToCart`	`(product: Product) => void`	—	Callback fired when add to cart button is clicked
`onQuickView`	`(product: Product) => void`	—	Callback fired when quick view button is clicked

Component States

Featured Product

Organic Heirloom Tomatoes

Sweet and juicy heirloom tomatoes, perfect for salads or sandwiches

$4.99 /lb

In Stock

Out of Stock

Organic

Morning Dew Farm

Local Honey

Raw, unfiltered honey from local wildflowers

$12.00 /jar

Out of Stock

Low Stock Warning

Organic

Happy Acres Farm

Rainbow Chard

Colorful and nutritious chard, great for sautéing

$3.99 /bunch

Only 3 left!

Loading State

New Organic

Happy Acres Farm

Organic Heirloom Tomatoes

Sweet and juicy heirloom tomatoes, perfect for salads or sandwiches

$4.99 /lb

In Stock

Category Tree Selector

Hierarchical category selector with multi-level navigation, search, and bulk selection. Supports keyboard navigation and screen readers for accessibility.

Mode:

Compact Mode

Expanded by Default

🐄 Animal Products 32

🎨 Artisanal 28

🌽 Produce 45

Category Tree Usage

// Import the component
import CategoryTreeSelector from '$lib/components/market/CategoryTreeSelector.svelte';

// Define your category data
let selectedCategories = [];
const categories = [
  { id: 1, parentId: null, name: 'Produce', productCount: 45 },
  { id: 11, parentId: 1, name: 'Vegetables', productCount: 22 },
  { id: 111, parentId: 11, name: 'Root Vegetables', productCount: 7 },
  // ... more categories
];

// Handle category selection changes
function handleCategoryChange(ids) {
  // Update your state or filter products
}

// In your component template:
<CategoryTreeSelector
  {categories}
  bind:selectedCategories
  mode="multiple"
  searchable={true}
  expandedByDefault={false}
  onCategoryChange={handleCategoryChange}
/>

CategoryTreeSelector Props

Prop	Type	Default	Description
`categories` *	`Category[]`	—	Array of category objects with hierarchical structure (id, name, parentId, etc.)
`selectedCategories`	`number[]`	`[]`	Array of selected category IDs (bindable with bind:selectedCategories)
`mode`	`'single' \| 'multiple' \| 'navigation'`	`'multiple'`	Selection mode: single selection, multiple selection, or navigation only
`loading`	`boolean`	`false`	Shows loading skeleton state
`onCategoryChange`	`(ids: number[]) => void`	—	Callback fired when selection changes
`onCategoryNavigate`	`(id: number) => void`	—	Callback fired in navigation mode when a category is clicked
`expandedByDefault`	`boolean`	`false`	Start with all nodes expanded
`showProductCounts`	`boolean`	`true`	Display product counts for each category
`searchable`	`boolean`	`true`	Enable search functionality with highlighting
`compactMode`	`boolean`	`false`	Reduced spacing for dense layouts

Events & Callbacks

onCategoryChange

Fired when category selection changes. Receives array of selected category IDs.

onCategoryChange={(ids) => {
  // Update your state or filter products
}}

onCategoryNavigate

Fired in navigation mode when a category is clicked. Receives the category ID.

onCategoryNavigate={(id) => {
  // Navigate to category page
  goto(`/market/category/${id}`);
}}