Problem: Shortcode 'island' architecture is fragile and theme-dependent
- SPA div buried deep in theme structure (body > div.wp-site-blocks > main > div#app)
- Theme and plugins can intervene at any level
- Different themes have different structures
- Breaks easily with theme changes
Solution: Dedicated page-based SPA system (like WooCommerce)
- Add page selection in Appearance > General settings
- Store page IDs for Shop, Cart, Checkout, Account
- Full-body SPA rendering on designated pages
- No theme interference
Changes:
- AppearanceController.php:
* Added spa_pages field to general settings
* Stores page IDs for each SPA type (shop/cart/checkout/account)
- TemplateOverride.php:
* Added is_spa_page() method to check designated pages
* Use blank template for designated pages (priority over legacy)
* Remove theme elements for designated pages
- Assets.php:
* Added is_spa_page() check before mode/shortcode checks
* Load assets on designated pages regardless of mode
Architecture:
- Designated pages render directly to <body>
- No theme wrapper/structure interference
- Clean full-page SPA experience
- Works with ANY theme consistently
Next: Add UI in admin-spa General tab for page selection
Problem 1: Fonts not loading (404 errors)
Root Cause: Build script only copied app.js and app.css, not fonts folder
Solution: Include fonts directory in production build
Problem 2: Theme header/footer still showing on some themes
Root Cause: Header/footer removal only worked in 'full' mode, not for shortcode pages
Solution:
- Use blank template (spa-full-page.php) for ANY page with WooNooW shortcodes
- Remove theme elements for shortcode pages even in 'disabled' mode
- Stronger detection for Shop page (archive) shortcode check
Changes:
- build-production.sh: Copy fonts folder if exists
- TemplateOverride.php:
* use_spa_template() now checks for shortcodes in disabled mode
* should_remove_theme_elements() removes for shortcode pages
* Added Shop page archive check for shortcode detection
Result:
✅ Fonts now included in production build (~500KB added)
✅ Theme header/footer removed on ALL shortcode pages
✅ Works with any theme (Astra, Twenty Twenty-Three, etc.)
✅ Clean SPA experience regardless of SPA mode setting
✅ Package size: 2.1M (was 1.6M, +500KB for fonts)
Problem: Duplicate headers and footers showing (theme + SPA)
Root Cause: Theme's header and footer still rendering when Full SPA mode is active
Solution: Remove theme header/footer elements when on WooCommerce pages in Full SPA mode
- Hook into get_header and get_footer actions
- Remove all theme header/footer actions
- Keep only essential WordPress head/footer scripts
- Only applies when mode='full' and on WooCommerce pages
Changes:
- Added remove_theme_header() method
- Added remove_theme_footer() method
- Added should_remove_theme_elements() check
- Hooks into get_header and get_footer
Result:
✅ Clean SPA experience without theme header/footer
✅ Essential WordPress scripts still load
✅ Only affects Full SPA mode on WooCommerce pages
✅ Other pages keep theme header/footer
