File: /www/wwwroot/www.byte123.top/wp-content/themes/sUx/single-product.php
<?php
/**
* 单个产品页面模板 (single-product.php)
*
* 这是专门用于显示单个产品的模板
* 包含：
* - 产品图片轮播
* - 产品详细信息
* - 产品规格
* - 相关产品推荐
* - 询价表单
*
* @package sUx
*/
get_header(); // 加载网站头部
?>
<div class="site-container">
<main id="main-content" class="site-main">
<?php while (have_posts()) : the_post(); ?>
<article id="product-<?php the_ID(); ?>" <?php post_class('product-single'); ?>>
<div class="product-single-content">
<!-- 产品图片区域 -->
<div class="product-gallery">
<?php if (has_post_thumbnail()) : ?>
<div class="product-main-image">
<?php
the_post_thumbnail('large', array(
'id' => 'product-main-image',
'class' => 'product-image-zoom',
'alt' => get_the_title()
));
?>
</div>
<!-- 产品缩略图 -->
<?php
// 获取产品图片gallery
$product_images = get_post_meta(get_the_ID(), '_sux_product_gallery', true);
if ($product_images && is_array($product_images)) :
?>
<div class="product-thumbnails">
<?php
// 首先显示特色图片
the_post_thumbnail('thumbnail', array(
'class' => 'product-thumbnail active',
'alt' => get_the_title()
));
// 然后显示gallery图片
foreach ($product_images as $image_id) :
$image_url = wp_get_attachment_image_src($image_id, 'thumbnail');
$large_url = wp_get_attachment_image_src($image_id, 'large');
if ($image_url) :
?>
<img src="<?php echo esc_url($image_url[0]); ?>"
data-large="<?php echo esc_url($large_url[0]); ?>"
alt="<?php echo esc_attr(get_the_title()); ?>"
class="product-thumbnail">
<?php
endif;
endforeach;
?>
</div>
<?php endif; ?>
<?php else : ?>
<div class="product-placeholder">
<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/product-placeholder.jpg')); ?>"
alt="<?php echo esc_attr(get_the_title()); ?>"
class="placeholder-image">
</div>
<?php endif; ?>
</div>
<!-- 产品信息区域 -->
<div class="product-info">
<!-- 产品标题 -->
<h1 class="product-title">
<?php the_title(); ?>
</h1>
<!-- 产品SKU和分类 -->
<div class="product-meta">
<?php
$product_sku = get_post_meta(get_the_ID(), '_sux_product_sku', true);
if ($product_sku) :
?>
<span class="product-sku">
<strong><?php _e('SKU：', 'sux'); ?></strong>
<?php echo esc_html($product_sku); ?>
</span>
<?php endif; ?>
<?php
$product_categories = get_the_terms(get_the_ID(), 'product_category');
if ($product_categories && !is_wp_error($product_categories)) :
?>
<div class="product-categories">
<strong><?php _e('分类：', 'sux'); ?></strong>
<?php
$categories = array();
foreach ($product_categories as $category) {
$categories[] = '<a href="' . esc_url(get_term_link($category)) . '">' . esc_html($category->name) . '</a>';
}
echo implode(', ', $categories);
?>
</div>
<?php endif; ?>
</div>
<!-- 产品价格 -->
<?php
$product_price = get_post_meta(get_the_ID(), '_sux_product_price', true);
if ($product_price) :
?>
<div class="product-price">
<span class="price-label"><?php _e('价格：', 'sux'); ?></span>
<span class="price-value sux-primary-color">
<?php echo esc_html($product_price); ?>
</span>
<?php
$original_price = get_post_meta(get_the_ID(), '_sux_product_original_price', true);
if ($original_price) :
?>
<span class="price-original">
<?php echo esc_html($original_price); ?>
</span>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- 产品库存状态 -->
<?php
$product_stock = get_post_meta(get_the_ID(), '_sux_product_stock', true);
if ($product_stock) :
$stock_class = '';
$stock_text = '';
switch ($product_stock) {
case 'in_stock':
$stock_class = 'in-stock';
$stock_text = __('有库存', 'sux');
break;
case 'out_of_stock':
$stock_class = 'out-of-stock';
$stock_text = __('缺货', 'sux');
break;
case 'pre_order':
$stock_class = 'pre-order';
$stock_text = __('预订', 'sux');
break;
}
?>
<div class="product-stock">
<span class="stock-indicator <?php echo esc_attr($stock_class); ?>">
<i class="fas fa-circle"></i>
<?php echo esc_html($stock_text); ?>
</span>
</div>
<?php endif; ?>
<!-- 产品简短描述 -->
<?php if (get_the_excerpt()) : ?>
<div class="product-excerpt">
<?php the_excerpt(); ?>
</div>
<?php endif; ?>
<!-- 产品详细描述 -->
<div class="product-description">
<?php the_content(); ?>
</div>
<!-- 产品规格 -->
<?php
$product_specs = get_post_meta(get_the_ID(), '_sux_product_specs', true);
if ($product_specs && is_array($product_specs)) :
?>
<div class="product-specs">
<h3><?php _e('产品规格', 'sux'); ?></h3>
<table class="specs-table">
<?php foreach ($product_specs as $spec) : ?>
<tr>
<td class="spec-name">
<?php echo esc_html($spec['name']); ?>
</td>
<td class="spec-value">
<?php echo esc_html($spec['value']); ?>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<?php endif; ?>
<!-- 产品特性标签 -->
<?php
$product_tags = get_the_terms(get_the_ID(), 'product_tag');
if ($product_tags && !is_wp_error($product_tags)) :
?>
<div class="product-tags">
<h3><?php _e('产品标签', 'sux'); ?></h3>
<div class="tags-list">
<?php foreach ($product_tags as $tag) : ?>
<a href="<?php echo esc_url(get_term_link($tag)); ?>"
class="product-tag">
<?php echo esc_html($tag->name); ?>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<!-- 操作按钮 -->
<div class="product-actions">
<?php
$product_link = get_post_meta(get_the_ID(), '_sux_product_link', true);
if ($product_link) :
?>
<a href="<?php echo esc_url($product_link); ?>"
class="btn-hero btn-primary"
target="_blank"
rel="noopener">
<i class="fas fa-external-link-alt"></i>
<?php _e('查看产品详情', 'sux'); ?>
</a>
<?php endif; ?>
<button class="btn-hero btn-secondary product-inquiry-btn"
data-product="<?php echo esc_attr(get_the_title()); ?>"
data-sku="<?php echo esc_attr($product_sku); ?>">
<i class="fas fa-envelope"></i>
<?php _e('询价', 'sux'); ?>
</button>
<button class="btn-hero btn-outline product-share-btn"
data-product-url="<?php echo esc_url(get_permalink()); ?>">
<i class="fas fa-share-alt"></i>
<?php _e('分享', 'sux'); ?>
</button>
</div>
<!-- 产品下载链接 -->
<?php
$product_downloads = get_post_meta(get_the_ID(), '_sux_product_downloads', true);
if ($product_downloads && is_array($product_downloads)) :
?>
<div class="product-downloads">
<h3><?php _e('相关下载', 'sux'); ?></h3>
<ul class="downloads-list">
<?php foreach ($product_downloads as $download) : ?>
<li>
<a href="<?php echo esc_url($download['url']); ?>"
class="download-link"
target="_blank">
<i class="fas fa-file-pdf"></i>
<?php echo esc_html($download['title']); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<!-- 产品详细信息标签页 -->
<?php
$product_description = get_the_content();
$product_details = get_post_meta(get_the_ID(), '_sux_product_details', true);
$product_shipping = get_post_meta(get_the_ID(), '_sux_product_shipping', true);
if ($product_details || $product_shipping || !empty($product_description)) :
?>
<div class="product-tabs">
<ul class="tabs-nav">
<li class="tab-nav-item active" data-tab="description">
<?php _e('产品描述', 'sux'); ?>
</li>
<?php if ($product_details) : ?>
<li class="tab-nav-item" data-tab="details">
<?php _e('详细信息', 'sux'); ?>
</li>
<?php endif; ?>
<?php if ($product_shipping) : ?>
<li class="tab-nav-item" data-tab="shipping">
<?php _e('配送信息', 'sux'); ?>
</li>
<?php endif; ?>
</ul>
<div class="tabs-content">
<!-- 产品描述标签页 -->
<div class="tab-content-item active" id="description">
<?php the_content(); ?>
</div>
<!-- 详细信息标签页 -->
<?php if ($product_details) : ?>
<div class="tab-content-item" id="details">
<?php echo wp_kses_post($product_details); ?>
</div>
<?php endif; ?>
<!-- 配送信息标签页 -->
<?php if ($product_shipping) : ?>
<div class="tab-content-item" id="shipping">
<?php echo wp_kses_post($product_shipping); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</article>
<?php endwhile; ?>
<!-- 相关产品推荐 -->
<?php
// 获取相关产品（基于分类或标签）
$product_categories = get_the_terms(get_the_ID(), 'product_category');
$related_args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'post__not_in' => array(get_the_ID()),
'post_status' => 'publish',
'orderby' => 'rand',
);
if ($product_categories && !is_wp_error($product_categories)) {
$category_ids = wp_list_pluck($product_categories, 'term_id');
$related_args['tax_query'] = array(
array(
'taxonomy' => 'product_category',
'field' => 'term_id',
'terms' => $category_ids,
)
);
}
$related_products = new WP_Query($related_args);
if ($related_products->have_posts()) :
?>
<section class="related-products">
<div class="section-header">
<h2 class="section-title sux-primary-color">
<?php _e('相关产品推荐', 'sux'); ?>
</h2>
</div>
<div class="products-grid">
<?php while ($related_products->have_posts()) : $related_products->the_post(); ?>
<div class="product-item">
<div class="product-image">
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium'); ?>
</a>
<?php endif; ?>
</div>
<div class="product-content">
<h3 class="product-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<?php
$related_price = get_post_meta(get_the_ID(), '_sux_product_price', true);
if ($related_price) :
?>
<div class="product-price">
<?php echo esc_html($related_price); ?>
</div>
<?php endif; ?>
<a href="<?php the_permalink(); ?>" class="product-link">
<?php _e('了解详情', 'sux'); ?>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
</section>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</main>
</div>
<!-- 询价模态框 -->
<div id="inquiry-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3><?php _e('产品询价', 'sux'); ?></h3>
<button class="modal-close" aria-label="<?php esc_attr_e('关闭', 'sux'); ?>">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form id="product-inquiry-form" class="inquiry-form">
<input type="hidden" id="inquiry-product-name" name="product_name">
<input type="hidden" id="inquiry-product-sku" name="product_sku">
<div class="form-row">
<label for="inquiry-name"><?php _e('您的姓名 *', 'sux'); ?></label>
<input type="text" id="inquiry-name" name="name" required>
</div>
<div class="form-row">
<label for="inquiry-email"><?php _e('您的邮箱 *', 'sux'); ?></label>
<input type="email" id="inquiry-email" name="email" required>
</div>
<div class="form-row">
<label for="inquiry-phone"><?php _e('联系电话', 'sux'); ?></label>
<input type="tel" id="inquiry-phone" name="phone">
</div>
<div class="form-row">
<label for="inquiry-quantity"><?php _e('询价数量', 'sux'); ?></label>
<input type="number" id="inquiry-quantity" name="quantity" min="1" value="1">
</div>
<div class="form-row">
<label for="inquiry-message"><?php _e('询价内容 *', 'sux'); ?></label>
<textarea id="inquiry-message" name="message" rows="5" required
placeholder="<?php esc_attr_e('请详细说明您的需求...', 'sux'); ?>"></textarea>
</div>
<div class="form-row">
<button type="submit" class="btn-hero btn-primary">
<?php _e('提交询价', 'sux'); ?>
</button>
</div>
<?php wp_nonce_field('product_inquiry', 'inquiry_nonce'); ?>
</form>
</div>
</div>
</div>
<?php get_footer(); // 加载网站页脚 ?>