feat: implement vendor landing pages with multi-template support and fix shop routing
Major improvements to shop URL routing and vendor landing page system:
## Landing Page System
- Add template field to ContentPage model for flexible landing page designs
- Create 4 landing page templates: default, minimal, modern, and full
- Implement smart root handler to serve landing pages or redirect to shop
- Add create_landing_page.py script for easy landing page management
- Support both domain/subdomain and path-based vendor access
- Add comprehensive landing page documentation
## Route Fixes
- Fix duplicate /shop prefix in shop_pages.py routes
- Correct product detail page routing (was /shop/shop/products/{id})
- Update all shop routes to work with router prefix mounting
- Remove unused public vendor endpoints (/api/v1/public/vendors)
## Template Link Corrections
- Fix all shop template links to include /shop/ prefix
- Update breadcrumb 'Home' links to point to vendor root (landing page)
- Update header navigation 'Home' link to point to vendor root
- Correct CMS page links in footer navigation
- Fix account, cart, and error page navigation links
## Navigation Architecture
- Establish two-tier navigation: landing page (/) and shop (/shop/)
- Document complete navigation flow and URL hierarchy
- Support for vendors with or without landing pages (auto-redirect fallback)
- Consistent breadcrumb and header navigation behavior
## Documentation
- Add vendor-landing-pages.md feature documentation
- Add navigation-flow.md with complete URL hierarchy
- Update shop architecture docs with error handling section
- Add orphaned docs to mkdocs.yml navigation
- Document multi-access routing patterns
## Database
- Migration f68d8da5315a: add template field to content_pages table
- Support template values: default, minimal, modern, full
This establishes a complete landing page system allowing vendors to have
custom marketing homepages separate from their e-commerce shop, with
flexible template options and proper navigation hierarchy.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
209
TEST_LANDING_PAGES.md
Normal file
209
TEST_LANDING_PAGES.md
Normal file
@@ -0,0 +1,209 @@
|
||||
# 🧪 Landing Pages Test Guide
|
||||
|
||||
## ✅ Setup Complete!
|
||||
|
||||
Landing pages have been created for three vendors with different templates.
|
||||
|
||||
## 📍 Test URLs
|
||||
|
||||
### 1. WizaMart - Modern Template
|
||||
**Landing Page:**
|
||||
- http://localhost:8000/vendors/wizamart/
|
||||
|
||||
**Shop Page:**
|
||||
- http://localhost:8000/vendors/wizamart/shop/
|
||||
|
||||
**What to expect:**
|
||||
- Full-screen hero section with animations
|
||||
- "Why Choose Us" feature grid
|
||||
- Gradient CTA section
|
||||
- Modern, animated design
|
||||
|
||||
---
|
||||
|
||||
### 2. Fashion Hub - Minimal Template
|
||||
**Landing Page:**
|
||||
- http://localhost:8000/vendors/fashionhub/
|
||||
|
||||
**Shop Page:**
|
||||
- http://localhost:8000/vendors/fashionhub/shop/
|
||||
|
||||
**What to expect:**
|
||||
- Ultra-simple centered design
|
||||
- Single "Enter Shop" button
|
||||
- Clean, minimal aesthetic
|
||||
- No distractions
|
||||
|
||||
---
|
||||
|
||||
### 3. The Book Store - Full Template
|
||||
**Landing Page:**
|
||||
- http://localhost:8000/vendors/bookstore/
|
||||
|
||||
**Shop Page:**
|
||||
- http://localhost:8000/vendors/bookstore/shop/
|
||||
|
||||
**What to expect:**
|
||||
- Split-screen hero layout
|
||||
- Stats section (100+ Products, 24/7 Support, ⭐⭐⭐⭐⭐)
|
||||
- 4-feature grid
|
||||
- Multiple CTA sections
|
||||
- Most comprehensive layout
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Test Scenarios
|
||||
|
||||
### Test 1: Landing Page Display
|
||||
1. Visit each vendor's landing page URL
|
||||
2. Verify the correct template is rendered
|
||||
3. Check that vendor name, logo, and theme colors appear correctly
|
||||
|
||||
### Test 2: Navigation
|
||||
1. Click "Shop Now" / "Enter Shop" button on landing page
|
||||
2. Should navigate to `/shop/` (product catalog)
|
||||
3. Click logo or "Home" in navigation
|
||||
4. Should return to landing page
|
||||
|
||||
### Test 3: Theme Integration
|
||||
1. Each vendor uses their theme colors
|
||||
2. Logo should display correctly
|
||||
3. Dark mode toggle should work
|
||||
|
||||
### Test 4: Responsive Design
|
||||
1. Resize browser window
|
||||
2. All templates should be mobile-friendly
|
||||
3. Navigation should collapse on mobile
|
||||
|
||||
### Test 5: Fallback Behavior (No Landing Page)
|
||||
To test fallback:
|
||||
```python
|
||||
# Delete a landing page
|
||||
python -c "
|
||||
from app.core.database import SessionLocal
|
||||
from models.database.content_page import ContentPage
|
||||
|
||||
db = SessionLocal()
|
||||
page = db.query(ContentPage).filter(ContentPage.vendor_id == 1, ContentPage.slug == 'landing').first()
|
||||
if page:
|
||||
db.delete(page)
|
||||
db.commit()
|
||||
print('Landing page deleted')
|
||||
db.close()
|
||||
"
|
||||
```
|
||||
|
||||
Then visit: http://localhost:8000/vendors/wizamart/
|
||||
- Should automatically redirect to: http://localhost:8000/vendors/wizamart/shop/
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Change Templates
|
||||
|
||||
Want to try a different template? Run:
|
||||
|
||||
```bash
|
||||
python scripts/create_landing_page.py
|
||||
```
|
||||
|
||||
Or programmatically:
|
||||
|
||||
```python
|
||||
from scripts.create_landing_page import create_landing_page
|
||||
|
||||
# Change WizaMart to default template
|
||||
create_landing_page('wizamart', template='default')
|
||||
|
||||
# Change to minimal
|
||||
create_landing_page('wizamart', template='minimal')
|
||||
|
||||
# Change to full
|
||||
create_landing_page('wizamart', template='full')
|
||||
|
||||
# Change back to modern
|
||||
create_landing_page('wizamart', template='modern')
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Current Setup
|
||||
|
||||
| Vendor | Subdomain | Template | Landing Page URL |
|
||||
|--------|-----------|----------|------------------|
|
||||
| WizaMart | wizamart | **modern** | http://localhost:8000/vendors/wizamart/ |
|
||||
| Fashion Hub | fashionhub | **minimal** | http://localhost:8000/vendors/fashionhub/ |
|
||||
| The Book Store | bookstore | **full** | http://localhost:8000/vendors/bookstore/ |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Verify Database
|
||||
|
||||
Check landing pages in database:
|
||||
|
||||
```bash
|
||||
sqlite3 letzshop.db "SELECT id, vendor_id, slug, title, template, is_published FROM content_pages WHERE slug='landing';"
|
||||
```
|
||||
|
||||
Expected output:
|
||||
```
|
||||
8|1|landing|Welcome to WizaMart|modern|1
|
||||
9|2|landing|Fashion Hub - Style & Elegance|minimal|1
|
||||
10|3|landing|The Book Store - Your Literary Haven|full|1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Landing Page Not Showing
|
||||
1. Check database: `SELECT * FROM content_pages WHERE slug='landing';`
|
||||
2. Verify `is_published=1`
|
||||
3. Check vendor ID matches
|
||||
4. Look at server logs for errors
|
||||
|
||||
### Wrong Template Rendering
|
||||
1. Check `template` field in database
|
||||
2. Verify template file exists: `app/templates/vendor/landing-{template}.html`
|
||||
3. Restart server if needed
|
||||
|
||||
### Theme Not Applied
|
||||
1. Verify vendor has theme: `SELECT * FROM vendor_themes WHERE vendor_id=1;`
|
||||
2. Check theme middleware is running (see server logs)
|
||||
3. Inspect CSS variables in browser: `var(--color-primary)`
|
||||
|
||||
### 404 Error
|
||||
1. Ensure server is running: `python main.py` or `make run`
|
||||
2. Check middleware is detecting vendor (see logs)
|
||||
3. Verify route registration in startup logs
|
||||
|
||||
---
|
||||
|
||||
## ✅ Success Checklist
|
||||
|
||||
- [ ] WizaMart landing page loads (modern template)
|
||||
- [ ] Fashion Hub landing page loads (minimal template)
|
||||
- [ ] Book Store landing page loads (full template)
|
||||
- [ ] "Shop Now" buttons work correctly
|
||||
- [ ] Theme colors and logos display
|
||||
- [ ] Mobile responsive design works
|
||||
- [ ] Dark mode toggle works
|
||||
- [ ] Navigation back to landing page works
|
||||
- [ ] Fallback redirect to /shop/ works (when no landing page)
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Next Steps
|
||||
|
||||
Once testing is complete:
|
||||
|
||||
1. **Create Landing Pages via Admin Panel** (future feature)
|
||||
2. **Build Visual Page Builder** (Phase 2)
|
||||
3. **Add More Templates** as needed
|
||||
4. **Customize Content** for each vendor
|
||||
|
||||
For now, use the Python script to manage landing pages:
|
||||
```bash
|
||||
python scripts/create_landing_page.py
|
||||
```
|
||||
|
||||
Happy testing! 🚀
|
||||
@@ -0,0 +1,28 @@
|
||||
"""add template field to content pages for landing page designs
|
||||
|
||||
Revision ID: f68d8da5315a
|
||||
Revises: 72aa309d4007
|
||||
Create Date: 2025-11-22 23:51:40.694983
|
||||
|
||||
"""
|
||||
from typing import Sequence, Union
|
||||
|
||||
from alembic import op
|
||||
import sqlalchemy as sa
|
||||
|
||||
|
||||
# revision identifiers, used by Alembic.
|
||||
revision: str = 'f68d8da5315a'
|
||||
down_revision: Union[str, None] = '72aa309d4007'
|
||||
branch_labels: Union[str, Sequence[str], None] = None
|
||||
depends_on: Union[str, Sequence[str], None] = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
# Add template column to content_pages table
|
||||
op.add_column('content_pages', sa.Column('template', sa.String(length=50), nullable=False, server_default='default'))
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
# Remove template column from content_pages table
|
||||
op.drop_column('content_pages', 'template')
|
||||
@@ -4,12 +4,12 @@ API router configuration for multi-tenant ecommerce platform.
|
||||
|
||||
This module provides:
|
||||
- API version 1 route aggregation
|
||||
- Route organization by user type (admin, vendor, public)
|
||||
- Route organization by user type (admin, vendor, shop)
|
||||
- Proper route prefixing and tagging
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter
|
||||
from app.api.v1 import admin, vendor, public, shop
|
||||
from app.api.v1 import admin, vendor, shop
|
||||
|
||||
api_router = APIRouter()
|
||||
|
||||
@@ -35,17 +35,6 @@ api_router.include_router(
|
||||
tags=["vendor"]
|
||||
)
|
||||
|
||||
# ============================================================================
|
||||
# PUBLIC/CUSTOMER ROUTES (Customer-facing)
|
||||
# Prefix: /api/v1/public
|
||||
# ============================================================================
|
||||
|
||||
api_router.include_router(
|
||||
public.router,
|
||||
prefix="/v1/public",
|
||||
tags=["public"]
|
||||
)
|
||||
|
||||
# ============================================================================
|
||||
# SHOP ROUTES (Public shop frontend API)
|
||||
# Prefix: /api/v1/shop
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
API Version 1 - All endpoints
|
||||
"""
|
||||
|
||||
from . import admin, vendor, public, shop
|
||||
from . import admin, vendor, shop
|
||||
|
||||
__all__ = ["admin", "vendor", "public", "shop"]
|
||||
__all__ = ["admin", "vendor", "shop"]
|
||||
@@ -1,19 +0,0 @@
|
||||
# app/api/v1/public/__init__.py
|
||||
"""
|
||||
Public API endpoints (non-shop, non-authenticated).
|
||||
|
||||
Note: Shop-related endpoints have been migrated to /api/v1/shop/*
|
||||
This module now only contains truly public endpoints:
|
||||
- Vendor lookup (by code, subdomain, ID)
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter
|
||||
from .vendors import vendors
|
||||
|
||||
# Create public router
|
||||
router = APIRouter()
|
||||
|
||||
# Include vendor lookup endpoints (not shop-specific)
|
||||
router.include_router(vendors.router, prefix="/vendors", tags=["public-vendors"])
|
||||
|
||||
__all__ = ["router"]
|
||||
2
app/api/v1/public/vendors/__init__.py
vendored
2
app/api/v1/public/vendors/__init__.py
vendored
@@ -1,2 +0,0 @@
|
||||
# app/api/v1/public/vendors/__init__.py
|
||||
"""Vendor-specific public API endpoints"""
|
||||
128
app/api/v1/public/vendors/vendors.py
vendored
128
app/api/v1/public/vendors/vendors.py
vendored
@@ -1,128 +0,0 @@
|
||||
# app/api/v1/public/vendors/vendors.py
|
||||
"""
|
||||
Public vendor information endpoints.
|
||||
|
||||
Provides public-facing vendor lookup and information retrieval.
|
||||
"""
|
||||
|
||||
import logging
|
||||
from fastapi import APIRouter, Depends, HTTPException, Path
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from app.core.database import get_db
|
||||
from models.database.vendor import Vendor
|
||||
|
||||
router = APIRouter()
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@router.get("/by-code/{vendor_code}")
|
||||
def get_vendor_by_code(
|
||||
vendor_code: str = Path(..., description="Vendor code (e.g., TECHSTORE233)"),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Get public vendor information by vendor code.
|
||||
|
||||
This endpoint is used by:
|
||||
- Frontend vendor login page to validate vendor existence
|
||||
- Customer shop to display vendor information
|
||||
|
||||
Returns basic vendor information (no sensitive data).
|
||||
"""
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.vendor_code == vendor_code.upper(),
|
||||
Vendor.is_active == True
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
logger.warning(f"Vendor lookup failed for code: {vendor_code}")
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail=f"Vendor '{vendor_code}' not found or inactive"
|
||||
)
|
||||
|
||||
logger.info(f"Vendor lookup successful: {vendor.vendor_code}")
|
||||
|
||||
# Return public vendor information (no sensitive data)
|
||||
return {
|
||||
"id": vendor.id,
|
||||
"vendor_code": vendor.vendor_code,
|
||||
"subdomain": vendor.subdomain,
|
||||
"name": vendor.name,
|
||||
"description": vendor.description,
|
||||
"website": vendor.website,
|
||||
"is_active": vendor.is_active,
|
||||
"is_verified": vendor.is_verified
|
||||
}
|
||||
|
||||
|
||||
@router.get("/by-subdomain/{subdomain}")
|
||||
def get_vendor_by_subdomain(
|
||||
subdomain: str = Path(..., description="Vendor subdomain (e.g., techstore233)"),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Get public vendor information by subdomain.
|
||||
|
||||
Used for subdomain-based vendor detection in production environments.
|
||||
Example: techstore233.platform.com -> subdomain is "techstore233"
|
||||
"""
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.subdomain == subdomain.lower(),
|
||||
Vendor.is_active == True
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
logger.warning(f"Vendor lookup failed for subdomain: {subdomain}")
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail=f"Vendor with subdomain '{subdomain}' not found or inactive"
|
||||
)
|
||||
|
||||
logger.info(f"Vendor lookup by subdomain successful: {vendor.vendor_code}")
|
||||
|
||||
return {
|
||||
"id": vendor.id,
|
||||
"vendor_code": vendor.vendor_code,
|
||||
"subdomain": vendor.subdomain,
|
||||
"name": vendor.name,
|
||||
"description": vendor.description,
|
||||
"website": vendor.website,
|
||||
"is_active": vendor.is_active,
|
||||
"is_verified": vendor.is_verified
|
||||
}
|
||||
|
||||
|
||||
@router.get("/{vendor_id}/info")
|
||||
def get_vendor_info(
|
||||
vendor_id: int = Path(..., description="Vendor ID"),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Get public vendor information by ID.
|
||||
|
||||
Used when vendor_id is already known (e.g., from URL parameters).
|
||||
"""
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.id == vendor_id,
|
||||
Vendor.is_active == True
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
logger.warning(f"Vendor lookup failed for ID: {vendor_id}")
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail=f"Vendor with ID {vendor_id} not found or inactive"
|
||||
)
|
||||
|
||||
return {
|
||||
"id": vendor.id,
|
||||
"vendor_code": vendor.vendor_code,
|
||||
"subdomain": vendor.subdomain,
|
||||
"name": vendor.name,
|
||||
"description": vendor.description,
|
||||
"website": vendor.website,
|
||||
"is_active": vendor.is_active,
|
||||
"is_verified": vendor.is_verified
|
||||
}
|
||||
@@ -13,21 +13,21 @@ AUTHENTICATION:
|
||||
* Authorization header - for API calls
|
||||
- Customers CANNOT access admin or vendor routes
|
||||
|
||||
Routes:
|
||||
- GET /shop/ → Shop homepage / product catalog
|
||||
- GET /shop/products → Product catalog
|
||||
- GET /shop/products/{id} → Product detail page
|
||||
- GET /shop/categories/{slug} → Category products
|
||||
- GET /shop/cart → Shopping cart
|
||||
- GET /shop/checkout → Checkout process
|
||||
- GET /shop/account/register → Customer registration
|
||||
- GET /shop/account/login → Customer login
|
||||
- GET /shop/account/dashboard → Customer dashboard (auth required)
|
||||
- GET /shop/account/orders → Order history (auth required)
|
||||
- GET /shop/account/orders/{id} → Order detail (auth required)
|
||||
- GET /shop/account/profile → Customer profile (auth required)
|
||||
- GET /shop/account/addresses → Address management (auth required)
|
||||
- GET /shop/{slug} → Dynamic content pages (CMS): /about, /faq, /contact, etc.
|
||||
Routes (all mounted at /shop/* or /vendors/{code}/shop/* prefix):
|
||||
- GET / → Shop homepage / product catalog
|
||||
- GET /products → Product catalog
|
||||
- GET /products/{id} → Product detail page
|
||||
- GET /categories/{slug} → Category products
|
||||
- GET /cart → Shopping cart
|
||||
- GET /checkout → Checkout process
|
||||
- GET /account/register → Customer registration
|
||||
- GET /account/login → Customer login
|
||||
- GET /account/dashboard → Customer dashboard (auth required)
|
||||
- GET /account/orders → Order history (auth required)
|
||||
- GET /account/orders/{id} → Order detail (auth required)
|
||||
- GET /account/profile → Customer profile (auth required)
|
||||
- GET /account/addresses → Address management (auth required)
|
||||
- GET /{slug} → Dynamic content pages (CMS): /about, /faq, /contact, etc.
|
||||
"""
|
||||
|
||||
import logging
|
||||
@@ -188,7 +188,7 @@ async def shop_products_page(request: Request, db: Session = Depends(get_db)):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/products/{product_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/products/{product_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_product_detail_page(
|
||||
request: Request,
|
||||
product_id: int = Path(..., description="Product ID")
|
||||
@@ -212,7 +212,7 @@ async def shop_product_detail_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/categories/{category_slug}", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/categories/{category_slug}", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_category_page(
|
||||
request: Request,
|
||||
category_slug: str = Path(..., description="Category slug")
|
||||
@@ -236,7 +236,7 @@ async def shop_category_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/cart", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/cart", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_cart_page(request: Request):
|
||||
"""
|
||||
Render shopping cart page.
|
||||
@@ -257,7 +257,7 @@ async def shop_cart_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/checkout", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/checkout", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_checkout_page(request: Request):
|
||||
"""
|
||||
Render checkout page.
|
||||
@@ -278,7 +278,7 @@ async def shop_checkout_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/search", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/search", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_search_page(request: Request):
|
||||
"""
|
||||
Render search results page.
|
||||
@@ -303,7 +303,7 @@ async def shop_search_page(request: Request):
|
||||
# CUSTOMER ACCOUNT - PUBLIC ROUTES (No Authentication)
|
||||
# ============================================================================
|
||||
|
||||
@router.get("/shop/account/register", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/register", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_register_page(request: Request):
|
||||
"""
|
||||
Render customer registration page.
|
||||
@@ -324,7 +324,7 @@ async def shop_register_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/login", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/login", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_login_page(request: Request):
|
||||
"""
|
||||
Render customer login page.
|
||||
@@ -345,7 +345,7 @@ async def shop_login_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/forgot-password", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/forgot-password", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_forgot_password_page(request: Request):
|
||||
"""
|
||||
Render forgot password page.
|
||||
@@ -370,8 +370,8 @@ async def shop_forgot_password_page(request: Request):
|
||||
# CUSTOMER ACCOUNT - AUTHENTICATED ROUTES
|
||||
# ============================================================================
|
||||
|
||||
@router.get("/shop/account/", response_class=RedirectResponse, include_in_schema=False)
|
||||
async def shop_account_root():
|
||||
@router.get("/account/", response_class=RedirectResponse, include_in_schema=False)
|
||||
async def shop_account_root(request: Request):
|
||||
"""
|
||||
Redirect /shop/account/ to dashboard.
|
||||
"""
|
||||
@@ -384,10 +384,20 @@ async def shop_account_root():
|
||||
}
|
||||
)
|
||||
|
||||
return RedirectResponse(url="/shop/account/dashboard", status_code=302)
|
||||
# Get base_url from context for proper redirect
|
||||
vendor = getattr(request.state, 'vendor', None)
|
||||
vendor_context = getattr(request.state, 'vendor_context', None)
|
||||
access_method = vendor_context.get('detection_method', 'unknown') if vendor_context else 'unknown'
|
||||
|
||||
base_url = "/"
|
||||
if access_method == "path" and vendor:
|
||||
full_prefix = vendor_context.get('full_prefix', '/vendor/') if vendor_context else '/vendor/'
|
||||
base_url = f"{full_prefix}{vendor.subdomain}/"
|
||||
|
||||
return RedirectResponse(url=f"{base_url}shop/account/dashboard", status_code=302)
|
||||
|
||||
|
||||
@router.get("/shop/account/dashboard", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/dashboard", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_account_dashboard_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -413,7 +423,7 @@ async def shop_account_dashboard_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/orders", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/orders", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_orders_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -439,7 +449,7 @@ async def shop_orders_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/orders/{order_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/orders/{order_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_order_detail_page(
|
||||
request: Request,
|
||||
order_id: int = Path(..., description="Order ID"),
|
||||
@@ -466,7 +476,7 @@ async def shop_order_detail_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/profile", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/profile", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_profile_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -492,7 +502,7 @@ async def shop_profile_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/addresses", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/addresses", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_addresses_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -518,7 +528,7 @@ async def shop_addresses_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/wishlist", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/wishlist", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_wishlist_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -544,7 +554,7 @@ async def shop_wishlist_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/settings", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/settings", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_settings_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
>
|
||||
<label for="rememberMe">Remember me</label>
|
||||
</div>
|
||||
<a href="/shop/account/forgot-password" class="forgot-password">
|
||||
<a href="{{ base_url }}shop/account/forgot-password" class="forgot-password">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
@@ -113,12 +113,12 @@
|
||||
<!-- Register Link -->
|
||||
<div class="login-footer">
|
||||
<div class="auth-footer-text">Don't have an account?</div>
|
||||
<a href="/shop/account/register">Create an account</a>
|
||||
<a href="{{ base_url }}shop/account/register">Create an account</a>
|
||||
</div>
|
||||
|
||||
<!-- Back to Shop -->
|
||||
<div class="login-footer" style="border-top: none; padding-top: 0;">
|
||||
<a href="/shop">← Continue shopping</a>
|
||||
<a href="{{ base_url }}shop/">← Continue shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
<!-- Login Link -->
|
||||
<div class="login-footer">
|
||||
<div class="auth-footer-text">Already have an account?</div>
|
||||
<a href="/shop/account/login">Sign in instead</a>
|
||||
<a href="{{ base_url }}shop/account/login">Sign in instead</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
{# Vendor Logo #}
|
||||
<div class="flex items-center">
|
||||
<a href="{{ base_url }}" class="flex items-center space-x-3">
|
||||
<a href="{{ base_url }}shop/" class="flex items-center space-x-3">
|
||||
{% if theme.branding.logo %}
|
||||
{# Show light logo in light mode, dark logo in dark mode #}
|
||||
<img x-show="!dark"
|
||||
@@ -83,13 +83,13 @@
|
||||
<a href="{{ base_url }}" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
Home
|
||||
</a>
|
||||
<a href="{{ base_url }}products" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
<a href="{{ base_url }}shop/products" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
Products
|
||||
</a>
|
||||
<a href="{{ base_url }}about" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
<a href="{{ base_url }}shop/about" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
About
|
||||
</a>
|
||||
<a href="{{ base_url }}contact" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
<a href="{{ base_url }}shop/contact" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
Contact
|
||||
</a>
|
||||
</nav>
|
||||
@@ -106,7 +106,7 @@
|
||||
</button>
|
||||
|
||||
{# Cart #}
|
||||
<a href="{{ base_url }}cart" class="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<a href="{{ base_url }}shop/cart" class="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
@@ -132,7 +132,7 @@
|
||||
</button>
|
||||
|
||||
{# Account #}
|
||||
<a href="{{ base_url }}account" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<a href="{{ base_url }}shop/account" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
@@ -207,9 +207,9 @@
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Quick Links</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{{ base_url }}products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
<li><a href="{{ base_url }}shop/products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
{% for page in col1_pages %}
|
||||
<li><a href="{{ base_url }}{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
<li><a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -220,7 +220,7 @@
|
||||
<h4 class="font-semibold mb-4">Information</h4>
|
||||
<ul class="space-y-2">
|
||||
{% for page in col2_pages %}
|
||||
<li><a href="{{ base_url }}{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
<li><a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -230,18 +230,18 @@
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Quick Links</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{{ base_url }}products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
<li><a href="{{ base_url }}about" class="text-gray-600 hover:text-primary dark:text-gray-400">About Us</a></li>
|
||||
<li><a href="{{ base_url }}contact" class="text-gray-600 hover:text-primary dark:text-gray-400">Contact</a></li>
|
||||
<li><a href="{{ base_url }}shop/products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
<li><a href="{{ base_url }}shop/about" class="text-gray-600 hover:text-primary dark:text-gray-400">About Us</a></li>
|
||||
<li><a href="{{ base_url }}shop/contact" class="text-gray-600 hover:text-primary dark:text-gray-400">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Information</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{{ base_url }}faq" class="text-gray-600 hover:text-primary dark:text-gray-400">FAQ</a></li>
|
||||
<li><a href="{{ base_url }}shipping" class="text-gray-600 hover:text-primary dark:text-gray-400">Shipping</a></li>
|
||||
<li><a href="{{ base_url }}returns" class="text-gray-600 hover:text-primary dark:text-gray-400">Returns</a></li>
|
||||
<li><a href="{{ base_url }}shop/faq" class="text-gray-600 hover:text-primary dark:text-gray-400">FAQ</a></li>
|
||||
<li><a href="{{ base_url }}shop/shipping" class="text-gray-600 hover:text-primary dark:text-gray-400">Shipping</a></li>
|
||||
<li><a href="{{ base_url }}shop/returns" class="text-gray-600 hover:text-primary dark:text-gray-400">Returns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<h1>🛒 Shopping Cart</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a href="/shop" class="btn-secondary">← Continue Shopping</a>
|
||||
<a href="{{ base_url }}shop/" class="btn-secondary">← Continue Shopping</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="empty-state-icon">🛒</div>
|
||||
<h3>Your cart is empty</h3>
|
||||
<p>Add some products to get started!</p>
|
||||
<a href="/shop/products" class="btn-primary">Browse Products</a>
|
||||
<a href="{{ base_url }}shop/products" class="btn-primary">Browse Products</a>
|
||||
</div>
|
||||
|
||||
<!-- Cart Items -->
|
||||
@@ -135,7 +135,7 @@
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
|
||||
<a href="/shop/products" class="btn-outline">
|
||||
<a href="{{ base_url }}shop/products" class="btn-outline">
|
||||
Continue Shopping
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="{{ base_url or '/' }}" class="btn btn-primary">Continue Shopping</a>
|
||||
<a href="{{ base_url or '/' }}products" class="btn btn-secondary">View All Products</a>
|
||||
<a href="{{ base_url or '/' }}shop/" class="btn btn-primary">Continue Shopping</a>
|
||||
<a href="{{ base_url or '/' }}shop/products" class="btn btn-secondary">View All Products</a>
|
||||
</div>
|
||||
|
||||
<div class="support-link">
|
||||
Can't find what you're looking for? <a href="{{ base_url or '/' }}contact">Contact us</a> and we'll help you find it.
|
||||
Can't find what you're looking for? <a href="{{ base_url or '/' }}shop/contact">Contact us</a> and we'll help you find it.
|
||||
</div>
|
||||
|
||||
{% if vendor %}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
{{ vendor.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<a href="{{ base_url }}products" class="inline-block bg-white text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
<a href="{{ base_url }}shop/products" class="inline-block bg-white text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
@@ -61,7 +61,7 @@
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
|
||||
Featured Products
|
||||
</h2>
|
||||
<a href="{{ base_url }}products" class="text-primary hover:underline font-medium">
|
||||
<a href="{{ base_url }}shop/products" class="text-primary hover:underline font-medium">
|
||||
View All →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<a href="/shop/products" class="btn-back">← Back to Products</a>
|
||||
<a href="{{ base_url }}shop/products" class="btn-back">← Back to Products</a>
|
||||
<h1>{{ vendor.name }}</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a href="/shop/cart" class="btn-primary">
|
||||
<a href="{{ base_url }}shop/cart" class="btn-primary">
|
||||
🛒 Cart (<span x-text="cartCount"></span>)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
127
app/templates/vendor/landing-default.html
vendored
Normal file
127
app/templates/vendor/landing-default.html
vendored
Normal file
@@ -0,0 +1,127 @@
|
||||
{# app/templates/vendor/landing-default.html #}
|
||||
{# Default/Minimal Landing Page Template #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen">
|
||||
|
||||
{# Hero Section - Simple and Clean #}
|
||||
<section class="relative bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
{# Logo #}
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-8">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-20 w-auto mx-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Title #}
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{# Tagline #}
|
||||
{% if vendor.tagline %}
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||||
{{ vendor.tagline }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# CTA Button #}
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
|
||||
style="background-color: var(--color-primary)">
|
||||
Browse Our Shop
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{% if page.content %}
|
||||
<a href="#about"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
|
||||
Learn More
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Content Section (if provided) #}
|
||||
{% if page.content %}
|
||||
<section id="about" class="py-16 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Quick Links Section #}
|
||||
<section class="py-16 bg-gray-50 dark:bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
||||
Explore
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">🛍️</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
Shop Products
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Browse our complete catalog
|
||||
</p>
|
||||
</a>
|
||||
|
||||
{% if header_pages %}
|
||||
{% for page in header_pages[:2] %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">📄</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{{ page.meta_description or 'Learn more' }}
|
||||
</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a href="{{ base_url }}shop/about"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">ℹ️</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
About Us
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Learn about our story
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="{{ base_url }}shop/contact"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">📧</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
Contact
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Get in touch with us
|
||||
</p>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
269
app/templates/vendor/landing-full.html
vendored
Normal file
269
app/templates/vendor/landing-full.html
vendored
Normal file
@@ -0,0 +1,269 @@
|
||||
{# app/templates/vendor/landing-full.html #}
|
||||
{# Full Landing Page Template - Maximum Features #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{# Alpine.js component #}
|
||||
{% block alpine_data %}shopLayoutData(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen">
|
||||
|
||||
{# Hero Section - Split Design #}
|
||||
<section class="relative overflow-hidden bg-gradient-to-br from-primary/10 to-accent/5 dark:from-primary/20 dark:to-accent/10">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center min-h-screen">
|
||||
{# Left - Content #}
|
||||
<div class="px-4 sm:px-6 lg:px-8 py-20">
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-8">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-16 w-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{% if vendor.tagline %}
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8">
|
||||
{{ vendor.tagline }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if vendor.description %}
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-10">
|
||||
{{ vendor.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg"
|
||||
style="background-color: var(--color-primary)">
|
||||
Shop Now
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#about"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Stats/Badges #}
|
||||
<div class="grid grid-cols-3 gap-8 mt-16 pt-10 border-t border-gray-200 dark:border-gray-700">
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">100+</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Products</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">24/7</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Support</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">⭐⭐⭐⭐⭐</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Rated</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Right - Visual #}
|
||||
<div class="hidden lg:flex items-center justify-center p-12">
|
||||
<div class="relative w-full max-w-lg">
|
||||
{# Decorative Circles #}
|
||||
<div class="absolute top-0 -left-4 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div class="absolute -bottom-8 -right-4 w-72 h-72 bg-accent rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse" style="animation-delay: 1s;"></div>
|
||||
|
||||
{# Image placeholder or icon #}
|
||||
<div class="relative z-10 bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-12 text-center">
|
||||
<div class="text-9xl mb-4">🛍️</div>
|
||||
<p class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||
Your Shopping Destination
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Features Grid #}
|
||||
<section class="py-24 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
What We Offer
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Everything you need for an exceptional shopping experience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Premium Quality
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Top-tier products carefully selected for you
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Fast Shipping
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Quick delivery right to your door
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Best Value
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Competitive prices and great deals
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
24/7 Support
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Always here to help you
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# About Section (with content) #}
|
||||
{% if page.content %}
|
||||
<section id="about" class="py-24 bg-gray-50 dark:bg-gray-800">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="prose prose-xl dark:prose-invert max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Quick Navigation #}
|
||||
<section class="py-24 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
||||
Explore More
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">🛍️</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
|
||||
Shop Products
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Browse our complete collection
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
|
||||
{% if header_pages %}
|
||||
{% for page in header_pages[:2] %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 dark:from-accent/20 dark:to-accent/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">📄</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{{ page.meta_description or 'Learn more about us' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a href="{{ base_url }}shop/about"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 dark:from-accent/20 dark:to-accent/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">ℹ️</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">
|
||||
About Us
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Learn about our story and mission
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
|
||||
<a href="{{ base_url }}shop/contact"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">📧</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
|
||||
Contact Us
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Get in touch with our team
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Final CTA #}
|
||||
<section class="py-24 bg-gradient-to-r from-primary to-accent text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
||||
Ready to Start Shopping?
|
||||
</h2>
|
||||
<p class="text-xl mb-10 opacity-90">
|
||||
Join thousands of satisfied customers today
|
||||
</p>
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
|
||||
View All Products
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
67
app/templates/vendor/landing-minimal.html
vendored
Normal file
67
app/templates/vendor/landing-minimal.html
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
{# app/templates/vendor/landing-minimal.html #}
|
||||
{# Minimal Landing Page Template - Ultra Clean #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-20">
|
||||
|
||||
{# Logo #}
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-12">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-24 w-auto mx-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Title #}
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{# Description/Content #}
|
||||
{% if page.content %}
|
||||
<div class="prose prose-lg dark:prose-invert max-w-2xl mx-auto mb-12 text-gray-600 dark:text-gray-300">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
{% elif vendor.description %}
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
|
||||
{{ vendor.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# Single CTA #}
|
||||
<div>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-xl font-semibold rounded-full text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl"
|
||||
style="background-color: var(--color-primary)">
|
||||
Enter Shop
|
||||
<svg class="w-6 h-6 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Optional Links Below #}
|
||||
{% if header_pages or footer_pages %}
|
||||
<div class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-sm">
|
||||
<a href="{{ base_url }}shop/products" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
Products
|
||||
</a>
|
||||
{% for page in (header_pages or footer_pages)[:4] %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
{{ page.title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
205
app/templates/vendor/landing-modern.html
vendored
Normal file
205
app/templates/vendor/landing-modern.html
vendored
Normal file
@@ -0,0 +1,205 @@
|
||||
{# app/templates/vendor/landing-modern.html #}
|
||||
{# Modern Landing Page Template - Feature Rich #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{# Alpine.js component #}
|
||||
{% block alpine_data %}shopLayoutData(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen">
|
||||
|
||||
{# Hero Section - Full Width with Overlay #}
|
||||
<section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-primary/20 via-accent/10 to-primary/20 dark:from-primary/30 dark:via-accent/20 dark:to-primary/30">
|
||||
<div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
{# Logo #}
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-8 animate-fade-in">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-24 w-auto mx-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Main Heading #}
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6 animate-slide-up">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{# Tagline #}
|
||||
{% if vendor.tagline %}
|
||||
<p class="text-xl md:text-3xl text-gray-700 dark:text-gray-200 mb-12 max-w-4xl mx-auto animate-slide-up animation-delay-200">
|
||||
{{ vendor.tagline }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# CTAs #}
|
||||
<div class="flex flex-col sm:flex-row gap-6 justify-center animate-fade-in animation-delay-400">
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="group inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl hover:shadow-3xl"
|
||||
style="background-color: var(--color-primary)">
|
||||
<span>Start Shopping</span>
|
||||
<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#features"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-gray-700 dark:text-gray-200 bg-white/90 dark:bg-gray-800/90 backdrop-blur hover:bg-white dark:hover:bg-gray-800 transition-all border-2 border-gray-200 dark:border-gray-600">
|
||||
Discover More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Scroll Indicator #}
|
||||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Features Section #}
|
||||
<section id="features" class="py-24 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Why Choose Us
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{% if vendor.description %}{{ vendor.description }}{% else %}Experience excellence in every purchase{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
{# Feature 1 #}
|
||||
<div class="text-center group">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
|
||||
style="color: var(--color-primary)">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Quality Products
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Carefully curated selection of premium items
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Feature 2 #}
|
||||
<div class="text-center group">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-accent/10 text-accent mb-6 group-hover:scale-110 transition-transform"
|
||||
style="color: var(--color-accent)">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Fast Delivery
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Quick and reliable shipping to your doorstep
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Feature 3 #}
|
||||
<div class="text-center group">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
|
||||
style="color: var(--color-primary)">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Best Prices
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Competitive pricing with great value
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Content Section (if provided) #}
|
||||
{% if page.content %}
|
||||
<section class="py-24 bg-gray-50 dark:bg-gray-800">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="prose prose-xl dark:prose-invert max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# CTA Section #}
|
||||
<section class="py-24 bg-gradient-to-r from-primary to-accent text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
||||
Ready to Get Started?
|
||||
</h2>
|
||||
<p class="text-xl mb-10 opacity-90">
|
||||
Explore our collection and find what you're looking for
|
||||
</p>
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
|
||||
Browse Products
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Animation utilities */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
/* Grid pattern */
|
||||
.bg-grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(to right, currentColor 1px, transparent 1px),
|
||||
linear-gradient(to bottom, currentColor 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
313
docs/features/vendor-landing-pages.md
Normal file
313
docs/features/vendor-landing-pages.md
Normal file
@@ -0,0 +1,313 @@
|
||||
# Vendor Landing Pages
|
||||
|
||||
Complete guide to creating custom landing pages for vendor storefronts.
|
||||
|
||||
## Overview
|
||||
|
||||
Each vendor can have a custom landing page at their root URL with different design templates. This landing page serves as the vendor's homepage, separate from the e-commerce shop section.
|
||||
|
||||
### URL Structure
|
||||
|
||||
```
|
||||
Root Landing Page:
|
||||
- Custom Domain: https://customdomain.com/ → Landing Page
|
||||
- Subdomain: https://wizamart.platform.com/ → Landing Page
|
||||
- Path-based: http://localhost:8000/vendors/wizamart/ → Landing Page
|
||||
|
||||
E-commerce Shop:
|
||||
- Custom Domain: https://customdomain.com/shop/ → Shop Homepage
|
||||
- Subdomain: https://wizamart.platform.com/shop/ → Shop Homepage
|
||||
- Path-based: http://localhost:8000/vendors/wizamart/shop/ → Shop Homepage
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
✅ **Multiple Templates**: Choose from 4 different landing page designs
|
||||
✅ **CMS-Powered**: Content managed through ContentPage model
|
||||
✅ **Per-Vendor Customization**: Each vendor can have unique design
|
||||
✅ **Auto-Fallback**: Redirects to shop if no landing page exists
|
||||
✅ **Theme-Aware**: Uses vendor's theme colors and branding
|
||||
|
||||
## Available Templates
|
||||
|
||||
### 1. **Default** (`landing-default.html`)
|
||||
- Clean and professional
|
||||
- Hero section with logo and CTA
|
||||
- Optional content section
|
||||
- Quick links grid (3 cards)
|
||||
- **Best for**: General purpose, simple storefronts
|
||||
|
||||
### 2. **Minimal** (`landing-minimal.html`)
|
||||
- Ultra-simple centered design
|
||||
- Single page, no scrolling
|
||||
- One primary CTA
|
||||
- Minimal navigation
|
||||
- **Best for**: Single-product vendors, portfolio sites
|
||||
|
||||
### 3. **Modern** (`landing-modern.html`)
|
||||
- Full-screen hero with animations
|
||||
- Feature showcase section
|
||||
- Gradient backgrounds
|
||||
- Multiple CTAs
|
||||
- **Best for**: Tech products, modern brands
|
||||
|
||||
### 4. **Full** (`landing-full.html`)
|
||||
- Split-screen hero layout
|
||||
- Stats/badges section
|
||||
- 4-feature grid
|
||||
- Multiple content sections
|
||||
- Final CTA section
|
||||
- **Best for**: Established brands, full product catalogs
|
||||
|
||||
## How to Create a Landing Page
|
||||
|
||||
### Step 1: Create ContentPage in Database
|
||||
|
||||
```python
|
||||
# Using Python/SQL
|
||||
from models.database.content_page import ContentPage
|
||||
|
||||
landing_page = ContentPage(
|
||||
vendor_id=1, # Your vendor ID
|
||||
slug="landing", # Must be "landing" or "home"
|
||||
title="Welcome to Our Store",
|
||||
content="<p>Your custom HTML content here...</p>",
|
||||
template="modern", # Choose: default, minimal, modern, full
|
||||
is_published=True,
|
||||
show_in_footer=False,
|
||||
show_in_header=False
|
||||
)
|
||||
db.add(landing_page)
|
||||
db.commit()
|
||||
```
|
||||
|
||||
### Step 2: Choose Template
|
||||
|
||||
Set the `template` field to one of:
|
||||
- `"default"` - Clean professional layout
|
||||
- `"minimal"` - Ultra-simple centered design
|
||||
- `"modern"` - Full-screen with animations
|
||||
- `"full"` - Maximum features and sections
|
||||
|
||||
### Step 3: Add Content (Optional)
|
||||
|
||||
The `content` field supports HTML. This appears in a dedicated section on all templates:
|
||||
|
||||
```html
|
||||
<h2>About Our Store</h2>
|
||||
<p>We've been serving customers since 2020...</p>
|
||||
<ul>
|
||||
<li>Quality products</li>
|
||||
<li>Fast shipping</li>
|
||||
<li>Great customer service</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Step 4: Publish
|
||||
|
||||
Set `is_published=True` to make the landing page live.
|
||||
|
||||
## Fallback Behavior
|
||||
|
||||
If no landing page exists:
|
||||
1. System checks for `slug="landing"`
|
||||
2. If not found, checks for `slug="home"`
|
||||
3. If neither exists, **redirects to `/shop/`**
|
||||
|
||||
This ensures vendors always have a working homepage even without a landing page.
|
||||
|
||||
## Template Variables
|
||||
|
||||
All templates have access to:
|
||||
|
||||
### From Request Context
|
||||
```python
|
||||
{
|
||||
"vendor": Vendor object,
|
||||
"theme": Theme object with colors/branding,
|
||||
"base_url": "/" or "/vendors/{code}/",
|
||||
"page": ContentPage object,
|
||||
"header_pages": List of header navigation pages,
|
||||
"footer_pages": List of footer navigation pages
|
||||
}
|
||||
```
|
||||
|
||||
### Vendor Properties
|
||||
```jinja2
|
||||
{{ vendor.name }}
|
||||
{{ vendor.tagline }}
|
||||
{{ vendor.description }}
|
||||
{{ vendor.website }}
|
||||
```
|
||||
|
||||
### Theme Properties
|
||||
```jinja2
|
||||
{{ theme.branding.logo }}
|
||||
{{ theme.branding.logo_dark }}
|
||||
{{ theme.colors.primary }}
|
||||
{{ theme.colors.accent }}
|
||||
```
|
||||
|
||||
### Page Properties
|
||||
```jinja2
|
||||
{{ page.title }}
|
||||
{{ page.content | safe }}
|
||||
{{ page.meta_description }}
|
||||
{{ page.template }}
|
||||
```
|
||||
|
||||
## Migration Applied
|
||||
|
||||
Database migration `f68d8da5315a` adds `template` field to `content_pages` table:
|
||||
|
||||
```sql
|
||||
ALTER TABLE content_pages
|
||||
ADD COLUMN template VARCHAR(50) NOT NULL DEFAULT 'default';
|
||||
```
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Get Landing Page
|
||||
```http
|
||||
GET /api/v1/shop/content-pages/landing
|
||||
Referer: https://wizamart.platform.com/
|
||||
|
||||
Response:
|
||||
{
|
||||
"id": 1,
|
||||
"slug": "landing",
|
||||
"title": "Welcome to WizaMart",
|
||||
"content": "<p>...</p>",
|
||||
"template": "modern",
|
||||
"is_published": true
|
||||
}
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
### Test Landing Page
|
||||
1. Create a landing page via database or admin panel
|
||||
2. Access vendor root URL:
|
||||
- Path-based: `http://localhost:8000/vendors/wizamart/`
|
||||
- Subdomain: `https://wizamart.platform.com/`
|
||||
3. Should see your custom landing page
|
||||
|
||||
### Test Fallback
|
||||
1. Delete or unpublish landing page
|
||||
2. Access vendor root URL
|
||||
3. Should redirect to `/shop/`
|
||||
|
||||
## Customization Guide
|
||||
|
||||
### Adding a New Template
|
||||
|
||||
1. Create new template file:
|
||||
```
|
||||
app/templates/vendor/landing-{name}.html
|
||||
```
|
||||
|
||||
2. Extend shop base:
|
||||
```jinja2
|
||||
{% extends "shop/base.html" %}
|
||||
```
|
||||
|
||||
3. Use template variables as needed
|
||||
|
||||
4. Update `page.template` to `{name}` in database
|
||||
|
||||
### Modifying Existing Templates
|
||||
|
||||
Templates are in:
|
||||
```
|
||||
app/templates/vendor/
|
||||
├── landing-default.html (Clean professional)
|
||||
├── landing-minimal.html (Ultra-simple)
|
||||
├── landing-modern.html (Full-screen hero)
|
||||
└── landing-full.html (Maximum features)
|
||||
```
|
||||
|
||||
Edit directly and changes apply immediately (no rebuild needed).
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Choose Template Based on Content**:
|
||||
- Minimal: Little content, single CTA
|
||||
- Default: Moderate content, professional
|
||||
- Modern: Tech/modern brands, animated
|
||||
- Full: Lots of content, established brand
|
||||
|
||||
2. **Keep Content Concise**: Landing pages should be scannable
|
||||
|
||||
3. **Strong CTAs**: Always link to `/shop/` for e-commerce
|
||||
|
||||
4. **Use Theme Colors**: Templates automatically use vendor theme
|
||||
|
||||
5. **Test Responsiveness**: All templates are mobile-friendly
|
||||
|
||||
6. **SEO**: Fill in `meta_description` for better search results
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Simple Store
|
||||
```python
|
||||
ContentPage(
|
||||
vendor_id=1,
|
||||
slug="landing",
|
||||
title="Welcome to TechStore",
|
||||
content="<p>Your one-stop shop for electronics</p>",
|
||||
template="default",
|
||||
is_published=True
|
||||
)
|
||||
```
|
||||
|
||||
### Example 2: Portfolio Site
|
||||
```python
|
||||
ContentPage(
|
||||
vendor_id=2,
|
||||
slug="landing",
|
||||
title="John's Artwork",
|
||||
content="<p>Handcrafted pieces since 2015</p>",
|
||||
template="minimal",
|
||||
is_published=True
|
||||
)
|
||||
```
|
||||
|
||||
### Example 3: Modern Brand
|
||||
```python
|
||||
ContentPage(
|
||||
vendor_id=3,
|
||||
slug="landing",
|
||||
title="FutureWear - Style Redefined",
|
||||
content="<h2>Our Story</h2><p>Innovation meets fashion...</p>",
|
||||
template="modern",
|
||||
is_published=True
|
||||
)
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Landing Page Not Showing
|
||||
- Check `is_published=True`
|
||||
- Verify `slug="landing"` or `slug="home"`
|
||||
- Check vendor ID matches
|
||||
- Verify template field is valid
|
||||
|
||||
### Wrong Template Rendering
|
||||
- Check `template` field value
|
||||
- Ensure template file exists at `app/templates/vendor/landing-{template}.html`
|
||||
- Check for typos in template name
|
||||
|
||||
### Theme Colors Not Applied
|
||||
- Verify vendor has theme configured
|
||||
- Check CSS variables in template: `var(--color-primary)`
|
||||
- Inspect theme object in template context
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
**Phase 2: Section Builder** (Future)
|
||||
- Drag-and-drop section components
|
||||
- Hero, Features, Testimonials, Gallery sections
|
||||
- Per-section customization
|
||||
- Visual page builder interface
|
||||
|
||||
This will allow vendors to build completely custom layouts without template limitations.
|
||||
@@ -108,7 +108,21 @@ Layer 1: ROUTES (FastAPI)
|
||||
Purpose: Vendor Detection + Template Rendering
|
||||
Location: app/routes/shop_pages.py
|
||||
|
||||
Example:
|
||||
⚠️ ROUTE REGISTRATION (main.py):
|
||||
The shop router is mounted at TWO prefixes to support both access methods:
|
||||
|
||||
# main.py
|
||||
app.include_router(shop_pages.router, prefix="/shop", ...) # Domain/subdomain
|
||||
app.include_router(shop_pages.router, prefix="/vendors/{vendor_code}/shop", ...) # Path-based
|
||||
|
||||
This means routes defined WITHOUT /shop prefix in shop_pages.py:
|
||||
@router.get("/products") → /shop/products OR /vendors/{code}/shop/products
|
||||
|
||||
❌ COMMON MISTAKE: Don't add /shop prefix in route definitions!
|
||||
@router.get("/shop/products") ❌ WRONG - creates /shop/shop/products
|
||||
@router.get("/products") ✅ CORRECT - creates /shop/products
|
||||
|
||||
Example Route Handler:
|
||||
@router.get("/", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/products", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_products_page(request: Request):
|
||||
@@ -164,31 +178,31 @@ Responsibilities:
|
||||
The shop frontend supports THREE access methods:
|
||||
|
||||
1. **Custom Domain** (Production)
|
||||
URL: https://customdomain.com/products
|
||||
URL: https://customdomain.com/shop/products
|
||||
- Vendor has their own domain
|
||||
- base_url = "/"
|
||||
- Links: /products, /about, /contact
|
||||
- Links: /shop/products, /shop/about, /shop/contact
|
||||
|
||||
2. **Subdomain** (Production)
|
||||
URL: https://wizamart.letzshop.com/products
|
||||
URL: https://wizamart.letzshop.com/shop/products
|
||||
- Vendor uses platform subdomain
|
||||
- base_url = "/"
|
||||
- Links: /products, /about, /contact
|
||||
- Links: /shop/products, /shop/about, /shop/contact
|
||||
|
||||
3. **Path-Based** (Development/Testing)
|
||||
URL: http://localhost:8000/vendor/wizamart/products
|
||||
URL: http://localhost:8000/vendors/wizamart/shop/products
|
||||
- Vendor accessed via path prefix
|
||||
- base_url = "/vendor/wizamart/"
|
||||
- Links: /vendor/wizamart/products, /vendor/wizamart/about
|
||||
- base_url = "/vendors/wizamart/"
|
||||
- Links: /vendors/wizamart/shop/products, /vendors/wizamart/shop/about
|
||||
|
||||
⚠️ CRITICAL: All template links MUST use {{ base_url }} prefix
|
||||
⚠️ CRITICAL: All template links MUST use {{ base_url }}shop/ prefix
|
||||
|
||||
Example:
|
||||
❌ BAD: <a href="/products">Products</a>
|
||||
✅ GOOD: <a href="{{ base_url }}products">Products</a>
|
||||
❌ BAD: <a href="{{ base_url }}products">Products</a>
|
||||
✅ GOOD: <a href="{{ base_url }}shop/products">Products</a>
|
||||
|
||||
❌ BAD: <a href="/contact">Contact</a>
|
||||
✅ GOOD: <a href="{{ base_url }}contact">Contact</a>
|
||||
Note: The router is mounted at /shop prefix in main.py, so all links need shop/ after base_url
|
||||
|
||||
How It Works:
|
||||
1. VendorContextMiddleware detects access method
|
||||
|
||||
318
docs/frontend/shop/navigation-flow.md
Normal file
318
docs/frontend/shop/navigation-flow.md
Normal file
@@ -0,0 +1,318 @@
|
||||
# Shop Navigation Flow
|
||||
|
||||
Complete guide to navigation structure and URL hierarchy with landing pages.
|
||||
|
||||
## URL Hierarchy
|
||||
|
||||
```
|
||||
/ (Vendor Root) → Landing Page (if exists) OR redirect to /shop/
|
||||
├── /shop/ → E-commerce Homepage (Product Catalog)
|
||||
│ ├── /shop/products → Product Catalog (same as /shop/)
|
||||
│ ├── /shop/products/{id} → Product Detail Page
|
||||
│ ├── /shop/cart → Shopping Cart
|
||||
│ ├── /shop/checkout → Checkout Process
|
||||
│ ├── /shop/account/login → Customer Login
|
||||
│ ├── /shop/account/register → Customer Registration
|
||||
│ ├── /shop/account/dashboard → Customer Dashboard (auth required)
|
||||
│ ├── /shop/about → CMS Content Page
|
||||
│ ├── /shop/contact → CMS Content Page
|
||||
│ └── /shop/{slug} → Other CMS Pages
|
||||
```
|
||||
|
||||
## Navigation Patterns
|
||||
|
||||
### Pattern 1: With Landing Page (Recommended)
|
||||
|
||||
**URL Structure:**
|
||||
```
|
||||
customdomain.com/ → Landing Page (marketing/brand)
|
||||
customdomain.com/shop/ → E-commerce Shop
|
||||
customdomain.com/shop/products → Product Catalog
|
||||
```
|
||||
|
||||
**Navigation Flow:**
|
||||
1. User visits vendor domain → **Landing Page**
|
||||
2. Clicks "Shop Now" → **/shop/** (product catalog)
|
||||
3. Clicks "Home" in breadcrumb → **/** (back to landing page)
|
||||
4. Clicks logo → **/** (back to landing page)
|
||||
|
||||
**Breadcrumb Example (on Products page):**
|
||||
```
|
||||
Home > Products
|
||||
↓
|
||||
/ (Landing Page)
|
||||
```
|
||||
|
||||
### Pattern 2: Without Landing Page (Auto-Redirect)
|
||||
|
||||
**URL Structure:**
|
||||
```
|
||||
customdomain.com/ → Redirects to /shop/
|
||||
customdomain.com/shop/ → E-commerce Shop
|
||||
customdomain.com/shop/products → Product Catalog
|
||||
```
|
||||
|
||||
**Navigation Flow:**
|
||||
1. User visits vendor domain → **Redirects to /shop/**
|
||||
2. User browses shop
|
||||
3. Clicks "Home" in breadcrumb → **/** (redirects to /shop/)
|
||||
4. Clicks logo → **/** (redirects to /shop/)
|
||||
|
||||
**Breadcrumb Example (on Products page):**
|
||||
```
|
||||
Home > Products
|
||||
↓
|
||||
/ → /shop/ (redirects)
|
||||
```
|
||||
|
||||
## Link References
|
||||
|
||||
### Base URL Calculation
|
||||
|
||||
The `base_url` variable is calculated in `shop_pages.py:get_shop_context()`:
|
||||
|
||||
```python
|
||||
# For domain/subdomain access
|
||||
base_url = "/"
|
||||
# Result: /shop/products, /shop/cart, etc.
|
||||
|
||||
# For path-based access
|
||||
base_url = "/vendors/wizamart/"
|
||||
# Result: /vendors/wizamart/shop/products, /vendors/wizamart/shop/cart, etc.
|
||||
```
|
||||
|
||||
### Template Links
|
||||
|
||||
**Logo / Home Link (Header):**
|
||||
```jinja2
|
||||
{# Points to vendor root (landing page or shop) #}
|
||||
<a href="{{ base_url }}shop/">{{ vendor.name }}</a>
|
||||
```
|
||||
|
||||
**Breadcrumb Home Link:**
|
||||
```jinja2
|
||||
{# Points to vendor root (landing page) #}
|
||||
<a href="{{ base_url }}">Home</a>
|
||||
```
|
||||
|
||||
**Shop Links:**
|
||||
```jinja2
|
||||
{# All shop pages include /shop/ prefix #}
|
||||
<a href="{{ base_url }}shop/products">Products</a>
|
||||
<a href="{{ base_url }}shop/cart">Cart</a>
|
||||
<a href="{{ base_url }}shop/checkout">Checkout</a>
|
||||
```
|
||||
|
||||
**CMS Page Links:**
|
||||
```jinja2
|
||||
{# CMS pages are under /shop/ #}
|
||||
<a href="{{ base_url }}shop/about">About</a>
|
||||
<a href="{{ base_url }}shop/contact">Contact</a>
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}">{{ page.title }}</a>
|
||||
```
|
||||
|
||||
## Complete URL Examples
|
||||
|
||||
### Path-Based Access (Development)
|
||||
|
||||
```
|
||||
http://localhost:8000/vendors/wizamart/
|
||||
├── / (root) → Landing Page OR redirect to shop
|
||||
├── /shop/ → Shop Homepage
|
||||
├── /shop/products → Product Catalog
|
||||
├── /shop/products/4 → Product Detail
|
||||
├── /shop/cart → Shopping Cart
|
||||
├── /shop/checkout → Checkout
|
||||
├── /shop/account/login → Customer Login
|
||||
├── /shop/about → About Page (CMS)
|
||||
└── /shop/contact → Contact Page (CMS)
|
||||
```
|
||||
|
||||
### Subdomain Access (Production)
|
||||
|
||||
```
|
||||
https://wizamart.platform.com/
|
||||
├── / (root) → Landing Page OR redirect to shop
|
||||
├── /shop/ → Shop Homepage
|
||||
├── /shop/products → Product Catalog
|
||||
├── /shop/products/4 → Product Detail
|
||||
├── /shop/cart → Shopping Cart
|
||||
├── /shop/checkout → Checkout
|
||||
├── /shop/account/login → Customer Login
|
||||
├── /shop/about → About Page (CMS)
|
||||
└── /shop/contact → Contact Page (CMS)
|
||||
```
|
||||
|
||||
### Custom Domain Access (Production)
|
||||
|
||||
```
|
||||
https://customdomain.com/
|
||||
├── / (root) → Landing Page OR redirect to shop
|
||||
├── /shop/ → Shop Homepage
|
||||
├── /shop/products → Product Catalog
|
||||
├── /shop/products/4 → Product Detail
|
||||
├── /shop/cart → Shopping Cart
|
||||
├── /shop/checkout → Checkout
|
||||
├── /shop/account/login → Customer Login
|
||||
├── /shop/about → About Page (CMS)
|
||||
└── /shop/contact → Contact Page (CMS)
|
||||
```
|
||||
|
||||
## User Journeys
|
||||
|
||||
### Journey 1: First-Time Visitor (With Landing Page)
|
||||
|
||||
1. Visit `customdomain.com/` → **Landing Page**
|
||||
- Sees brand story, features, CTA
|
||||
2. Clicks "Shop Now" → `/shop/` → **Product Catalog**
|
||||
- Browses products
|
||||
3. Clicks product → `/shop/products/4` → **Product Detail**
|
||||
- Views product
|
||||
4. Clicks "Home" in breadcrumb → `/` → **Back to Landing Page**
|
||||
5. Clicks logo → `/` → **Back to Landing Page**
|
||||
|
||||
### Journey 2: Returning Customer (Direct to Shop)
|
||||
|
||||
1. Visit `customdomain.com/shop/` → **Product Catalog**
|
||||
- Already knows the brand, goes straight to shop
|
||||
2. Adds to cart → `/shop/cart` → **Shopping Cart**
|
||||
3. Checkout → `/shop/checkout` → **Checkout**
|
||||
4. Clicks "Home" → `/` → **Landing Page** (brand homepage)
|
||||
|
||||
### Journey 3: Customer Account Management
|
||||
|
||||
1. Visit `customdomain.com/shop/account/login` → **Login**
|
||||
2. After login → `/shop/account/dashboard` → **Dashboard**
|
||||
3. View orders → `/shop/account/orders` → **Order History**
|
||||
4. Clicks logo → `/` → **Back to Landing Page**
|
||||
|
||||
## Navigation Components
|
||||
|
||||
### Header Navigation (base.html)
|
||||
|
||||
```jinja2
|
||||
{# Logo - always points to vendor root #}
|
||||
<a href="{{ base_url }}shop/">
|
||||
<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}">
|
||||
</a>
|
||||
|
||||
{# Main Navigation #}
|
||||
<nav>
|
||||
<a href="{{ base_url }}shop/">Home</a>
|
||||
<a href="{{ base_url }}shop/products">Products</a>
|
||||
<a href="{{ base_url }}shop/about">About</a>
|
||||
<a href="{{ base_url }}shop/contact">Contact</a>
|
||||
</nav>
|
||||
|
||||
{# Actions #}
|
||||
<a href="{{ base_url }}shop/cart">Cart</a>
|
||||
<a href="{{ base_url }}shop/account">Account</a>
|
||||
```
|
||||
|
||||
### Footer Navigation (base.html)
|
||||
|
||||
```jinja2
|
||||
{# Quick Links #}
|
||||
<a href="{{ base_url }}shop/products">Products</a>
|
||||
|
||||
{# CMS Pages (dynamic) #}
|
||||
{% for page in footer_pages %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}">{{ page.title }}</a>
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
### Breadcrumbs (products.html, content-page.html)
|
||||
|
||||
```jinja2
|
||||
{# Points to vendor root (landing page) #}
|
||||
<a href="{{ base_url }}">Home</a> / Products
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### ✅ DO:
|
||||
|
||||
1. **Use Landing Pages**: Create engaging landing pages at vendor root
|
||||
2. **Clear Navigation**: Make it easy to get from landing to shop and back
|
||||
3. **Consistent "Home"**: Logo and "Home" breadcrumb both point to `/` (landing)
|
||||
4. **Shop Links**: All shop-related links include `/shop/` prefix
|
||||
5. **CMS Under Shop**: Keep CMS pages under `/shop/` for consistency
|
||||
|
||||
### ❌ DON'T:
|
||||
|
||||
1. **Hardcode URLs**: Always use `{{ base_url }}` for vendor-aware links
|
||||
2. **Skip /shop/**: Don't link directly to `/products`, use `/shop/products`
|
||||
3. **Mix Landing & Shop**: Keep landing page separate from shop catalog
|
||||
4. **Forget Breadcrumbs**: Always provide "Home" link to go back
|
||||
|
||||
## Migration Notes
|
||||
|
||||
### Before Landing Pages
|
||||
|
||||
All links pointed to `/shop/`:
|
||||
```jinja2
|
||||
<a href="{{ base_url }}shop/">Home</a> {# Logo #}
|
||||
<a href="{{ base_url }}shop/">Home</a> {# Breadcrumb #}
|
||||
```
|
||||
|
||||
### After Landing Pages
|
||||
|
||||
Separation of concerns:
|
||||
```jinja2
|
||||
<a href="{{ base_url }}shop/">Home</a> {# Logo - still goes to shop #}
|
||||
<a href="{{ base_url }}">Home</a> {# Breadcrumb - goes to landing #}
|
||||
```
|
||||
|
||||
This allows:
|
||||
- Landing page at `/` for marketing/branding
|
||||
- Shop catalog at `/shop/` for e-commerce
|
||||
- Clean navigation between the two
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### Route Handlers (main.py)
|
||||
|
||||
```python
|
||||
# Vendor root - serves landing page or redirects to shop
|
||||
@app.get("/")
|
||||
@app.get("/vendors/{vendor_code}/")
|
||||
async def root(request: Request):
|
||||
if has_landing_page():
|
||||
return render_landing_page()
|
||||
else:
|
||||
return redirect_to_shop()
|
||||
|
||||
# Shop routes
|
||||
@app.include_router(shop_pages.router, prefix="/shop")
|
||||
@app.include_router(shop_pages.router, prefix="/vendors/{vendor_code}/shop")
|
||||
```
|
||||
|
||||
### Context Calculation (shop_pages.py)
|
||||
|
||||
```python
|
||||
def get_shop_context(request: Request):
|
||||
base_url = "/"
|
||||
if access_method == "path":
|
||||
base_url = f"/vendors/{vendor.subdomain}/"
|
||||
|
||||
return {
|
||||
"base_url": base_url,
|
||||
"vendor": vendor,
|
||||
"theme": theme,
|
||||
# ...
|
||||
}
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
||||
The navigation system creates a **two-tier structure**:
|
||||
|
||||
1. **Landing Page** (`/`) - Marketing, branding, vendor story
|
||||
2. **Shop** (`/shop/`) - E-commerce, products, cart, checkout
|
||||
|
||||
This gives vendors flexibility to:
|
||||
- Have a marketing homepage separate from their store
|
||||
- Choose different landing page designs (minimal, modern, full)
|
||||
- Or skip the landing page and go straight to the shop
|
||||
|
||||
All while maintaining clean, consistent navigation throughout the experience.
|
||||
101
main.py
101
main.py
@@ -230,6 +230,48 @@ app.include_router(
|
||||
include_in_schema=False
|
||||
)
|
||||
|
||||
# Add handler for /vendors/{vendor_code}/ root path
|
||||
@app.get("/vendors/{vendor_code}/", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def vendor_root_path(vendor_code: str, request: Request, db: Session = Depends(get_db)):
|
||||
"""Handle vendor root path (e.g., /vendors/wizamart/)"""
|
||||
# Vendor should already be in request.state from middleware
|
||||
vendor = getattr(request.state, 'vendor', None)
|
||||
|
||||
if not vendor:
|
||||
raise HTTPException(status_code=404, detail=f"Vendor '{vendor_code}' not found")
|
||||
|
||||
from app.services.content_page_service import content_page_service
|
||||
from app.routes.shop_pages import get_shop_context
|
||||
|
||||
# Try to find landing page
|
||||
landing_page = content_page_service.get_page_for_vendor(
|
||||
db,
|
||||
slug="landing",
|
||||
vendor_id=vendor.id,
|
||||
include_unpublished=False
|
||||
)
|
||||
|
||||
if not landing_page:
|
||||
landing_page = content_page_service.get_page_for_vendor(
|
||||
db,
|
||||
slug="home",
|
||||
vendor_id=vendor.id,
|
||||
include_unpublished=False
|
||||
)
|
||||
|
||||
if landing_page:
|
||||
# Render landing page with selected template
|
||||
template_name = landing_page.template or "default"
|
||||
template_path = f"vendor/landing-{template_name}.html"
|
||||
|
||||
return templates.TemplateResponse(
|
||||
template_path,
|
||||
get_shop_context(request, db=db, page=landing_page)
|
||||
)
|
||||
else:
|
||||
# No landing page - redirect to shop
|
||||
return RedirectResponse(url=f"/vendors/{vendor_code}/shop/", status_code=302)
|
||||
|
||||
logger.info("=" * 80)
|
||||
|
||||
# Log all registered routes
|
||||
@@ -247,10 +289,61 @@ logger.info("=" * 80)
|
||||
# ============================================================================
|
||||
|
||||
# Public Routes (no authentication required)
|
||||
@app.get("/", include_in_schema=False)
|
||||
async def root():
|
||||
"""Redirect root to documentation"""
|
||||
return RedirectResponse(url="/documentation")
|
||||
@app.get("/", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def root(request: Request, db: Session = Depends(get_db)):
|
||||
"""
|
||||
Smart root handler:
|
||||
- If vendor detected (domain/subdomain): Show vendor landing page or redirect to shop
|
||||
- If no vendor (platform root): Redirect to documentation
|
||||
"""
|
||||
vendor = getattr(request.state, 'vendor', None)
|
||||
|
||||
if vendor:
|
||||
# Vendor context detected - serve landing page
|
||||
from app.services.content_page_service import content_page_service
|
||||
|
||||
# Try to find landing page (slug='landing' or 'home')
|
||||
landing_page = content_page_service.get_page_for_vendor(
|
||||
db,
|
||||
slug="landing",
|
||||
vendor_id=vendor.id,
|
||||
include_unpublished=False
|
||||
)
|
||||
|
||||
if not landing_page:
|
||||
# Try 'home' slug as fallback
|
||||
landing_page = content_page_service.get_page_for_vendor(
|
||||
db,
|
||||
slug="home",
|
||||
vendor_id=vendor.id,
|
||||
include_unpublished=False
|
||||
)
|
||||
|
||||
if landing_page:
|
||||
# Render landing page with selected template
|
||||
from app.routes.shop_pages import get_shop_context
|
||||
|
||||
template_name = landing_page.template or "default"
|
||||
template_path = f"vendor/landing-{template_name}.html"
|
||||
|
||||
return templates.TemplateResponse(
|
||||
template_path,
|
||||
get_shop_context(request, db=db, page=landing_page)
|
||||
)
|
||||
else:
|
||||
# No landing page - redirect to shop
|
||||
vendor_context = getattr(request.state, 'vendor_context', None)
|
||||
access_method = vendor_context.get('detection_method', 'unknown') if vendor_context else 'unknown'
|
||||
|
||||
if access_method == "path":
|
||||
full_prefix = vendor_context.get('full_prefix', '/vendor/') if vendor_context else '/vendor/'
|
||||
return RedirectResponse(url=f"{full_prefix}{vendor.subdomain}/shop/", status_code=302)
|
||||
else:
|
||||
# Domain/subdomain
|
||||
return RedirectResponse(url="/shop/", status_code=302)
|
||||
else:
|
||||
# No vendor - platform root
|
||||
return RedirectResponse(url="/documentation")
|
||||
|
||||
|
||||
@app.get("/health")
|
||||
|
||||
@@ -32,6 +32,9 @@ nav:
|
||||
- Middleware Stack: architecture/middleware.md
|
||||
- Request Flow: architecture/request-flow.md
|
||||
- Authentication & RBAC: architecture/auth-rbac.md
|
||||
- API Consolidation:
|
||||
- Proposal: architecture/API_CONSOLIDATION_PROPOSAL.md
|
||||
- Migration Status: architecture/API_MIGRATION_STATUS.md
|
||||
- Diagrams:
|
||||
- Multi-Tenant Diagrams: architecture/diagrams/multitenant-diagrams.md
|
||||
- Vendor Domain Diagrams: architecture/diagrams/vendor-domain-diagrams.md
|
||||
@@ -46,6 +49,7 @@ nav:
|
||||
# ============================================
|
||||
- API Documentation:
|
||||
- Overview: api/index.md
|
||||
- Shop API Reference: api/shop-api-reference.md
|
||||
- Authentication:
|
||||
- Guide: api/authentication.md
|
||||
- Quick Reference: api/authentication-quick-reference.md
|
||||
|
||||
@@ -49,6 +49,11 @@ class ContentPage(Base):
|
||||
content = Column(Text, nullable=False) # HTML or Markdown
|
||||
content_format = Column(String(20), default="html") # html, markdown
|
||||
|
||||
# Template selection (for landing pages)
|
||||
# Options: 'default', 'minimal', 'modern', 'full'
|
||||
# Only used for landing pages (slug='landing' or 'home')
|
||||
template = Column(String(50), default="default", nullable=False)
|
||||
|
||||
# SEO
|
||||
meta_description = Column(String(300), nullable=True)
|
||||
meta_keywords = Column(String(300), nullable=True)
|
||||
@@ -110,6 +115,7 @@ class ContentPage(Base):
|
||||
"title": self.title,
|
||||
"content": self.content,
|
||||
"content_format": self.content_format,
|
||||
"template": self.template,
|
||||
"meta_description": self.meta_description,
|
||||
"meta_keywords": self.meta_keywords,
|
||||
"is_published": self.is_published,
|
||||
|
||||
222
scripts/create_landing_page.py
Executable file
222
scripts/create_landing_page.py
Executable file
@@ -0,0 +1,222 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Create Landing Page for Vendor
|
||||
|
||||
This script creates a landing page for a vendor with the specified template.
|
||||
Usage: python scripts/create_landing_page.py
|
||||
"""
|
||||
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
# Add project root to path
|
||||
sys.path.insert(0, str(Path(__file__).parent.parent))
|
||||
|
||||
from sqlalchemy.orm import Session
|
||||
from app.core.database import SessionLocal
|
||||
from models.database.vendor import Vendor
|
||||
from models.database.content_page import ContentPage
|
||||
from datetime import datetime, timezone
|
||||
|
||||
|
||||
def create_landing_page(
|
||||
vendor_subdomain: str,
|
||||
template: str = "default",
|
||||
title: str = None,
|
||||
content: str = None
|
||||
):
|
||||
"""
|
||||
Create a landing page for a vendor.
|
||||
|
||||
Args:
|
||||
vendor_subdomain: Vendor subdomain (e.g., 'wizamart')
|
||||
template: Template to use (default, minimal, modern, full)
|
||||
title: Page title (defaults to vendor name)
|
||||
content: HTML content (optional)
|
||||
"""
|
||||
db: Session = SessionLocal()
|
||||
|
||||
try:
|
||||
# Find vendor
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.subdomain == vendor_subdomain
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
print(f"❌ Vendor '{vendor_subdomain}' not found!")
|
||||
return False
|
||||
|
||||
print(f"✅ Found vendor: {vendor.name} (ID: {vendor.id})")
|
||||
|
||||
# Check if landing page already exists
|
||||
existing = db.query(ContentPage).filter(
|
||||
ContentPage.vendor_id == vendor.id,
|
||||
ContentPage.slug == "landing"
|
||||
).first()
|
||||
|
||||
if existing:
|
||||
print(f"⚠️ Landing page already exists (ID: {existing.id})")
|
||||
print(f" Current template: {existing.template}")
|
||||
|
||||
# Update it
|
||||
existing.template = template
|
||||
existing.title = title or existing.title
|
||||
if content:
|
||||
existing.content = content
|
||||
existing.is_published = True
|
||||
existing.updated_at = datetime.now(timezone.utc)
|
||||
|
||||
db.commit()
|
||||
print(f"✅ Updated landing page with template: {template}")
|
||||
else:
|
||||
# Create new landing page
|
||||
landing_page = ContentPage(
|
||||
vendor_id=vendor.id,
|
||||
slug="landing",
|
||||
title=title or f"Welcome to {vendor.name}",
|
||||
content=content or f"""
|
||||
<h2>About {vendor.name}</h2>
|
||||
<p>{vendor.description or 'Your trusted shopping destination for quality products.'}</p>
|
||||
|
||||
<h3>Why Choose Us?</h3>
|
||||
<ul>
|
||||
<li><strong>Quality Products:</strong> Carefully curated selection</li>
|
||||
<li><strong>Fast Shipping:</strong> Quick delivery to your door</li>
|
||||
<li><strong>Great Service:</strong> Customer satisfaction guaranteed</li>
|
||||
</ul>
|
||||
|
||||
<h3>Our Story</h3>
|
||||
<p>We've been serving customers since 2020, providing exceptional products and service.
|
||||
Our mission is to make online shopping easy, enjoyable, and reliable.</p>
|
||||
""",
|
||||
content_format="html",
|
||||
template=template,
|
||||
meta_description=f"Shop at {vendor.name} for quality products and great service",
|
||||
is_published=True,
|
||||
published_at=datetime.now(timezone.utc),
|
||||
show_in_footer=False,
|
||||
show_in_header=False,
|
||||
display_order=0
|
||||
)
|
||||
|
||||
db.add(landing_page)
|
||||
db.commit()
|
||||
db.refresh(landing_page)
|
||||
|
||||
print(f"✅ Created landing page (ID: {landing_page.id})")
|
||||
print(f" Template: {template}")
|
||||
print(f" Title: {landing_page.title}")
|
||||
|
||||
# Print access URLs
|
||||
print("\n📍 Access your landing page at:")
|
||||
print(f" Path-based: http://localhost:8000/vendors/{vendor.subdomain}/")
|
||||
print(f" Shop page: http://localhost:8000/vendors/{vendor.subdomain}/shop/")
|
||||
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ Error: {e}")
|
||||
db.rollback()
|
||||
return False
|
||||
finally:
|
||||
db.close()
|
||||
|
||||
|
||||
def list_vendors():
|
||||
"""List all vendors in the system."""
|
||||
db: Session = SessionLocal()
|
||||
|
||||
try:
|
||||
vendors = db.query(Vendor).filter(Vendor.is_active == True).all()
|
||||
|
||||
if not vendors:
|
||||
print("❌ No active vendors found!")
|
||||
return
|
||||
|
||||
print("\n📋 Active Vendors:")
|
||||
print("=" * 60)
|
||||
for vendor in vendors:
|
||||
print(f" • {vendor.name}")
|
||||
print(f" Subdomain: {vendor.subdomain}")
|
||||
print(f" Code: {vendor.vendor_code}")
|
||||
|
||||
# Check if has landing page
|
||||
landing = db.query(ContentPage).filter(
|
||||
ContentPage.vendor_id == vendor.id,
|
||||
ContentPage.slug == "landing"
|
||||
).first()
|
||||
|
||||
if landing:
|
||||
print(f" Landing Page: ✅ ({landing.template})")
|
||||
else:
|
||||
print(f" Landing Page: ❌ None")
|
||||
print()
|
||||
|
||||
finally:
|
||||
db.close()
|
||||
|
||||
|
||||
def show_templates():
|
||||
"""Show available templates."""
|
||||
print("\n🎨 Available Templates:")
|
||||
print("=" * 60)
|
||||
|
||||
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")
|
||||
]
|
||||
|
||||
for name, desc in templates:
|
||||
print(f" • {name:<10} - {desc}")
|
||||
print()
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("\n" + "=" * 60)
|
||||
print(" VENDOR LANDING PAGE CREATOR")
|
||||
print("=" * 60)
|
||||
|
||||
# List vendors
|
||||
list_vendors()
|
||||
|
||||
# Show templates
|
||||
show_templates()
|
||||
|
||||
# Interactive creation
|
||||
print("📝 Create Landing Page")
|
||||
print("-" * 60)
|
||||
|
||||
vendor_subdomain = input("Enter vendor subdomain (e.g., wizamart): ").strip()
|
||||
|
||||
if not vendor_subdomain:
|
||||
print("❌ Vendor subdomain is required!")
|
||||
sys.exit(1)
|
||||
|
||||
print("\nAvailable templates: default, minimal, modern, full")
|
||||
template = input("Enter template (default): ").strip() or "default"
|
||||
|
||||
if template not in ["default", "minimal", "modern", "full"]:
|
||||
print(f"⚠️ Invalid template '{template}', using 'default'")
|
||||
template = "default"
|
||||
|
||||
title = input("Enter page title (optional, press Enter to use default): ").strip()
|
||||
|
||||
print("\n🚀 Creating landing page...")
|
||||
print("-" * 60)
|
||||
|
||||
success = create_landing_page(
|
||||
vendor_subdomain=vendor_subdomain,
|
||||
template=template,
|
||||
title=title if title else None
|
||||
)
|
||||
|
||||
if success:
|
||||
print("\n✅ SUCCESS! Landing page is ready.")
|
||||
print("\n💡 Try different templates:")
|
||||
print(f" python scripts/create_landing_page.py")
|
||||
print(f" # Then choose: minimal, modern, or full")
|
||||
else:
|
||||
print("\n❌ Failed to create landing page")
|
||||
sys.exit(1)
|
||||
Reference in New Issue
Block a user