142 lines
3.4 KiB
Plaintext
142 lines
3.4 KiB
Plaintext
---
|
|
title: SPA Mode
|
|
description: Understanding and configuring WooNooW's SPA mode
|
|
date: 2024-01-31
|
|
---
|
|
|
|
## 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
|
|
|
|
### Full Mode (Recommended)
|
|
|
|
**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
|