Artisan Pottery Studio Website

A beautiful, responsive e-commerce website for selling handcrafted pottery, built with HTML, CSS, and JavaScript. The website reads product data from a CSV file and provides a complete shopping experience.

Features

🏺 Product Management

• CSV-based inventory: Easy-to-manage product catalog using pottery_inventory.csv
• Dynamic product display: Products are loaded and displayed from the CSV file
• Rich product information: Includes dimensions, materials, artist info, and care instructions
• Stock management: Shows stock levels and prevents ordering out-of-stock items
• Featured products: Highlight special items with featured badges

🛒 Shopping Experience

• Interactive shopping cart: Add, remove, and modify quantities
• Persistent cart: Cart contents saved in browser localStorage
• Product details modal: Detailed view with specifications and features
• Stock validation: Prevents adding more items than available stock
• Professional checkout: Comprehensive customer details collection
• Email order submission: Real email sending via EmailJS integration

📧 Email Integration

• EmailJS powered: Real email sending without backend server
• Order confirmations: Automatic emails to business and customers
• Contact form emails: Direct inquiries to your business email
• Newsletter subscriptions: Automated subscriber management
• Professional templates: HTML email templates for all communications

🔍 Search & Filter

• Category filtering: Filter by Mugs, Bowls, Vases, Plant Pots, Tea Sets, Plates
• Search functionality: Search across product names, descriptions, materials, colors, and artists
• Sorting options: Sort by name, price (low to high, high to low), or newest first
• Real-time filtering: Instant results as you type

🎨 Design & Usability

• Responsive design: Works beautifully on desktop, tablet, and mobile
• Professional styling: Earthy color scheme perfect for artisan pottery
• Smooth animations: Engaging hover effects and transitions
• Accessibility: Proper semantic HTML and keyboard navigation

📧 Additional Features

• Contact form: Customer inquiry form with validation
• Newsletter signup: Email subscription for updates
• About section: Story and features highlighting craftsmanship
• Social media integration: Links to various social platforms

File Structure

pottery/
├── index.html              # Main HTML file
├── styles.css              # CSS styling
├── script.js               # JavaScript functionality
├── pottery_inventory.csv   # Product database
├── images/                 # Product images directory
│   └── README.md          # Image requirements and list
└── README.md              # This file

Product Data Structure

The CSV file includes these fields for each pottery item:

Field	Description	Example
id	Unique product identifier	1
name	Product name	"Classic Blue Mug"
description	Product description	"Handcrafted ceramic mug..."
price	Price in USD	24.99
category	Product category	"Mugs"
material	Clay/ceramic type	"Stoneware"
color	Primary color	"Blue"
dimensions_height_cm	Height in centimeters	10
dimensions_width_cm	Width in centimeters	8
dimensions_depth_cm	Depth in centimeters	8
weight_kg	Weight in kilograms	0.35
image_url	Path to product image	"images/blue_mug.jpg"
image_alt	Alt text for image	"Classic blue ceramic mug"
stock_quantity	Items in stock	15
featured	Is featured product	true/false
glazed	Has glaze finish	true/false
dishwasher_safe	Dishwasher safe	true/false
microwave_safe	Microwave safe	true/false
handmade	Handcrafted item	true/false
artist	Creator name	"Sarah Chen"
date_created	Creation date	"2024-08-15"
sku	Stock keeping unit	"POT-MUG-001"

How to Run

Option 1: Local Web Server (Recommended)

Due to CORS restrictions when loading CSV files, you need to run a local web server:

Using Python (if installed):

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Using Node.js (if installed):

npx http-server -p 8000

Using PHP (if installed):

php -S localhost:8000

Then open your browser and navigate to http://localhost:8000

Option 2: VS Code Live Server Extension

1. Install the "Live Server" extension in VS Code
2. Right-click on index.html
3. Select "Open with Live Server"

Option 3: Browser Extensions

Some browsers may allow local file access with extensions like "CORS Unblock" but this is not recommended for security reasons.

Email Setup (EmailJS)

To enable real email sending for orders, contact forms, and newsletter subscriptions:

1. Follow the comprehensive guide: See EMAILJS_SETUP.md for detailed instructions
2. Create EmailJS account: Free account at emailjs.com
3. Configure email service: Connect Gmail, Outlook, or custom SMTP
4. Create email templates: For orders, contact, and newsletter
5. Update configuration: Add your EmailJS keys to script.js

Quick Setup:

// In script.js, update these values:
const EMAILJS_CONFIG = {
    PUBLIC_KEY: 'your_emailjs_public_key',
    SERVICE_ID: 'your_service_id', 
    TEMPLATE_ID: 'your_template_id'
};

Without EmailJS setup, the website works in demo mode with simulated email sending.

Customization

Adding Products

1. Open pottery_inventory.csv
2. Add a new row with all required fields
3. Save the file
4. Refresh the website - new products will appear automatically

Modifying Styles

• Edit styles.css to change colors, fonts, layouts
• CSS variables are defined at the top for easy theme customization
• All colors use the :root CSS variables for consistency

Extending Functionality

• script.js contains all the interactive features
• Functions are well-documented and modular
• Easy to add new features like wishlist, reviews, etc.

Browser Compatibility

• Modern browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers: iOS Safari, Chrome Mobile, Samsung Internet
• Features used: ES6 JavaScript, CSS Grid, Flexbox, CSS Variables

Performance Notes

• Lightweight: No external dependencies except Google Fonts and Font Awesome
• Fast loading: Optimized CSS and efficient JavaScript
• Image optimization: Placeholder system ready for real product photos
• Caching: Browser localStorage used for cart persistence

Future Enhancements

• Real image gallery: Replace icon placeholders with actual product photos
• Payment integration: Add Stripe, PayPal, or other payment processors
• User accounts: Customer login, order history, saved addresses
• Inventory management: Admin panel for updating stock and products
• Reviews system: Customer reviews and ratings
• Wishlist feature: Save products for later
• Advanced search: Filters by price range, materials, sizes
• Multi-language support: Internationalization for global customers

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Support

For questions or issues, please contact the development team or open an issue in the repository.

---

Built with ❤️ for artisan pottery makers and lovers of handcrafted ceramics.