345 lines
11 KiB
Markdown
345 lines
11 KiB
Markdown
# Sweet Dreams Bakery - E-Commerce Website
|
|
|
|
A professional, fully-featured bakery e-commerce website built with pure HTML, CSS, and JavaScript. Features CSV-based product management, EmailJS integration for order processing, and a complete shopping cart system.
|
|
|
|
|
|
|
|
## 🌟 Features
|
|
|
|
### **Frontend-Only Architecture**
|
|
- Pure HTML5, CSS3, and JavaScript (ES6+)
|
|
- No backend required - runs entirely in the browser
|
|
- CSV-based product inventory for easy management
|
|
- EmailJS integration for professional order processing
|
|
- Local storage for cart persistence
|
|
|
|
### **E-Commerce Functionality**
|
|
- ✅ Dynamic product catalog loaded from CSV
|
|
- ✅ Advanced product filtering and search
|
|
- ✅ Shopping cart with quantity management
|
|
- ✅ Professional checkout process
|
|
- ✅ Email order confirmation system
|
|
- ✅ Stock quantity tracking
|
|
- ✅ Custom product options support
|
|
|
|
### **Professional Design**
|
|
- ✅ Bakery-themed color palette and typography
|
|
- ✅ Responsive design (mobile-first approach)
|
|
- ✅ Smooth animations and transitions
|
|
- ✅ Professional product photography integration
|
|
- ✅ Accessible and SEO-friendly structure
|
|
|
|
### **Business Features**
|
|
- ✅ Custom cake consultation forms
|
|
- ✅ Wedding cake specialization
|
|
- ✅ Dietary options support (gluten-free, vegan)
|
|
- ✅ Event date scheduling
|
|
- ✅ Pickup and delivery options
|
|
- ✅ Baker portfolio and process showcase
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### **1. Download and Setup**
|
|
```bash
|
|
# Clone or download the repository
|
|
git clone <repository-url> sweet-dreams-bakery
|
|
cd sweet-dreams-bakery
|
|
|
|
# Or simply download and extract the ZIP file
|
|
```
|
|
|
|
### **2. Configure EmailJS (Optional)**
|
|
1. Follow the detailed guide in [`EMAILJS_SETUP.md`](EMAILJS_SETUP.md)
|
|
2. Update the configuration in `script.js`:
|
|
```javascript
|
|
const emailJSConfig = {
|
|
serviceID: 'your_service_id',
|
|
templateID: 'your_template_id',
|
|
userID: 'your_user_id'
|
|
};
|
|
```
|
|
|
|
### **3. Start Local Server**
|
|
Choose one of these methods to run the website locally:
|
|
|
|
**Option A: Python HTTP Server**
|
|
```bash
|
|
# Python 3
|
|
python -m http.server 8000
|
|
|
|
# Python 2
|
|
python -m SimpleHTTPServer 8000
|
|
|
|
# Then visit: http://localhost:8000
|
|
```
|
|
|
|
**Option B: Node.js HTTP Server**
|
|
```bash
|
|
# Install http-server globally
|
|
npm install -g http-server
|
|
|
|
# Run server
|
|
http-server -p 8000
|
|
|
|
# Then visit: http://localhost:8000
|
|
```
|
|
|
|
**Option C: VS Code Live Server**
|
|
1. Install "Live Server" extension in VS Code
|
|
2. Right-click `index.html` → "Open with Live Server"
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
sweet-dreams-bakery/
|
|
├── index.html # Main website file
|
|
├── styles.css # Complete responsive styling
|
|
├── script.js # All interactive functionality
|
|
├── cake_inventory.csv # Product database (20 sample cakes)
|
|
├── images/ # Product images directory
|
|
│ ├── hero-cake.jpg # Main hero image
|
|
│ ├── baker-portrait.jpg # About section image
|
|
│ ├── gallery-*.jpg # Portfolio gallery images
|
|
│ └── product-*.jpg # Individual product images
|
|
├── README.md # This file
|
|
├── EMAILJS_SETUP.md # EmailJS configuration guide
|
|
├── EMAILJS_TEMPLATES.md # Email template code
|
|
└── sw.js # Service worker (optional)
|
|
```
|
|
|
|
## 🛍️ Product Management
|
|
|
|
### **Adding New Products**
|
|
Edit `cake_inventory.csv` with the following columns:
|
|
|
|
| Column | Description | Example |
|
|
|--------|-------------|---------|
|
|
| `id` | Unique product ID | `21` |
|
|
| `name` | Product name | `"Summer Berry Tart"` |
|
|
| `description` | Product description | `"Fresh seasonal berries..."` |
|
|
| `price` | Price in dollars | `45.99` |
|
|
| `category` | Product category | `"Specialty Desserts"` |
|
|
| `size_inches` | Cake diameter | `8` |
|
|
| `serves_people` | Number of servings | `10` |
|
|
| `weight_kg` | Weight in kilograms | `1.5` |
|
|
| `flavor` | Primary flavor | `"Mixed Berry"` |
|
|
| `image_url` | Image path/URL | `"images/berry-tart.jpg"` |
|
|
| `image_alt` | Alt text for accessibility | `"Fresh berry tart with cream"` |
|
|
| `stock_quantity` | Available quantity | `5` |
|
|
| `featured` | Featured product flag | `true/false` |
|
|
| `custom_available` | Custom orders available | `true/false` |
|
|
| `dietary_options` | Special dietary info | `"gluten-free available"` |
|
|
| `baker_name` | Baker who creates it | `"Sarah Mitchell"` |
|
|
| `date_created` | Creation date | `"2024-01-15"` |
|
|
| `sku` | Stock keeping unit | `"BERRY-TART-021"` |
|
|
| `occasion_type` | Suitable occasions | `"summer, birthday"` |
|
|
|
|
### **Product Categories**
|
|
- Wedding Cakes
|
|
- Birthday Cakes
|
|
- Celebration Cakes
|
|
- Cupcakes & Minis
|
|
- Specialty Desserts
|
|
- Seasonal Items
|
|
|
|
### **Image Requirements**
|
|
- **Recommended size**: 1000x1000px minimum
|
|
- **Format**: JPG, PNG, or WebP
|
|
- **Aspect ratio**: Square (1:1) preferred
|
|
- **File naming**: Descriptive names (e.g., `chocolate-wedding-cake.jpg`)
|
|
- **Alt text**: Always include descriptive alt text for accessibility
|
|
|
|
## ⚙️ Configuration
|
|
|
|
### **EmailJS Configuration**
|
|
See [`EMAILJS_SETUP.md`](EMAILJS_SETUP.md) for detailed setup instructions.
|
|
|
|
### **Color Customization**
|
|
Update CSS variables in `styles.css`:
|
|
```css
|
|
:root {
|
|
--color-primary: #F4B8C3; /* Soft pink frosting */
|
|
--color-secondary: #FFF5E6; /* Cream/vanilla */
|
|
--color-accent: #8B4B73; /* Rich berry */
|
|
--color-chocolate: #4A2C2A; /* Dark chocolate */
|
|
/* ... more variables */
|
|
}
|
|
```
|
|
|
|
### **Typography Customization**
|
|
Change fonts by updating the Google Fonts import in `index.html`:
|
|
```html
|
|
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
```
|
|
|
|
## 🎨 Customization Guide
|
|
|
|
### **Branding**
|
|
1. **Logo**: Replace the cake icon in the header with your logo
|
|
2. **Business Name**: Update "Sweet Dreams Bakery" throughout the site
|
|
3. **Contact Information**: Update phone, email, and address in the contact section
|
|
4. **Social Media**: Add your social media links in the footer
|
|
|
|
### **Content**
|
|
1. **About Section**: Replace baker information and story
|
|
2. **Hero Message**: Update the main headline and description
|
|
3. **Process Steps**: Customize the 4-step process description
|
|
4. **Gallery Images**: Add photos of your actual work
|
|
|
|
### **Functionality**
|
|
1. **Payment Processing**: The system uses a "pay later" approach - collect orders first, then arrange payment
|
|
2. **Delivery Areas**: Customize delivery options in the checkout form
|
|
3. **Lead Times**: Adjust minimum order advance notice requirements
|
|
4. **Business Hours**: Update operating hours in the contact section
|
|
|
|
## 📱 Responsive Design
|
|
|
|
The website is fully responsive with breakpoints at:
|
|
- **Mobile**: 480px and below
|
|
- **Tablet**: 768px and below
|
|
- **Desktop**: 1024px and above
|
|
- **Large screens**: 1200px and above
|
|
|
|
## 🔧 Browser Compatibility
|
|
|
|
**Supported Browsers:**
|
|
- Chrome 60+ ✅
|
|
- Firefox 55+ ✅
|
|
- Safari 12+ ✅
|
|
- Edge 79+ ✅
|
|
|
|
**Required Features:**
|
|
- CSS Grid and Flexbox
|
|
- JavaScript ES6+ (arrow functions, async/await)
|
|
- Local Storage API
|
|
- Fetch API
|
|
|
|
## 🚀 Deployment Options
|
|
|
|
### **Static Hosting Services**
|
|
Perfect for this frontend-only website:
|
|
|
|
**Netlify (Recommended)**
|
|
1. Drag and drop your project folder to [netlify.com](https://netlify.com)
|
|
2. Automatic HTTPS and CDN included
|
|
3. Custom domain support available
|
|
|
|
**Vercel**
|
|
1. Sign up at [vercel.com](https://vercel.com)
|
|
2. Import from Git or upload files
|
|
3. Instant deployment with preview URLs
|
|
|
|
**GitHub Pages**
|
|
1. Create a GitHub repository
|
|
2. Enable GitHub Pages in repository settings
|
|
3. Upload your files to the repository
|
|
|
|
### **Traditional Web Hosting**
|
|
Upload all files to your web hosting provider's public directory (usually `public_html` or `www`).
|
|
|
|
## 🛡️ Security & Privacy
|
|
|
|
### **Data Handling**
|
|
- All form data is processed client-side
|
|
- Cart data stored in browser's local storage
|
|
- No personal data stored on servers
|
|
- EmailJS handles email transmission securely
|
|
|
|
### **HTTPS Requirements**
|
|
- Required for production deployment
|
|
- Most static hosting services provide this automatically
|
|
- Necessary for some browser features to work properly
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### **Products Not Loading**
|
|
1. Check browser console for errors
|
|
2. Ensure `cake_inventory.csv` is in the root directory
|
|
3. Verify CSV format matches expected columns
|
|
4. Check file permissions and CORS settings
|
|
|
|
### **EmailJS Not Working**
|
|
1. Verify EmailJS configuration in `script.js`
|
|
2. Check EmailJS dashboard for service status
|
|
3. Ensure email templates are properly configured
|
|
4. Review browser console for API errors
|
|
|
|
### **Images Not Displaying**
|
|
1. Check image file paths in CSV
|
|
2. Verify images exist in the `images/` directory
|
|
3. Ensure proper file extensions (.jpg, .png, .webp)
|
|
4. Check browser console for 404 errors
|
|
|
|
### **Cart Not Persisting**
|
|
1. Ensure local storage is enabled in browser
|
|
2. Check for JavaScript errors in console
|
|
3. Verify domain consistency (don't mix http/https)
|
|
|
|
## 📈 Performance Optimization
|
|
|
|
### **Image Optimization**
|
|
1. Compress images before uploading
|
|
2. Use appropriate formats (WebP when supported)
|
|
3. Implement lazy loading (already included)
|
|
4. Consider using a CDN for images
|
|
|
|
### **Code Optimization**
|
|
1. Minify CSS and JavaScript for production
|
|
2. Enable gzip compression on server
|
|
3. Use browser caching headers
|
|
4. Consider implementing a service worker
|
|
|
|
## 🔄 Updates & Maintenance
|
|
|
|
### **Regular Tasks**
|
|
1. **Update Product Inventory**: Modify `cake_inventory.csv` as needed
|
|
2. **Add New Images**: Upload to `images/` directory
|
|
3. **Update Content**: Modify HTML content for seasonal changes
|
|
4. **Monitor Orders**: Check EmailJS dashboard regularly
|
|
|
|
### **Seasonal Updates**
|
|
1. Update featured products for holidays
|
|
2. Add seasonal items to inventory
|
|
3. Update hero images for special occasions
|
|
4. Modify color scheme for seasonal themes
|
|
|
|
## 📧 Email Templates
|
|
|
|
See [`EMAILJS_TEMPLATES.md`](EMAILJS_TEMPLATES.md) for:
|
|
- Customer order confirmation template
|
|
- Business notification template
|
|
- Newsletter subscription template
|
|
- Contact form auto-reply template
|
|
|
|
## 🤝 Support & Contribution
|
|
|
|
### **Getting Help**
|
|
1. Check this README first
|
|
2. Review browser console for errors
|
|
3. Verify EmailJS configuration
|
|
4. Check CSV file format
|
|
|
|
### **Feature Requests**
|
|
This is a complete, production-ready bakery website. Common customization requests:
|
|
- Online payment integration
|
|
- Inventory management system
|
|
- Customer account system
|
|
- Advanced booking calendar
|
|
|
|
## 📄 License
|
|
|
|
This project is provided as-is for educational and commercial use. You may modify and distribute it according to your needs.
|
|
|
|
## 🎯 Credits
|
|
|
|
- **Design**: Custom bakery-themed design system
|
|
- **Icons**: Font Awesome 6.4.0
|
|
- **Fonts**: Google Fonts (Playfair Display + Inter)
|
|
- **Images**: Unsplash (placeholder images)
|
|
- **Email Service**: EmailJS
|
|
|
|
---
|
|
|
|
**Made with ❤️ for Sweet Dreams Bakery**
|
|
|
|
For questions or support, please refer to the documentation files included in this project. |