fix: Add SPA mounting point for full mode
Problem: Customer SPA not loading in 'full' mode Root Cause: In full mode, SPA loads on WooCommerce pages without shortcodes, so there's no #woonoow-customer-app div for React to mount to Solution: Inject mounting point div when in full mode via woocommerce_before_main_content hook Changes: - Added inject_spa_mount_point() method - Hooks into woocommerce_before_main_content when in full mode - Only injects if mount point doesn't exist from shortcode Result: ✅ Full mode now has mounting point on WooCommerce pages ✅ Shortcode mode still works with shortcode-provided divs ✅ Customer SPA can now initialize properly
This commit is contained in:
@@ -15,6 +15,7 @@ class Assets {
|
|||||||
add_action('wp_head', [self::class, 'add_inline_config'], 5);
|
add_action('wp_head', [self::class, 'add_inline_config'], 5);
|
||||||
add_action('wp_enqueue_scripts', [self::class, 'dequeue_conflicting_scripts'], 100);
|
add_action('wp_enqueue_scripts', [self::class, 'dequeue_conflicting_scripts'], 100);
|
||||||
add_filter('script_loader_tag', [self::class, 'add_module_type'], 10, 3);
|
add_filter('script_loader_tag', [self::class, 'add_module_type'], 10, 3);
|
||||||
|
add_action('woocommerce_before_main_content', [self::class, 'inject_spa_mount_point'], 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -113,6 +114,24 @@ class Assets {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inject SPA mounting point for full mode
|
||||||
|
*/
|
||||||
|
public static function inject_spa_mount_point() {
|
||||||
|
if (!self::should_load_assets()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we're in full mode and not on a page with shortcode
|
||||||
|
$spa_settings = get_option('woonoow_customer_spa_settings', []);
|
||||||
|
$mode = isset($spa_settings['mode']) ? $spa_settings['mode'] : 'disabled';
|
||||||
|
|
||||||
|
if ($mode === 'full') {
|
||||||
|
// Only inject if the mount point doesn't already exist (from shortcode)
|
||||||
|
echo '<div id="woonoow-customer-app" data-page="shop"><div class="woonoow-loading"><p>Loading...</p></div></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add inline config and scripts to page head
|
* Add inline config and scripts to page head
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user