68c3423f50
Phase 1: Core Documentation
- Created docs/ folder with 8 markdown documentation files
- Getting Started, Installation, Troubleshooting, FAQ
- Configuration docs (Appearance, SPA Mode)
- Feature docs (Shop, Checkout)
- PHP registry with filter hook for addon extensibility
Phase 2: Documentation Viewer
- DocsController.php with REST API endpoints
- GET /woonoow/v1/docs - List all docs (with addon hook)
- GET /woonoow/v1/docs/{slug} - Get document content
- Admin SPA /help route with sidebar navigation
- Markdown rendering with react-markdown
- Added Help & Docs to More page for mobile access
Filter Hook: woonoow_docs_registry
Addons can register their own documentation sections.
97 lines
1.8 KiB
Markdown
97 lines
1.8 KiB
Markdown
# Shop Page
|
|
|
|
The shop page displays your product catalog with browsing and filtering options.
|
|
|
|
## Overview
|
|
|
|
The WooNooW shop page provides:
|
|
|
|
- **Product Grid** - Visual display of products
|
|
- **Search** - Find products by name
|
|
- **Filters** - Category and sorting options
|
|
- **Pagination** - Navigate through products
|
|
|
|
---
|
|
|
|
## Features
|
|
|
|
### Product Cards
|
|
|
|
Each product displays:
|
|
- Product image
|
|
- Product name
|
|
- Price (with sale price if applicable)
|
|
- Add to Cart button
|
|
- Wishlist button (if enabled)
|
|
|
|
### Search
|
|
|
|
Type in the search box to filter products by name. Search is instant and updates the grid as you type.
|
|
|
|
### Category Filter
|
|
|
|
Filter products by category using the dropdown. Shows:
|
|
- All Categories
|
|
- Individual categories with product count
|
|
|
|
### Sorting
|
|
|
|
Sort products by:
|
|
- Default sorting
|
|
- Popularity
|
|
- Average rating
|
|
- Latest
|
|
- Price: Low to High
|
|
- Price: High to Low
|
|
|
|
---
|
|
|
|
## Customization
|
|
|
|
### Grid Layout
|
|
|
|
Configure the product grid in **WooNooW → Appearance**:
|
|
|
|
| Device | Options |
|
|
|--------|---------|
|
|
| Mobile | 1-2 columns |
|
|
| Tablet | 2-4 columns |
|
|
| Desktop | 2-6 columns |
|
|
|
|
### Product Card Style
|
|
|
|
Product cards can display:
|
|
- **Image** - Product featured image
|
|
- **Title** - Product name
|
|
- **Price** - Current price and sale price
|
|
- **Rating** - Star rating (if reviews enabled)
|
|
- **Add to Cart** - Quick add button
|
|
|
|
---
|
|
|
|
## Navigation
|
|
|
|
### Clicking a Product
|
|
|
|
Clicking a product card navigates to the full product page where customers can:
|
|
- View all images
|
|
- Select variations
|
|
- Read description
|
|
- Add to cart
|
|
|
|
### Back to Shop
|
|
|
|
From any product page, use the breadcrumb or browser back button to return to the shop.
|
|
|
|
---
|
|
|
|
## Performance
|
|
|
|
### Lazy Loading
|
|
|
|
Product images load as they come into view, improving initial page load time.
|
|
|
|
### Infinite Scroll vs Pagination
|
|
|
|
Currently uses pagination. Infinite scroll may be added in future versions.
|