Document v1.1.4 session: Fixed price field enhancement

Added session history for v1.1.4 which introduced:
- Fixed price field in Composable Options tab
- JavaScript toggle based on pricing mode selection
- Improved admin UX with progressive disclosure

🤖 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 21:01:52 +01:00
parent 818fd51502
commit 867abc8f63
3 changed files with 99 additions and 2 deletions

View File

@@ -248,6 +248,11 @@ unzip -l wc-composable-product-vX.X.X.zip
# IMPORTANT: Ensure vendor/ is included!
```
## Bugs found
- There is a bug related to twig in the frontend area. Documented in `logs/fatal-errors*.log`
- Translate the admin area, too
## Session History
### v1.0.0 - Initial Implementation & Release (2024-12-31)
@@ -589,7 +594,7 @@ Plugin was installable and activatable, but WordPress showed incompatibility war
- WooCommerce Update Manager
- WooCommerce Analytics
- WooCommerce Tier and Package Prices (tpp/)
- WooCommerce Tier and Package Prices
No detailed error logs available initially.
@@ -671,6 +676,71 @@ Translation files updated (392559d) to include all 8 stock-related strings acros
---
### v1.1.4 - Fixed Price Field Enhancement (2025-12-31)
#### Session 7: Admin Interface Improvements
**Enhancement release** improving the admin user experience for fixed pricing mode.
**What was built:**
Added a dedicated fixed price field to the Composable Options tab that appears/hides based on the selected pricing mode.
**Implementation details:**
1. **Admin UI Enhancement** (includes/Admin/Product_Data.php lines 75-82):
- Added `_regular_price` field to Composable Options tab
- Field uses WooCommerce's standard price input with currency symbol
- CSS class `composable_fixed_price_field` for JavaScript targeting
- Proper i18n with descriptive help text
2. **JavaScript Toggle Logic** (assets/js/admin.js lines 39-54):
- Added `toggleFixedPriceField()` function
- Shows field only when pricing mode is "fixed"
- Hides field for "sum" mode or when using global default
- Triggers on page load and when pricing mode changes
3. **UX Improvements:**
- Field appears/disappears dynamically without page reload
- Clear visual feedback for which pricing mode is active
- Uses WooCommerce's native price input styling
- Consistent with WooCommerce admin patterns
**Files modified:**
- includes/Admin/Product_Data.php:
- Line 66: Simplified pricing mode description text
- Lines 75-82: Added fixed price field with wrapper class
- assets/js/admin.js:
- Lines 39-54: Added price field toggle functionality
**User experience improvements:**
- ✅ Fixed price field now visible in Composable Options tab
- ✅ Field automatically shows/hides based on pricing mode selection
- ✅ Eliminates confusion about where to set the fixed price
- ✅ Follows WooCommerce UI/UX conventions
**Key lessons learned:**
1. **Reuse Standard Fields**: Using `_regular_price` instead of custom meta leverages WooCommerce's existing price handling
2. **Progressive Disclosure**: Show/hide fields based on context reduces cognitive load
3. **JavaScript + CSS Classes**: Using semantic class names (`composable_fixed_price_field`) makes JS targeting clean
4. **Trigger on Load**: Always call toggle functions on page load to set initial state
5. **Native WooCommerce Patterns**: Using `woocommerce_wp_text_input()` with `data_type: 'price'` ensures proper formatting
**Testing considerations:**
- [ ] Verify fixed price field appears when pricing mode is "fixed"
- [ ] Verify field hides when pricing mode is "sum" or default
- [ ] Test price value persistence after save
- [ ] Ensure price validation works correctly
- [ ] Check currency symbol displays for all locales
**Status:** Ready for testing and release
---
**For AI Assistants:**
When starting a new session on this project:

View File

@@ -36,6 +36,23 @@
$('#composable_criteria_' + criteriaType).show();
}).trigger('change');
/**
* Toggle fixed price field based on pricing mode
*/
function toggleFixedPriceField() {
const pricingMode = $('#_composable_pricing_mode').val();
const $fixedPriceField = $('.composable_fixed_price_field');
if (pricingMode === 'fixed') {
$fixedPriceField.show();
} else {
$fixedPriceField.hide();
}
}
$('#_composable_pricing_mode').on('change', toggleFixedPriceField);
toggleFixedPriceField();
/**
* Initialize enhanced select for categories and tags
*/

View File

@@ -63,7 +63,7 @@ class Product_Data {
woocommerce_wp_select([
'id' => '_composable_pricing_mode',
'label' => __('Pricing Mode', 'wc-composable-product'),
'description' => __('How to calculate the price. Leave empty to use global default.', 'wc-composable-product'),
'description' => __('How to calculate the price.', 'wc-composable-product'),
'desc_tip' => true,
'options' => [
'' => __('Use global default', 'wc-composable-product'),
@@ -72,6 +72,16 @@ class Product_Data {
],
]);
woocommerce_wp_text_input([
'id' => '_regular_price',
'label' => __('Fixed Price', 'wc-composable-product') . ' (' . get_woocommerce_currency_symbol() . ')',
'description' => __('Enter the fixed price for this composable product.', 'wc-composable-product'),
'desc_tip' => true,
'type' => 'text',
'data_type' => 'price',
'wrapper_class' => 'composable_fixed_price_field',
]);
echo '</div>';
}
}