feat: Add dedicated SPA page selection (WooCommerce-style)

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
This commit is contained in:
Dwindi Ramadhana
2025-12-30 19:42:16 +07:00
parent 48a5a5593b
commit 012effd11d
3 changed files with 83 additions and 1 deletions

View File

@@ -82,6 +82,12 @@ class AppearanceController {
$general_data = [
'spa_mode' => sanitize_text_field($request->get_param('spaMode')),
'spa_pages' => [
'shop' => absint($request->get_param('spaPages')['shop'] ?? 0),
'cart' => absint($request->get_param('spaPages')['cart'] ?? 0),
'checkout' => absint($request->get_param('spaPages')['checkout'] ?? 0),
'account' => absint($request->get_param('spaPages')['account'] ?? 0),
],
'toast_position' => sanitize_text_field($request->get_param('toastPosition') ?? 'top-right'),
'typography' => [
'mode' => sanitize_text_field($request->get_param('typography')['mode'] ?? 'predefined'),
@@ -378,6 +384,12 @@ class AppearanceController {
return [
'general' => [
'spa_mode' => 'full',
'spa_pages' => [
'shop' => 0,
'cart' => 0,
'checkout' => 0,
'account' => 0,
],
'toast_position' => 'top-right',
'typography' => [
'mode' => 'predefined',