355 lines
10 KiB
PHP
355 lines
10 KiB
PHP
<?php
|
|
/**
|
|
* 混装产品选项模板
|
|
*
|
|
* 在单个产品页面显示混装选项
|
|
*/
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
?>
|
|
|
|
<div class="yoone-bundle-options" data-bundle-id="<?php echo esc_attr($bundle->get_id()); ?>">
|
|
<h3 class="bundle-title"><?php echo esc_html($bundle->get_name()); ?></h3>
|
|
|
|
<?php if ($bundle->get_description()): ?>
|
|
<div class="bundle-description">
|
|
<?php echo wp_kses_post($bundle->get_description()); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="bundle-items">
|
|
<h4><?php _e('选择商品', 'yoone-subscriptions'); ?></h4>
|
|
|
|
<?php foreach ($items as $index => $item): ?>
|
|
<?php
|
|
$item_product = wc_get_product($item['product_id']);
|
|
if (!$item_product) continue;
|
|
?>
|
|
|
|
<div class="bundle-item" data-product-id="<?php echo esc_attr($item['product_id']); ?>">
|
|
<div class="item-header">
|
|
<label class="item-checkbox">
|
|
<input
|
|
type="checkbox"
|
|
name="bundle_items[<?php echo esc_attr($item['product_id']); ?>]"
|
|
value="<?php echo esc_attr($item['quantity']); ?>"
|
|
<?php echo $item['is_required'] ? 'checked disabled' : ''; ?>
|
|
class="bundle-item-checkbox"
|
|
/>
|
|
<span class="item-name">
|
|
<?php echo esc_html($item_product->get_name()); ?>
|
|
<?php if ($item['is_required']): ?>
|
|
<span class="required-badge"><?php _e('必选', 'yoone-subscriptions'); ?></span>
|
|
<?php endif; ?>
|
|
</span>
|
|
</label>
|
|
|
|
<div class="item-price">
|
|
<?php if ($item['discount_type'] !== 'none' && $item['discount_value'] > 0): ?>
|
|
<span class="original-price">
|
|
<?php echo wc_price($item_product->get_price() * $item['quantity']); ?>
|
|
</span>
|
|
<span class="discounted-price">
|
|
<?php
|
|
$discounted_price = $item_product->get_price() * $item['quantity'];
|
|
if ($item['discount_type'] === 'percentage') {
|
|
$discounted_price *= (1 - $item['discount_value'] / 100);
|
|
} else {
|
|
$discounted_price -= $item['discount_value'];
|
|
}
|
|
echo wc_price(max(0, $discounted_price));
|
|
?>
|
|
</span>
|
|
<?php else: ?>
|
|
<?php echo wc_price($item_product->get_price() * $item['quantity']); ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-image">
|
|
<?php echo $item_product->get_image('thumbnail'); ?>
|
|
</div>
|
|
|
|
<div class="item-info">
|
|
<div class="item-description">
|
|
<?php echo wp_trim_words($item_product->get_short_description(), 20); ?>
|
|
</div>
|
|
|
|
<div class="item-quantity">
|
|
<?php _e('数量:', 'yoone-subscriptions'); ?>
|
|
<span class="quantity-value"><?php echo esc_html($item['quantity']); ?></span>
|
|
</div>
|
|
|
|
<?php if ($item['discount_type'] !== 'none' && $item['discount_value'] > 0): ?>
|
|
<div class="item-discount">
|
|
<?php if ($item['discount_type'] === 'percentage'): ?>
|
|
<span class="discount-badge">
|
|
<?php printf(__('-%s%%', 'yoone-subscriptions'), $item['discount_value']); ?>
|
|
</span>
|
|
<?php else: ?>
|
|
<span class="discount-badge">
|
|
<?php printf(__('-%s', 'yoone-subscriptions'), wc_price($item['discount_value'])); ?>
|
|
</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div class="bundle-summary">
|
|
<div class="price-calculation">
|
|
<div class="original-total">
|
|
<span class="label"><?php _e('原价总计:', 'yoone-subscriptions'); ?></span>
|
|
<span class="amount" id="bundle-original-total">-</span>
|
|
</div>
|
|
|
|
<?php if ($bundle->get_discount_type() !== 'none' && $bundle->get_discount_value() > 0): ?>
|
|
<div class="bundle-discount">
|
|
<span class="label"><?php _e('混装折扣:', 'yoone-subscriptions'); ?></span>
|
|
<span class="amount">
|
|
<?php if ($bundle->get_discount_type() === 'percentage'): ?>
|
|
<?php printf(__('-%s%%', 'yoone-subscriptions'), $bundle->get_discount_value()); ?>
|
|
<?php else: ?>
|
|
<?php printf(__('-%s', 'yoone-subscriptions'), wc_price($bundle->get_discount_value())); ?>
|
|
<?php endif; ?>
|
|
</span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="final-total">
|
|
<span class="label"><?php _e('混装价格:', 'yoone-subscriptions'); ?></span>
|
|
<span class="amount" id="bundle-final-total">-</span>
|
|
</div>
|
|
|
|
<div class="savings" id="bundle-savings" style="display: none;">
|
|
<span class="label"><?php _e('您节省了:', 'yoone-subscriptions'); ?></span>
|
|
<span class="amount savings-amount">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quantity-controls">
|
|
<label for="bundle-quantity"><?php _e('混装数量:', 'yoone-subscriptions'); ?></label>
|
|
<div class="quantity-input">
|
|
<button type="button" class="qty-btn minus">-</button>
|
|
<input
|
|
type="number"
|
|
id="bundle-quantity"
|
|
name="quantity"
|
|
value="<?php echo esc_attr($bundle->get_min_quantity()); ?>"
|
|
min="<?php echo esc_attr($bundle->get_min_quantity()); ?>"
|
|
<?php if ($bundle->get_max_quantity()): ?>
|
|
max="<?php echo esc_attr($bundle->get_max_quantity()); ?>"
|
|
<?php endif; ?>
|
|
step="1"
|
|
/>
|
|
<button type="button" class="qty-btn plus">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bundle-messages">
|
|
<div class="validation-messages" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.yoone-bundle-options {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.bundle-title {
|
|
margin: 0 0 15px 0;
|
|
color: #333;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.bundle-description {
|
|
margin-bottom: 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.bundle-items h4 {
|
|
margin: 0 0 15px 0;
|
|
color: #333;
|
|
}
|
|
|
|
.bundle-item {
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.bundle-item.selected {
|
|
border-color: #007cba;
|
|
}
|
|
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.item-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-checkbox input {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.item-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.required-badge {
|
|
background: #e74c3c;
|
|
color: white;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 0.8em;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.item-price {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.original-price {
|
|
text-decoration: line-through;
|
|
color: #999;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.discounted-price {
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.item-details {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.item-image {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-image img {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.item-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.item-description {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.item-quantity {
|
|
font-size: 0.9em;
|
|
color: #333;
|
|
}
|
|
|
|
.discount-badge {
|
|
background: #27ae60;
|
|
color: white;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 0.8em;
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.bundle-summary {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.price-calculation {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.price-calculation > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.final-total {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.savings {
|
|
color: #27ae60;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.quantity-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.quantity-input {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.qty-btn {
|
|
background: #f0f0f0;
|
|
border: none;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.qty-btn:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
#bundle-quantity {
|
|
border: none;
|
|
padding: 8px 12px;
|
|
width: 60px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.validation-messages {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|