Files
WooNooW/docs/configuration/spa-mode.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

3.4 KiB

SPA Mode

Understanding and configuring WooNooW's SPA (Single Page Application) mode.

What is SPA Mode?

SPA Mode controls how WooNooW handles your WooCommerce pages. It determines whether visitors experience the modern SPA interface or traditional WooCommerce templates.


Available Modes

All WooCommerce pages redirect to the SPA.

When a visitor navigates to:

  • /shop → Redirects to /store/shop
  • /product/example → Redirects to /store/product/example
  • /cart → Redirects to /store/cart
  • /checkout → Redirects to /store/checkout
  • /my-account → Redirects to /store/my-account

Benefits:

  • Instant page transitions
  • Modern, consistent UI
  • Better mobile experience
  • Smooth animations

Best for:

  • New stores
  • Stores wanting a modern look
  • Mobile-focused businesses

Disabled Mode

WooCommerce uses its native templates.

WooCommerce pages work normally with your theme's templates. WooNooW admin features still work, but the customer-facing SPA is turned off.

Benefits:

  • Keep existing theme customizations
  • Compatibility with WooCommerce template overrides
  • Traditional page-by-page navigation

Best for:

  • Stores with heavy theme customizations
  • Testing before full rollout
  • Troubleshooting issues

Switching Modes

How to Switch

  1. Go to WooNooW → Appearance → General
  2. Find SPA Mode setting
  3. Select your preferred mode
  4. Click Save Changes

What Happens When Switching

Switching to Full:

  • WooCommerce pages start redirecting
  • SPA loads for shop experience
  • No data is changed

Switching to Disabled:

  • Redirects stop immediately
  • WooCommerce templates take over
  • No data is changed

Note

: All your products, orders, and settings remain unchanged when switching modes.


URL Structure

Full Mode URLs

https://yourstore.com/store/              → Home/Shop
https://yourstore.com/store/shop          → Shop page
https://yourstore.com/store/product/slug  → Product page
https://yourstore.com/store/cart          → Cart
https://yourstore.com/store/checkout      → Checkout
https://yourstore.com/store/my-account    → Account

Disabled Mode URLs

Standard WooCommerce URLs:

https://yourstore.com/shop/               → Shop page
https://yourstore.com/product/slug        → Product page
https://yourstore.com/cart/               → Cart
https://yourstore.com/checkout/           → Checkout
https://yourstore.com/my-account/         → Account

SEO Considerations

Full Mode SEO

  • WooCommerce URLs (/product/slug) remain in sitemaps
  • When users click from search results, they're redirected to SPA
  • Meta tags are generated dynamically for social sharing
  • 302 (temporary) redirects preserve link equity

Disabled Mode SEO

  • Standard WooCommerce SEO applies
  • No redirects needed
  • Works with Yoast SEO, RankMath, etc.

Troubleshooting

Redirects Not Working

  1. Flush Permalinks: Go to Settings → Permalinks → Save Changes
  2. Check Store Page: Ensure the Store page exists and has [woonoow_spa]
  3. Clear Cache: Purge all caching layers

Blank Pages After Enabling

  1. Verify SPA Mode is set to "Full"
  2. Clear browser cache
  3. Check for JavaScript errors in browser console

Want to Test Before Enabling

  1. Keep mode as "Disabled"
  2. Visit /store/ directly to preview SPA
  3. Switch to "Full" when satisfied