olipassey/web-pottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
web-pottery/README.md
DESKTOP-G4D78VI\Oli 8bacf3b2bb Initial
2025-09-27 01:46:37 +01:00

7.6 KiB
Raw Permalink Blame History

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.

Reference in New Issue View Git Blame Copy Permalink