You've already forked wc-composable-product
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:
72
CLAUDE.md
72
CLAUDE.md
@@ -248,6 +248,11 @@ unzip -l wc-composable-product-vX.X.X.zip
|
|||||||
# IMPORTANT: Ensure vendor/ is included!
|
# 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
|
## Session History
|
||||||
|
|
||||||
### v1.0.0 - Initial Implementation & Release (2024-12-31)
|
### 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 Update Manager
|
||||||
- WooCommerce Analytics
|
- WooCommerce Analytics
|
||||||
- WooCommerce Tier and Package Prices (tpp/)
|
- WooCommerce Tier and Package Prices
|
||||||
|
|
||||||
No detailed error logs available initially.
|
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:**
|
**For AI Assistants:**
|
||||||
|
|
||||||
When starting a new session on this project:
|
When starting a new session on this project:
|
||||||
|
|||||||
@@ -36,6 +36,23 @@
|
|||||||
$('#composable_criteria_' + criteriaType).show();
|
$('#composable_criteria_' + criteriaType).show();
|
||||||
}).trigger('change');
|
}).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
|
* Initialize enhanced select for categories and tags
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ class Product_Data {
|
|||||||
woocommerce_wp_select([
|
woocommerce_wp_select([
|
||||||
'id' => '_composable_pricing_mode',
|
'id' => '_composable_pricing_mode',
|
||||||
'label' => __('Pricing Mode', 'wc-composable-product'),
|
'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,
|
'desc_tip' => true,
|
||||||
'options' => [
|
'options' => [
|
||||||
'' => __('Use global default', 'wc-composable-product'),
|
'' => __('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>';
|
echo '</div>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user