# Fix: Product Page Redirect Issue

## Problem
Direct access to product URLs like `/product/edukasi-anak` redirects to `/shop`.

## Root Cause
**WordPress Canonical Redirect**

WordPress has a built-in canonical redirect system that redirects "incorrect" URLs to their "canonical" version. When you access `/product/edukasi-anak`, WordPress doesn't recognize this as a valid WordPress route (because it's a React Router route), so it redirects to the shop page.

### How WordPress Canonical Redirect Works

1. User visits `/product/edukasi-anak`
2. WordPress checks if this is a valid WordPress route
3. WordPress doesn't find a post/page with this URL
4. WordPress thinks it's a 404 or incorrect URL
5. WordPress redirects to the nearest valid URL (shop page)

This happens **before** React Router can handle the URL.

---

## Solution

Disable WordPress canonical redirects for SPA routes.

### Implementation

**File:** `includes/Frontend/TemplateOverride.php`

#### 1. Hook into Redirect Filter

```php
public static function init() {
    // ... existing code ...
    
    // Disable canonical redirects for SPA routes
    add_filter('redirect_canonical', [__CLASS__, 'disable_canonical_redirect'], 10, 2);
}
```

#### 2. Add Redirect Handler

```php
/**
 * Disable canonical redirects for SPA routes
 * This prevents WordPress from redirecting /product/slug URLs
 */
public static function disable_canonical_redirect($redirect_url, $requested_url) {
    $settings = get_option('woonoow_customer_spa_settings', []);
    $mode = isset($settings['mode']) ? $settings['mode'] : 'disabled';
    
    // Only disable redirects in full SPA mode
    if ($mode !== 'full') {
        return $redirect_url;
    }
    
    // Check if this is a SPA route
    $spa_routes = ['/product/', '/cart', '/checkout', '/my-account'];
    
    foreach ($spa_routes as $route) {
        if (strpos($requested_url, $route) !== false) {
            // This is a SPA route, disable WordPress redirect
            return false;
        }
    }
    
    return $redirect_url;
}
```

---

## How It Works

### The `redirect_canonical` Filter

WordPress provides the `redirect_canonical` filter that allows you to control canonical redirects.

**Parameters:**
- `$redirect_url` - The URL WordPress wants to redirect to
- `$requested_url` - The URL the user requested

**Return Values:**
- Return `$redirect_url` - Allow the redirect
- Return `false` - Disable the redirect
- Return different URL - Redirect to that URL instead

### Our Logic

1. Check if SPA mode is enabled
2. Check if the requested URL contains SPA routes (`/product/`, `/cart`, etc.)
3. If yes, return `false` to disable redirect
4. If no, return `$redirect_url` to allow normal WordPress behavior

---

## Why This Works

### Before Fix
```
User → /product/edukasi-anak
  ↓
WordPress: "This isn't a valid route"
  ↓
WordPress: "Redirect to /shop"
  ↓
React Router never gets a chance to handle the URL
```

### After Fix
```
User → /product/edukasi-anak
  ↓
WordPress: "Should I redirect?"
  ↓
Our filter: "No, this is a SPA route"
  ↓
WordPress: "OK, loading template"
  ↓
React Router: "I'll handle /product/edukasi-anak"
  ↓
Product page loads correctly
```

---

## Testing

### Test Direct Access
1. Open new browser tab
2. Go to: `https://woonoow.local/product/edukasi-anak`
3. Should load product page directly
4. Should NOT redirect to `/shop`

### Test Navigation
1. Go to `/shop`
2. Click a product
3. Should navigate to `/product/slug`
4. Should work correctly

### Test Other Routes
1. `/cart` - Should work
2. `/checkout` - Should work
3. `/my-account` - Should work

### Check Console
Open browser console and check for logs:
```
Product Component - Slug: edukasi-anak
Product Component - Current URL: https://woonoow.local/product/edukasi-anak
Product Query - Starting fetch for slug: edukasi-anak
Product API Response: {...}
Product found: {...}
```

---

## Additional Notes

### SPA Routes Protected

The following routes are protected from canonical redirects:
- `/product/` - Product detail pages
- `/cart` - Cart page
- `/checkout` - Checkout page
- `/my-account` - Account pages

### Only in Full SPA Mode

This fix only applies when SPA mode is set to `full`. In other modes, WordPress canonical redirects work normally.

### No Impact on SEO

Disabling canonical redirects for SPA routes doesn't affect SEO because:
1. These are client-side routes handled by React
2. The actual WordPress product pages still exist
3. Search engines see the server-rendered content
4. Canonical URLs are still set in meta tags

---

## Alternative Solutions

### Option 1: Hash Router (Not Recommended)
Use HashRouter instead of BrowserRouter:
```tsx
<HashRouter>
  {/* routes */}
</HashRouter>
```

**URLs become:** `https://woonoow.local/#/product/edukasi-anak`

**Pros:**
- No server-side configuration needed
- Works everywhere

**Cons:**
- Ugly URLs with `#`
- Poor SEO
- Not modern web standard

### Option 2: Custom Rewrite Rules (More Complex)
Add custom WordPress rewrite rules for SPA routes.

**Pros:**
- More "proper" WordPress way

**Cons:**
- More complex
- Requires flush_rewrite_rules()
- Can conflict with other plugins

### Option 3: Our Solution (Best)
Disable canonical redirects for SPA routes.

**Pros:**
- ✅ Clean URLs
- ✅ Simple implementation
- ✅ No conflicts
- ✅ Easy to maintain

**Cons:**
- None!

---

## Summary

**Problem:** WordPress canonical redirect interferes with React Router

**Solution:** Disable canonical redirects for SPA routes using `redirect_canonical` filter

**Result:** Direct product URLs now work correctly! ✅

**Files Modified:**
- `includes/Frontend/TemplateOverride.php` - Added redirect handler

**Test:** Navigate to `/product/edukasi-anak` directly - should work!