Fix critical UI bugs in admin and frontend

Fixes three critical bugs reported in CLAUDE.md:

1. Admin rendering bug - Fixed CSS to prevent both General and Composable
   Options tabs from showing simultaneously on initial page load
   - Enhanced CSS specificity with !important flags
   - Added body.product-type-composable selectors for proper visibility control
   - Hides Composable Options tab by default, shows only when composable type selected

2. Frontend product selector not appearing - Fixed WooCommerce integration
   - Added hide_default_add_to_cart() method to Cart_Handler
   - Hooks woocommerce_is_purchasable filter to return false for composable products
   - This hides WooCommerce's default add-to-cart button
   - Allows our custom product selector to be the only interface

3. Localized price formatting - Implemented proper WooCommerce price formatting
   - Added wc_price Twig function in Plugin.php
   - Updated Product_Selector to pass formatted price HTML to template
   - Added price_format data to JavaScript localization
   - Implemented formatPrice() method in frontend.js
   - Supports all WooCommerce price formats (currency position, decimals, separators)
   - Template now uses {{ fixed_price_html|raw }} and {{ zero_price_html|raw }}
   - JavaScript dynamically formats prices using locale-specific settings

Technical improvements:
- Cart_Handler.php: +14 lines (hide_default_add_to_cart method)
- Plugin.php: +7 lines (wc_price function, price format localization)
- Product_Selector.php: +2 lines (formatted price HTML context)
- templates/product-selector.twig: Modified to use formatted price HTML
- assets/css/admin.css: +24 lines (enhanced tab visibility control)
- assets/js/frontend.js: +28 lines (formatPrice method with WooCommerce format support)

All PHP files pass lint checks. Frontend now properly displays localized prices
with correct currency symbols, decimal separators, and thousand separators for
all WooCommerce-supported locales (CHF for Switzerland, € for Europe, etc.).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-31 22:08:08 +01:00
parent 88a907c4dd
commit c6a48d6404
7 changed files with 82 additions and 6 deletions

View File

@@ -63,6 +63,36 @@
this.clearMessages($container);
},
/**
* Format price using WooCommerce settings
*
* @param {number} price Price amount
* @return {string} Formatted price HTML
*/
formatPrice: function(price) {
if (typeof wcComposableProduct === 'undefined' || !wcComposableProduct.price_format) {
return price.toFixed(2);
}
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 or "%2$s%1$s" for price+symbol)
let formatted = format.price_format
.replace('%1$s', '<span class="woocommerce-Price-currencySymbol">' + format.currency_symbol + '</span>')
.replace('%2$s', priceStr);
return '<span class="woocommerce-Price-amount amount">' + formatted + '</span>';
},
/**
* Update total price
*
@@ -79,8 +109,8 @@
}
});
const currencySymbol = $container.find('.total-price').data('currency');
$container.find('.calculated-total').text(currencySymbol + total.toFixed(2));
const formattedPrice = this.formatPrice(total);
$container.find('.calculated-total').html(formattedPrice);
},
/**