# Carousel Fix - Deployment Checklist

## Files to Upload via FTP

### NEW FILES
- [ ] `carousel_image_handler.php` - Carousel-specific image finder (NEW)

### MODIFIED FILES
- [ ] `js/image_loader.js` - Enhanced with carousel detection
- [ ] (No other files modified)

### VERIFICATION FILES (Check These)
- [ ] `image_handler.php` - Should have 4-step matching logic
- [ ] `header.php` - Should include `<script src="js/image_loader.js"></script>`
- [ ] `.htaccess` - Should have RewriteRule for image routing
- [ ] All CSS files in `/css/` directory

## Upload Instructions

### Step 1: Connect via FTP
```
Host: [your-cpanel-domain]
Username: [your-cpanel-username]
Password: [your-cpanel-password]
Remote Path: /public_html/emporio/
```

### Step 2: Upload New Files
```
Local File                          →  Remote Location
carousel_image_handler.php          →  /public_html/emporio/carousel_image_handler.php
```

### Step 3: Replace Modified Files
```
Local File                          →  Remote Location  
js/image_loader.js                  →  /public_html/emporio/js/image_loader.js
```

### Step 4: Set Permissions
```
File Permissions: 644
- carousel_image_handler.php: 644
- js/image_loader.js: 644
```

## Testing Checklist

### Pre-Test Preparation
- [ ] Clear browser cache (Ctrl+Shift+Delete)
- [ ] Open site in private/incognito window
- [ ] Press F12 to open Developer Tools

### Carousel Image Testing
1. [ ] Homepage loads
2. [ ] Carousel visible at top of page
3. [ ] Carousel has slide controls (arrows/dots)
4. [ ] Press F12 → Console tab
5. [ ] Look for messages starting with `[Carousel]`
6. [ ] Should see: `[Carousel] Detected carousel image: ai1`
7. [ ] Should see: `[Carousel] Found image: pics/ai1-xxx.jpg`
8. [ ] Should see: `✓ Image loaded: pics/ai1-xxx.jpg`
9. [ ] NO errors: `Failed to load resource: pics/ai1`
10. [ ] NO warnings: "Image not found"

### Network Tab Testing
1. [ ] Press F12 → Network tab
2. [ ] Reload page
3. [ ] Filter: "carousel_image"
4. [ ] Should see requests to: `carousel_image_handler.php?action=find&id=...`
5. [ ] Verify responses show: `{"success": true, "path": "..."}`
6. [ ] Verify final images show: Status 200 (not 404)

### Visual Verification
1. [ ] Carousel images visible (not gray boxes)
2. [ ] Carousel slider works (can click arrows)
3. [ ] Images transition smoothly
4. [ ] No broken image icons

### General Image Testing
- [ ] Product images load
- [ ] Blog images load
- [ ] Category images load
- [ ] Gallery images load
- [ ] NO 404 errors for any images

### Navigation Testing
1. [ ] Header shows: Home, Shop, About, Contact
2. [ ] MORE dropdown contains: Products, Blog, Awards, Kits Services, Legal Policies
3. [ ] All pages accessible
4. [ ] No navigation errors in console

## Rollback Plan (If Issues)

If carousel images still don't load:

### Option 1: Check File Upload
```
Via FTP/File Manager:
- Verify carousel_image_handler.php exists
- Verify file size is ~3-4 KB
- Verify js/image_loader.js is ~8-10 KB
- Verify permissions are 644
```

### Option 2: Check Server Error Log
```
cPanel → Logs → error_log
Look for errors related to:
- carousel_image_handler.php
- image_loader.js
- permission denied
- file not found
```

### Option 3: Test Handler Directly
```
In browser, visit:
https://yoursite.com/emporio/carousel_image_handler.php?action=find&id=ai1

Should return JSON like:
{"success": true, "path": "pics/ai1-xxx.jpg", "error": null}
```

### Option 4: Enable Debug Mode
```
Edit js/image_loader.js line 24-26:
Uncomment console logging
Reload page
Check console for detailed debug info
```

## Browser Developer Tools Reference

### Open Console
- Windows/Linux: F12 or Ctrl+Shift+I
- Mac: Cmd+Option+I

### Find Errors
- Console tab shows errors in red
- Network tab shows 404s with red status
- Search for "[Carousel]" to find our messages

### Clear Cache
- Windows/Linux: Ctrl+Shift+Delete
- Mac: Cmd+Shift+Delete
- Or: Settings → More Tools → Clear Browsing Data

### Test Private Mode
- Windows/Linux Chrome: Ctrl+Shift+N
- Mac Chrome: Cmd+Shift+N
- Firefox: Ctrl+Shift+P
- Safari: Cmd+Shift+N

## Success Indicators

### Console Should Show (in order):
```
[Carousel] Detected carousel image: ai1
carousel_image_handler.php?action=find&id=ai1
[Carousel] Found image: pics/ai1-xxxxx.jpg
✓ Image loaded: pics/ai1-xxxxx.jpg
```

### Console Should NOT Show:
```
❌ Failed to load resource: pics/ai1
❌ Failed to load resource: pics_ecom/ai1
❌ Failed to load resource: uploads/ai1
❌ Image not found
❌ Handler error
```

### Network Tab Should Show:
```
Type: img
Name: ai1-xxxxx.jpg
Status: 200 OK
Size: [file size in KB]
Time: [load time in ms]
```

## Common Issues & Solutions

### Issue: "Failed to load resource: pics/ai1" still appearing
**Solution:** 
- Verify carousel_image_handler.php was uploaded
- Hard refresh: Ctrl+F5 or Cmd+Shift+R
- Check file permissions (should be 644)

### Issue: Console shows "Handler error"
**Solution:**
- Check server error log in cPanel
- Verify PHP is enabled on server
- Check if carousel_image_handler.php file exists

### Issue: Console shows "Image not found"
**Solution:**
- Verify actual filename matches (case-sensitive!)
- Check if images are in correct directories
- Test with known working image ID

### Issue: No "[Carousel]" messages in console
**Solution:**
- Verify js/image_loader.js was uploaded
- Check file size (should be ~8-10 KB)
- Verify permissions (should be 644)
- Hard refresh: Ctrl+F5

### Issue: Carousel images load but very slowly
**Solution:**
- This is normal - first attempt fails, fallback loads
- Subsequent views will be faster (cached)
- Monitor network tab to see handler response time
- Check server performance/load

## Performance Expectations

- **First visit**: ~2-3 seconds for carousel fallback
- **Subsequent visits**: Near instant (cached)
- **Network overhead**: One additional request per image
- **Server overhead**: Minimal - PHP handler is lightweight

## Post-Deployment Validation

After deploying, verify:

- [ ] Site loads without errors
- [ ] Carousel images display
- [ ] No 404 errors in console
- [ ] All other images still load
- [ ] Navigation works correctly
- [ ] Search functionality works
- [ ] Mobile responsive design works
- [ ] No CORS or permission errors

## Contact/Support

If carousel images still don't load after deployment:

1. Check cPanel error logs
2. Verify all files uploaded correctly
3. Test handler directly in browser
4. Compare file sizes and modification dates
5. Try in different browser (Chrome, Firefox, Safari)
6. Check server PHP version compatibility (PHP 5.6+)

---

**Deployment Status:** Ready
**Files Modified:** 1 file + 1 new file
**Estimated Upload Time:** < 5 minutes
**Testing Time:** 5-10 minutes
