Files
WooNooW/docs/features/shop.md
Dwindi Ramadhana 68c3423f50 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.
2026-01-04 11:43:32 +07:00

1.8 KiB

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)

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.