# Product Page Redirect Debugging

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

## Debugging Steps

### 1. Check Console Logs
Open browser console and navigate to: `https://woonoow.local/product/edukasi-anak`

Look for these 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: {...}
```

### 2. Possible Causes

#### A. WordPress Canonical Redirect
WordPress might be redirecting the URL because it doesn't recognize `/product/` as a valid route.

**Solution:** Disable canonical redirects for SPA pages.

#### B. React Router Not Matching
The route might not be matching correctly.

**Check:** Does the slug parameter get extracted?

#### C. WooCommerce Redirect
WooCommerce might be redirecting to shop page.

**Check:** Is `is_product()` returning true?

#### D. 404 Handling
WordPress might be treating it as 404 and redirecting.

**Check:** Is the page returning 404 status?

### 3. Quick Tests

#### Test 1: Check if Template Loads
Add this to `spa-full-page.php` at the top:
```php
<?php
error_log('SPA Template Loaded - is_product: ' . (is_product() ? 'yes' : 'no'));
error_log('Current URL: ' . $_SERVER['REQUEST_URI']);
?>
```

#### Test 2: Check React Router
Add this to `App.tsx`:
```tsx
useEffect(() => {
  console.log('Current Path:', window.location.pathname);
  console.log('Is Product Route:', window.location.pathname.includes('/product/'));
}, []);
```

#### Test 3: Check if Assets Load
Open Network tab and check if `customer-spa.js` loads on product page.

### 4. Likely Solution

The issue is probably WordPress canonical redirect. Add this to `TemplateOverride.php`:

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

public static function disable_canonical_redirect($redirect_url, $requested_url) {
    $settings = get_option('woonoow_customer_spa_settings', []);
    $mode = isset($settings['mode']) ? $settings['mode'] : 'disabled';
    
    if ($mode === 'full') {
        // 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) {
                return false; // Disable redirect
            }
        }
    }
    
    return $redirect_url;
}
```

### 5. Alternative: Use Hash Router

If canonical redirects can't be disabled, use HashRouter instead:

```tsx
// In App.tsx
import { HashRouter } from 'react-router-dom';

// Change BrowserRouter to HashRouter
<HashRouter>
  {/* routes */}
</HashRouter>
```

URLs will be: `https://woonoow.local/#/product/edukasi-anak`

This works because everything after `#` is client-side only.

## Next Steps

1. Add console logs (already done)
2. Test and check console
3. If slug is undefined → React Router issue
4. If slug is defined but redirects → WordPress redirect issue
5. Apply appropriate fix