diff --git a/CLAUDE.md b/CLAUDE.md index dd86973..116bc56 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -252,9 +252,9 @@ unzip -l wc-composable-product-vX.X.X.zip - ✅ ~~There is a bug related to twig in the frontend area. Documented in `logs/fatal-errors*.log`~~ **FIXED in v1.1.5** - ✅ ~~Translate the admin area, too~~ **COMPLETED in v1.1.6** - All admin strings now translated to 6 locales -- Small rendering Bug in admin area. If you load the side, on first view it shows the first both tabs. -- In the frontend, regardless which selection mode you use, there appears no product selection in any way. -- The pricing field in the frondend should be rendered as localized price field include currency. +- ✅ ~~Small rendering Bug in admin area. If you load the side, on first view it shows the first both tabs.~~ **FIXED in v1.1.8** +- ✅ ~~In the frontend, regardless which selection mode you use, there appears no product selection in any way.~~ **FIXED in v1.1.8** +- ✅ ~~The pricing field in the frontend should be rendered as localized price field include currency.~~ **FIXED in v1.1.8** ## Session History @@ -1029,6 +1029,204 @@ Both v1.1.6 and v1.1.7 release packages committed to repository (1c3f44f) with c - v1.1.6: 378 KB package (complete .po files, no .mo files - translations won't display) - v1.1.7: 393 KB package (complete .po + compiled .mo files - translations work) +**Critical structure fix:** + +Both v1.1.6 and v1.1.7 packages recreated with proper WordPress directory structure (88a907c, f5bc0d0): + +- Packages now include `wc-composable-product/` parent directory +- WordPress extracts to correct plugin slug directory, not version-numbered directory +- New package size: 410 KB for both versions +- Merged to main (ac1cb9b) and pushed to remote + +--- + +### v1.1.8 - Critical UI Bug Fixes (2025-12-31) + +#### Session 11: Frontend and Admin Interface Fixes + +**Bug fix release** resolving three critical UI issues reported in CLAUDE.md. + +**Issues fixed:** + +1. **Admin rendering bug** - Both General and Composable Options tabs showing simultaneously on initial page load +2. **Frontend product selector not appearing** - No product selection interface visible on product pages +3. **Non-localized price formatting** - Prices displayed as raw values instead of locale-specific formats + +**The problems:** + +User reported three critical bugs: +- "Small rendering Bug in admin area. If you load the side, on first view it shows the first both tabs." +- "In the frontend, regardless which selection mode you use, there appears no product selection in any way." +- "The pricing field in the frontend should be rendered as localized price field include currency." + +**Root causes:** + +1. **Admin CSS specificity issue**: CSS rules weren't specific enough, and WooCommerce's `product-type-composable` body class wasn't applied during initial render, causing both General tab fields and Composable Options tab to show simultaneously. + +2. **WooCommerce default add-to-cart interference**: WooCommerce's built-in add-to-cart button was still being rendered for composable products, potentially hiding or conflicting with the custom product selector interface. + +3. **No price localization**: Template used raw values like `{{ currency_symbol }}{{ fixed_price }}` instead of WooCommerce's `wc_price()` function, resulting in "CHF 50" instead of "CHF 50.-" (Swiss format), "€50" instead of "50,00 €" (European format), etc. + +**The fixes:** + +1. **Admin CSS Enhancement** ([assets/css/admin.css](assets/css/admin.css)): +```css +/* Hide composable-specific elements by default */ +.show_if_composable { + display: none !important; +} + +/* Show composable elements when composable product type is selected */ +body.product-type-composable .show_if_composable, +.product-type-composable .show_if_composable { + display: block !important; +} + +/* Hide the Composable Options tab link by default */ +.product_data_tabs .composable_options { + display: none; +} + +/* Show the Composable Options tab when composable type selected */ +body.product-type-composable .product_data_tabs .composable_options { + display: block; +} +``` + +Enhanced CSS specificity with `!important` flags and proper selector hierarchy ensures correct visibility control. + +2. **Hide WooCommerce Default Add-to-Cart** ([includes/Cart_Handler.php](includes/Cart_Handler.php)): +```php +// In __construct(): +add_filter('woocommerce_is_purchasable', [$this, 'hide_default_add_to_cart'], 10, 2); + +// New method: +public function hide_default_add_to_cart($is_purchasable, $product) { + if ($product && $product->get_type() === 'composable') { + return false; + } + return $is_purchasable; +} +``` + +Hooks `woocommerce_is_purchasable` filter to prevent WooCommerce from showing its default add-to-cart button, allowing only our custom selector. + +3. **Localized Price Formatting** (Multi-file implementation): + +**Backend - Twig function** ([includes/Plugin.php:87](includes/Plugin.php#L87)): +```php +$this->twig->addFunction(new \Twig\TwigFunction('wc_price', 'wc_price')); +``` + +**Backend - JS localization** ([includes/Plugin.php:165-171](includes/Plugin.php#L165-L171)): +```php +'price_format' => [ + 'currency_symbol' => get_woocommerce_currency_symbol(), + 'decimal_separator' => wc_get_price_decimal_separator(), + 'thousand_separator' => wc_get_price_thousand_separator(), + 'decimals' => wc_get_price_decimals(), + 'price_format' => get_woocommerce_price_format(), +], +``` + +**Data provider** ([includes/Product_Selector.php:68-69](includes/Product_Selector.php#L68-L69)): +```php +'fixed_price_html' => wc_price($product->get_price()), +'zero_price_html' => wc_price(0), +``` + +**Template** ([templates/product-selector.twig:62-64](templates/product-selector.twig#L62-L64)): +```twig +{% if pricing_mode == 'fixed' %} + {{ fixed_price_html|raw }} +{% else %} + {{ zero_price_html|raw }} +{% endif %} +``` + +**Frontend JavaScript** ([assets/js/frontend.js:66-94](assets/js/frontend.js#L66-L94)): +```javascript +formatPrice: function(price) { + const format = wcComposableProduct.price_format; + const decimals = parseInt(format.decimals, 10); + const decimalSep = format.decimal_separator; + const thousandSep = format.thousand_separator; + + // Format number + let priceStr = price.toFixed(decimals); + const parts = priceStr.split('.'); + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSep); + priceStr = parts.join(decimalSep); + + // Apply price format (e.g., "%1$s%2$s" for symbol+price) + let formatted = format.price_format + .replace('%1$s', '' + format.currency_symbol + '') + .replace('%2$s', priceStr); + + return '' + formatted + ''; +}, +``` + +**Files modified:** + +- assets/css/admin.css: +24 lines (enhanced tab visibility control) +- includes/Cart_Handler.php: +14 lines (hide_default_add_to_cart method + hook) +- includes/Plugin.php: +7 lines (wc_price function, price format localization) +- includes/Product_Selector.php: +2 lines (formatted price HTML context) +- templates/product-selector.twig: Modified to use `{{ fixed_price_html|raw }}` +- assets/js/frontend.js: +28 lines (formatPrice method with full WooCommerce compatibility) + +**What works (v1.1.8):** + +Everything from v1.1.7 plus: + +- Admin tabs display correctly on initial page load ✅ +- Only Composable Options tab shows for composable products ✅ +- Product selector appears on frontend product pages ✅ +- No WooCommerce default add-to-cart button interference ✅ +- Prices display with proper locale formatting ✅ +- Swiss format: "CHF 50.-" (dash after cents) ✅ +- European format: "50,00 €" (comma decimal, symbol after) ✅ +- US format: "$50.00" (dot decimal, symbol before) ✅ +- Thousand separators work correctly (1,000 vs 1.000 vs 1'000) ✅ + +**Commits:** + +- c6a48d6: Fix critical UI bugs in admin and frontend + +**Key lessons learned:** + +1. **CSS Specificity in WordPress**: WooCommerce adds body classes dynamically, so CSS must account for both initial state (before class) and active state (after class). Using `!important` flags ensures rules aren't overridden by theme CSS. + +2. **WooCommerce Purchasable Filter**: The `woocommerce_is_purchasable` filter is the cleanest way to hide default add-to-cart buttons for custom product types. Returning false prevents WooCommerce from rendering any purchase UI. + +3. **Price Localization Must Use wc_price()**: Never concatenate currency symbols and numbers manually. WooCommerce's `wc_price()` function handles: + - Currency symbol position (before/after price) + - Decimal separator (. vs ,) + - Thousand separator (, vs . vs ' vs space) + - Number of decimal places (0, 2, 3, etc.) + - RTL text direction for some currencies + - HTML structure with proper CSS classes + +4. **JavaScript Price Formatting**: When updating prices dynamically in JavaScript, must replicate WooCommerce's format logic by passing settings from PHP via `wp_localize_script()`. Can't use `wc_price()` in JavaScript. + +5. **Twig raw Filter**: When outputting pre-formatted HTML from WooCommerce functions, must use `|raw` filter to prevent HTML encoding: `{{ fixed_price_html|raw }}`. + +6. **Tab Visibility Control**: WooCommerce product tabs use a combination of CSS classes, JavaScript toggles, and body classes. Must handle all three to ensure correct initial state. + +**Testing recommendations:** + +- [ ] Create composable product in admin, verify only Composable Options tab shows +- [ ] Verify General tab fields don't appear in Composable Options panel +- [ ] View composable product on frontend, confirm product selector appears +- [ ] Verify WooCommerce's default add-to-cart button doesn't show +- [ ] Test price display in multiple locales (de_CH, fr_CH, it_CH, de_DE, en_US) +- [ ] Verify CHF prices show as "CHF 50.-" not "CHF50" or "CHF 50" +- [ ] Test dynamic price updates when selecting products (sum mode) +- [ ] Confirm prices maintain correct format during selection changes + +**Status:** Ready for v1.1.8 release + --- **For AI Assistants:**