docs: comprehensive updates for today's shop frontend improvements

Updated documentation to cover all work completed today:

## Database Setup (docs/getting-started/database-setup.md)
- Added data seeding section with all three scripts
- Documented inventory creation requirement
- Added complete setup workflow
- Included common issues and solutions
- Added database reset instructions

## New Troubleshooting Guide (docs/troubleshooting/shop-frontend.md)
Comprehensive troubleshooting for:

### Cart and Product Issues
- Products cannot be added to cart (inventory = 0)
- Cart is empty after adding products (session ID issue)
- Root causes and solutions with code examples

### Styling and Layout Issues
- Pages with no styling (not extending base template)
- Images not loading (placeholder SVG implementation)
- Detailed before/after examples

### Navigation and Routing Issues
- Product detail 404 (duplicate /shop prefix)
- Missing /shop/ in links
- Breadcrumb navigation patterns

### Landing Page Issues
- Vendor root 404 (no landing page)
- Breadcrumb home link configuration
- Auto-redirect behavior

### Alpine.js Issues
- Component data not available (parent init not called)
- Product ID undefined (window globals solution)
- Debugging tips and console commands

All issues encountered today are now documented with:
- Clear symptoms
- Root cause explanation
- How the system works
- Step-by-step solutions
- Code examples
- Verification steps

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-23 09:39:27 +01:00
parent 3d585e563f
commit f217defd60
2 changed files with 539 additions and 3 deletions

View File

@@ -31,13 +31,25 @@ DATABASE_URL=sqlite:///./ecommerce.db
make migrate-up
```
### 4. Verify Setup
### 4. Seed Test Data (Optional)
```bash
# Create test vendors, products, and inventory
python scripts/create_test_data.py
# Create inventory entries for existing products
python scripts/create_inventory.py
# Create landing pages for vendors
python scripts/create_landing_page.py
```
### 5. Verify Setup
```bash
# Check that everything is working
make verify-setup
```
### 5. Start Development
### 6. Start Development
```bash
# Start the development server
make dev
@@ -185,8 +197,139 @@ make migrate-status
4. **Include meaningful messages when creating migrations**
5. **Review generated migrations before applying them**
## Data Seeding for Development
### Overview
After setting up your database schema with migrations, you'll need test data to develop and test features. We provide several scripts to populate your database with sample data.
### Available Seeding Scripts
#### 1. Create Test Data
**Script:** `scripts/create_test_data.py`
Creates complete test data including vendors, marketplace products, vendor products, themes, and content pages.
```bash
python scripts/create_test_data.py
```
**What it creates:**
- 3 test vendors (WizaMart, Fashion Hub, The Book Store)
- 20 marketplace products per vendor
- Vendor-specific products with pricing
- Vendor themes with custom colors
- Sample CMS content pages (About, Contact, FAQ, etc.)
#### 2. Create Inventory Entries
**Script:** `scripts/create_inventory.py`
Creates inventory entries for products that don't have inventory. This is **required** for the shop to function properly, as products with 0 inventory cannot be added to cart.
```bash
python scripts/create_inventory.py
```
**What it does:**
- Finds all products without inventory entries
- Creates inventory record for each product
- Sets 100 units available in "Main Warehouse"
- Can be run multiple times (only creates missing entries)
**Why it's needed:**
- Product `available_inventory` is calculated from inventory entries
- Empty inventory table = 0 inventory for all products
- Add to cart functionality requires `available_inventory > 0`
#### 3. Create Landing Pages
**Script:** `scripts/create_landing_page.py`
Creates or updates landing pages for vendors with different templates.
```bash
# Interactive mode
python scripts/create_landing_page.py
# Or programmatically in Python
from scripts.create_landing_page import create_landing_page
create_landing_page('wizamart', template='modern')
```
**Available templates:**
- `default` - Clean professional layout with 3-column quick links
- `minimal` - Ultra-simple centered design with single CTA
- `modern` - Full-screen hero with animations and features
- `full` - Maximum features with split-screen hero and stats
### Complete Setup Workflow
For a fresh development environment with test data:
```bash
# 1. Setup database schema
make migrate-up
# 2. Create test vendors and products
python scripts/create_test_data.py
# 3. Create inventory (REQUIRED for shop to work)
python scripts/create_inventory.py
# 4. Create landing pages
python scripts/create_landing_page.py
# Follow interactive prompts to create landing pages
# 5. Start the server
make dev
# 6. Test the shop
# Visit: http://localhost:8000/vendors/wizamart/shop/
```
### Common Issues
**Problem: Products can't be added to cart**
```bash
# Solution: Create inventory entries
python scripts/create_inventory.py
```
**Problem: Landing page shows 404**
```bash
# Solution: Create landing page for the vendor
python scripts/create_landing_page.py
# OR the vendor will auto-redirect to /shop/
```
**Problem: No products showing in shop**
```bash
# Solution: Create test data
python scripts/create_test_data.py
```
### Database Reset (Development Only)
To start completely fresh:
```bash
# 1. Backup first (optional but recommended)
cp wizamart.db wizamart.db.backup
# 2. Delete database
rm wizamart.db
# 3. Recreate schema
make migrate-up
# 4. Seed all data
python scripts/create_test_data.py
python scripts/create_inventory.py
python scripts/create_landing_page.py
```
## Next Steps
- [Database Setup Guide](DATABASE_SETUP_GUIDE.md) - Complete database setup guide
- [Shop Setup Guide](../guides/shop-setup.md) - Configure vendor storefronts
- [Landing Pages Guide](../features/vendor-landing-pages.md) - Customize landing pages
- [Database Migrations Guide](../development/database-migrations.md) - Advanced migration workflows
- [API Documentation](../api/index.md) - Start building features