Files
wc-composable-product/templates/product-selector.twig
magdev fa7ec0e422 Fix two critical bugs in v1.1.9
Bug 1: Admin - Both General and Composable tabs visible on initial load
- Added explicit display:none to #composable_product_data panel
- Panel now hidden by default, shows only when product-type-composable class is present
- Prevents both tabs showing simultaneously on new product creation

Bug 2: Frontend - No feedback when no products configured
- Added empty state message when products array is empty
- Users now see helpful message instead of blank grid
- Cleared Twig cache to ensure template changes take effect

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 22:34:46 +01:00

83 lines
3.8 KiB
Twig

{# Product Selector Template #}
<div class="wc-composable-product-selector" data-product-id="{{ product_id }}" data-selection-limit="{{ selection_limit }}" data-pricing-mode="{{ pricing_mode }}" data-fixed-price="{{ fixed_price }}">
<div class="composable-header">
<h3>{{ __('Select Your Products') }}</h3>
<p class="selection-info">
{{ __('Choose up to') }} <strong>{{ selection_limit }}</strong> {{ __('items from the selection below.') }}
</p>
</div>
<div class="composable-products-grid">
{% if products is empty %}
<div class="composable-no-products">
<p>{{ __('No products available for selection. Please configure the product criteria in the admin panel.') }}</p>
</div>
{% else %}
{% for product in products %}
<div class="composable-product-item{% if not product.in_stock %} out-of-stock{% endif %}" data-product-id="{{ product.id }}" data-price="{{ product.price }}" data-stock-status="{{ product.stock_status }}">
<div class="product-item-inner">
<label class="product-item-label">
<input type="checkbox"
name="composable_products[]"
value="{{ product.id }}"
class="composable-product-checkbox"
data-product-id="{{ product.id }}"
data-price="{{ product.price }}"
{% if not product.in_stock %}disabled{% endif %}>
{% if show_images and product.image_url %}
<div class="product-item-image">
<img src="{{ product.image_url }}" alt="{{ product.name|esc_attr }}">
</div>
{% endif %}
<div class="product-item-details">
<h4 class="product-item-name">{{ product.name|esc_html }}</h4>
{% if show_prices %}
<div class="product-item-price">
{{ product.price_html|raw }}
</div>
{% endif %}
<div class="product-item-stock">
{% if not product.in_stock %}
<span class="stock-status out-of-stock">{{ __('Out of stock') }}</span>
{% elseif product.managing_stock and product.stock_quantity is not null and product.stock_quantity <= 5 %}
<span class="stock-status low-stock">{{ __('Only') }} {{ product.stock_quantity }} {{ __('left') }}</span>
{% elseif product.in_stock %}
<span class="stock-status in-stock">{{ __('In stock') }}</span>
{% endif %}
</div>
</div>
<span class="product-item-checkmark"></span>
</label>
</div>
</div>
{% endfor %}
{% endif %}
</div>
{% if show_total %}
<div class="composable-total">
<div class="total-label">{{ __('Total Price:') }}</div>
<div class="total-price" data-currency="{{ currency_symbol }}" data-fixed-price="{{ fixed_price }}">
{% if pricing_mode == 'fixed' %}
{{ fixed_price_html|raw }}
{% else %}
<span class="calculated-total">{{ zero_price_html|raw }}</span>
{% endif %}
</div>
</div>
{% endif %}
<div class="composable-actions">
<button type="button" class="button alt composable-add-to-cart" data-product-id="{{ product_id }}">
{{ __('Add to Cart') }}
</button>
<div class="composable-messages"></div>
</div>
</div>