Compare commits

..

2 Commits

Author SHA1 Message Date
Dwindi Ramadhana
b6a0a66000 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
2025-12-30 17:54:12 +07:00
Dwindi Ramadhana
3260c8c112 debug: Add detailed logging to customer SPA asset loading
Added comprehensive logging to track:
- should_load_assets() decision flow
- SPA mode setting
- Post ID and content
- Shortcode detection
- Asset enqueue URLs
- Dev vs production mode

This will help identify why customer SPA is not loading.
2025-12-30 17:51:04 +07:00

View File

@@ -15,6 +15,7 @@ class Assets {
add_action('wp_head', [self::class, 'add_inline_config'], 5);
add_action('wp_enqueue_scripts', [self::class, 'dequeue_conflicting_scripts'], 100);
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);
}
/**
@@ -34,11 +35,15 @@ class Assets {
public static function enqueue_assets() {
// Only load on pages with WooNooW shortcodes or in full SPA mode
if (!self::should_load_assets()) {
error_log('[WooNooW Customer] should_load_assets returned false - not loading');
return;
}
error_log('[WooNooW Customer] should_load_assets returned true - loading assets');
// Check if dev mode is enabled
$is_dev = defined('WOONOOW_CUSTOMER_DEV') && WOONOOW_CUSTOMER_DEV;
error_log('[WooNooW Customer] Dev mode: ' . ($is_dev ? 'true' : 'false'));
if ($is_dev) {
// Dev mode: Load from Vite dev server
@@ -76,9 +81,15 @@ class Assets {
}
// Production build - load app.js and app.css directly
$js_url = $plugin_url . 'customer-spa/dist/app.js';
$css_url = $plugin_url . 'customer-spa/dist/app.css';
error_log('[WooNooW Customer] Enqueuing JS: ' . $js_url);
error_log('[WooNooW Customer] Enqueuing CSS: ' . $css_url);
wp_enqueue_script(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.js',
$js_url,
[],
null,
true
@@ -94,10 +105,30 @@ class Assets {
wp_enqueue_style(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.css',
$css_url,
[],
null
);
error_log('[WooNooW Customer] Assets enqueued successfully');
}
}
/**
* 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>';
}
}
@@ -221,22 +252,39 @@ class Assets {
private static function should_load_assets() {
global $post;
error_log('[WooNooW Customer] should_load_assets check - Post ID: ' . ($post ? $post->ID : 'none'));
// Get Customer SPA settings
$spa_settings = get_option('woonoow_customer_spa_settings', []);
$mode = isset($spa_settings['mode']) ? $spa_settings['mode'] : 'disabled';
error_log('[WooNooW Customer] SPA mode: ' . $mode);
// If disabled, don't load
if ($mode === 'disabled') {
// Still check for shortcodes
if ($post && has_shortcode($post->post_content, 'woonoow_shop')) {
if ($post) {
error_log('[WooNooW Customer] Checking post content for shortcodes');
error_log('[WooNooW Customer] Post content: ' . substr($post->post_content, 0, 200));
if (has_shortcode($post->post_content, 'woonoow_shop')) {
error_log('[WooNooW Customer] Found woonoow_shop shortcode');
return true;
}
if ($post && has_shortcode($post->post_content, 'woonoow_cart')) {
if (has_shortcode($post->post_content, 'woonoow_cart')) {
error_log('[WooNooW Customer] Found woonoow_cart shortcode');
return true;
}
if ($post && has_shortcode($post->post_content, 'woonoow_checkout')) {
if (has_shortcode($post->post_content, 'woonoow_checkout')) {
error_log('[WooNooW Customer] Found woonoow_checkout shortcode');
return true;
}
if (has_shortcode($post->post_content, 'woonoow_account')) {
error_log('[WooNooW Customer] Found woonoow_account shortcode');
return true;
}
}
error_log('[WooNooW Customer] No shortcodes found, not loading');
return false;
}