feat: Add in-app documentation system
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.
This commit is contained in:
Dwindi Ramadhana
145
docs/features/checkout.md
Normal file
145
docs/features/checkout.md
Normal file
@@ -0,0 +1,145 @@
|
||||
# Checkout
|
||||
|
||||
The WooNooW checkout provides a streamlined purchasing experience.
|
||||
|
||||
## Overview
|
||||
|
||||
The checkout process includes:
|
||||
|
||||
1. **Cart Review** - Verify items before checkout
|
||||
2. **Customer Information** - Billing and shipping details
|
||||
3. **Payment Method** - Select how to pay
|
||||
4. **Order Confirmation** - Complete the purchase
|
||||
|
||||
---
|
||||
|
||||
## Checkout Flow
|
||||
|
||||
### Step 1: Cart
|
||||
|
||||
Before checkout, customers review their cart:
|
||||
- Product list with images
|
||||
- Quantity adjustments
|
||||
- Remove items
|
||||
- Apply coupon codes
|
||||
- See subtotal, shipping, and total
|
||||
|
||||
### Step 2: Customer Details
|
||||
|
||||
Customers provide:
|
||||
- **Email address**
|
||||
- **Billing information**
|
||||
- Name
|
||||
- Address
|
||||
- Phone
|
||||
- **Shipping address** (if different from billing)
|
||||
|
||||
> **Note**: Logged-in customers have their details pre-filled.
|
||||
|
||||
### Step 3: Shipping Method
|
||||
|
||||
If physical products are in the cart:
|
||||
- Available shipping methods are shown
|
||||
- Shipping cost is calculated
|
||||
- Customer selects preferred method
|
||||
|
||||
### Step 4: Payment
|
||||
|
||||
Customers choose their payment method:
|
||||
- Credit/Debit Card (Stripe, PayPal, etc.)
|
||||
- Bank Transfer
|
||||
- Cash on Delivery
|
||||
- Other configured gateways
|
||||
|
||||
### Step 5: Place Order
|
||||
|
||||
After reviewing everything:
|
||||
- Click "Place Order"
|
||||
- Payment is processed
|
||||
- Confirmation page is shown
|
||||
- Email receipt is sent
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
### Guest Checkout
|
||||
|
||||
Allow customers to checkout without creating an account.
|
||||
|
||||
Configure in **WooCommerce → Settings → Accounts & Privacy**.
|
||||
|
||||
### Coupon Codes
|
||||
|
||||
Customers can apply discount codes:
|
||||
1. Enter code in the coupon field
|
||||
2. Click "Apply"
|
||||
3. Discount is reflected in total
|
||||
|
||||
### Order Notes
|
||||
|
||||
Optional field for customers to add special instructions.
|
||||
|
||||
---
|
||||
|
||||
## Payment Gateways
|
||||
|
||||
### Supported Gateways
|
||||
|
||||
WooNooW supports all WooCommerce payment gateways:
|
||||
|
||||
| Gateway | Type |
|
||||
|---------|------|
|
||||
| Bank Transfer (BACS) | Manual |
|
||||
| Check Payments | Manual |
|
||||
| Cash on Delivery | Manual |
|
||||
| PayPal | Card / PayPal |
|
||||
| Stripe | Card |
|
||||
| Square | Card |
|
||||
|
||||
### Configuring Gateways
|
||||
|
||||
1. Go to **WooNooW → Settings → Payments**
|
||||
2. Enable desired payment methods
|
||||
3. Configure API keys and settings
|
||||
4. Test with sandbox/test mode first
|
||||
|
||||
---
|
||||
|
||||
## After Checkout
|
||||
|
||||
### Order Confirmation Page
|
||||
|
||||
Shows:
|
||||
- Order number
|
||||
- Order summary
|
||||
- Next steps
|
||||
|
||||
### Confirmation Email
|
||||
|
||||
Automatically sent to customer with:
|
||||
- Order details
|
||||
- Payment confirmation
|
||||
- Shipping information (if applicable)
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Place Order" Button Not Working
|
||||
|
||||
1. Check all required fields are filled
|
||||
2. Verify payment gateway is properly configured
|
||||
3. Check browser console for JavaScript errors
|
||||
|
||||
### Payment Declined
|
||||
|
||||
1. Customer should verify card details
|
||||
2. Check payment gateway dashboard for error details
|
||||
3. Ensure correct API keys are configured
|
||||
|
||||
### Shipping Not Showing
|
||||
|
||||
1. Verify shipping zones are configured in WooCommerce
|
||||
2. Check if products have weight/dimensions set
|
||||
3. Confirm customer's address is in a configured zone
|
||||
96
docs/features/shop.md
Normal file
96
docs/features/shop.md
Normal file
@@ -0,0 +1,96 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user