WooNooW/REDIRECT_DEBUG.md

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
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:

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:

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:

// 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