f397ef850f
- Add WP Media Library integration for product and variation images - Support images array (URLs) conversion to attachment IDs - Add images array to API responses (Admin & Customer SPA) - Implement drag-and-drop sortable images in Admin product form - Add image gallery thumbnails in Customer SPA product page - Initialize WooCommerce session for guest cart operations - Fix product variations and attributes display in Customer SPA - Add variation image field in Admin SPA Changes: - includes/Api/ProductsController.php: Handle images array, add to responses - includes/Frontend/ShopController.php: Add images array for customer SPA - includes/Frontend/CartController.php: Initialize WC session for guests - admin-spa/src/lib/wp-media.ts: Add openWPMediaGallery function - admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: WP Media + sortable images - admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx: Add variation image field - customer-spa/src/pages/Product/index.tsx: Add gallery thumbnails display
120 lines
3.1 KiB
Markdown
120 lines
3.1 KiB
Markdown
# 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
|