File: /www/wwwroot/www.byte123.top/wp-content/themes/sUx/archive-product.php
<?php
/**
* 产品归档页面模板 (archive-product.php)
*
* 这是产品分类和标签归档页面的模板
* 用于显示：
* - 产品列表网格布局
* - 产品筛选和排序
* - 产品分页
* - 分类描述
*
* @package sUx
*/
get_header(); // 加载网站头部
?>
<div class="site-container">
<main id="main-content" class="site-main">
<div class="products-archive-header">
<div class="archive-title">
<?php
if (is_post_type_archive('product')) :
echo '<h1 class="page-title sux-primary-color">' . esc_html__('所有产品', 'sux') . '</h1>';
elseif (is_tax()) :
$queried_object = get_queried_object();
echo '<h1 class="page-title sux-primary-color">' . esc_html($queried_object->name) . '</h1>';
// 显示分类描述
if (!empty($queried_object->description)) :
echo '<div class="archive-description">' . wp_kses_post($queried_object->description) . '</div>';
endif;
endif;
?>
</div>
<!-- 产品筛选和排序 -->
<div class="products-filters">
<div class="filters-row">
<!-- 分类筛选 -->
<div class="filter-group">
<label for="category-filter"><?php _e('产品分类', 'sux'); ?></label>
<select id="category-filter" name="category">
<option value=""><?php _e('所有分类', 'sux'); ?></option>
<?php
$product_categories = get_terms(array(
'taxonomy' => 'product_category',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'ASC',
));
if ($product_categories && !is_wp_error($product_categories)) :
foreach ($product_categories as $category) :
$selected = isset($_GET['category']) && $_GET['category'] == $category->slug ? 'selected' : '';
?>
<option value="<?php echo esc_attr($category->slug); ?>"
<?php echo esc_attr($selected); ?>>
<?php echo esc_html($category->name); ?>
</option>
<?php endforeach;
endif;
?>
</select>
</div>
<!-- 标签筛选 -->
<div class="filter-group">
<label for="tag-filter"><?php _e('产品标签', 'sux'); ?></label>
<select id="tag-filter" name="tag">
<option value=""><?php _e('所有标签', 'sux'); ?></option>
<?php
$product_tags = get_terms(array(
'taxonomy' => 'product_tag',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'ASC',
));
if ($product_tags && !is_wp_error($product_tags)) :
foreach ($product_tags as $tag) :
$selected = isset($_GET['tag']) && $_GET['tag'] == $tag->slug ? 'selected' : '';
?>
<option value="<?php echo esc_attr($tag->slug); ?>"
<?php echo esc_attr($selected); ?>>
<?php echo esc_html($tag->name); ?>
</option>
<?php endforeach;
endif;
?>
</select>
</div>
<!-- 排序选项 -->
<div class="filter-group">
<label for="sort-by"><?php _e('排序方式', 'sux'); ?></label>
<select id="sort-by" name="sort">
<?php
$current_sort = isset($_GET['sort']) ? $_GET['sort'] : 'date-desc';
$sort_options = array(
'date-desc' => __('最新发布', 'sux'),
'date-asc' => __('最早发布', 'sux'),
'title-asc' => __('标题 A-Z', 'sux'),
'title-desc'=> __('标题 Z-A', 'sux'),
'featured' => __('特色产品', 'sux'),
);
foreach ($sort_options as $value => $label) :
$selected = $current_sort == $value ? 'selected' : '';
?>
<option value="<?php echo esc_attr($value); ?>"
<?php echo esc_attr($selected); ?>>
<?php echo esc_html($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<!-- 每页显示数量 -->
<div class="filter-group">
<label for="per-page"><?php _e('每页显示', 'sux'); ?></label>
<select id="per-page" name="per-page">
<?php
$per_page = isset($_GET['per-page']) ? intval($_GET['per-page']) : 12;
$options = array(6, 12, 18, 24);
foreach ($options as $option) :
$selected = $per_page == $option ? 'selected' : '';
?>
<option value="<?php echo esc_attr($option); ?>"
<?php echo esc_attr($selected); ?>>
<?php echo esc_html($option); ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<!-- 清除筛选按钮 -->
<?php if (isset($_GET) && !empty($_GET)) : ?>
<div class="filter-actions">
<a href="<?php echo esc_url(get_post_type_archive_link('product')); ?>"
class="btn-hero btn-outline">
<?php _e('清除筛选', 'sux'); ?>
</a>
</div>
<?php endif; ?>
</div>
</div>
<!-- 产品统计信息 -->
<div class="products-count">
<?php
global $wp_query;
$found_posts = $wp_query->found_posts;
$current_page = max(1, get_query_var('paged'));
$posts_per_page = $wp_query->get('posts_per_page');
$start = ($current_page - 1) * $posts_per_page + 1;
$end = min($found_posts, $start + $posts_per_page - 1);
printf(
esc_html__('显示 %d-%d 项，共 %d 项产品', 'sux'),
$start,
$end,
$found_posts
);
?>
</div>
<!-- 产品网格 -->
<div class="products-archive-grid">
<?php if (have_posts()) : ?>
<div class="products-grid">
<?php while (have_posts()) : the_post(); ?>
<div class="product-item archive-product">
<div class="product-image">
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium'); ?>
</a>
<?php else : ?>
<a href="<?php the_permalink(); ?>">
<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">
</a>
<?php endif; ?>
<?php
$product_badge = get_post_meta(get_the_ID(), '_sux_product_badge', true);
if ($product_badge) :
?>
<span class="product-badge">
<?php echo esc_html($product_badge); ?>
</span>
<?php endif; ?>
<?php
$product_stock = get_post_meta(get_the_ID(), '_sux_product_stock', true);
if ($product_stock === 'out_of_stock') :
?>
<span class="stock-badge out-of-stock">
<?php _e('缺货', 'sux'); ?>
</span>
<?php elseif ($product_stock === 'pre_order') : ?>
<span class="stock-badge pre-order">
<?php _e('预订', 'sux'); ?>
</span>
<?php endif; ?>
</div>
<div class="product-content">
<h3 class="product-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="product-meta">
<?php
// 显示产品SKU
$product_sku = get_post_meta(get_the_ID(), '_sux_product_sku', true);
if ($product_sku) :
?>
<span class="product-sku">
SKU: <?php echo esc_html($product_sku); ?>
</span>
<?php endif; ?>
<?php
// 显示产品分类
$categories = get_the_terms(get_the_ID(), 'product_category');
if ($categories && !is_wp_error($categories)) :
$category = reset($categories); // 获取第一个分类
?>
<span class="product-category">
<?php echo esc_html($category->name); ?>
</span>
<?php endif; ?>
</div>
<?php
// 产品价格
$product_price = get_post_meta(get_the_ID(), '_sux_product_price', true);
if ($product_price) :
?>
<div class="product-price sux-primary-color">
<?php echo esc_html($product_price); ?>
</div>
<?php endif; ?>
<?php
// 产品简短描述
if (get_the_excerpt()) :
?>
<div class="product-excerpt">
<?php the_excerpt(); ?>
</div>
<?php endif; ?>
<div class="product-actions">
<a href="<?php the_permalink(); ?>"
class="product-link">
<?php _e('了解详情', 'sux'); ?>
</a>
<button class="product-quick-view"
data-product-id="<?php the_ID(); ?>">
<i class="fas fa-eye"></i>
<?php _e('快速查看', 'sux'); ?>
</button>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<!-- 分页导航 -->
<div class="products-pagination">
<?php
the_posts_pagination(array(
'mid_size' => 2,
'prev_text' => __('上一页', 'sux'),
'next_text' => __('下一页', 'sux'),
'screen_reader_text' => __('产品导航', 'sux'),
'before_page_number' => '<span class="page-number">',
'after_page_number' => '</span>',
));
?>
</div>
<?php else : ?>
<!-- 没有找到产品时的提示 -->
<div class="no-products-found">
<div class="no-products-content">
<h3 class="sux-primary-color">
<?php _e('没有找到相关产品', 'sux'); ?>
</h3>
<p>
<?php _e('请尝试调整筛选条件或浏览其他产品分类', 'sux'); ?>
</p>
<!-- 搜索表单 -->
<div class="no-products-search">
<h4><?php _e('搜索产品', 'sux'); ?></h4>
<?php get_search_form(); ?>
</div>
<!-- 查看所有产品链接 -->
<?php if (is_tax()) : ?>
<div class="no-products-action">
<a href="<?php echo esc_url(get_post_type_archive_link('product')); ?>"
class="btn-hero btn-primary">
<?php _e('查看所有产品', 'sux'); ?>
</a>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
<!-- 分类导航（侧边栏选项） -->
<?php if (is_active_sidebar('product-sidebar')) : ?>
<aside class="products-sidebar">
<?php dynamic_sidebar('product-sidebar'); ?>
</aside>
<?php endif; ?>
</main>
</div>
<!-- 快速查看模态框 -->
<div id="quick-view-modal" class="modal quick-view-modal">
<div class="modal-content quick-view-content">
<div class="modal-header">
<h3><?php _e('产品快速查看', 'sux'); ?></h3>
<button class="modal-close quick-view-close" aria-label="<?php esc_attr_e('关闭', 'sux'); ?>">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="quick-view-loading">
<i class="fas fa-spinner fa-spin"></i>
<?php _e('加载中...', 'sux'); ?>
</div>
<div class="quick-view-content-container" style="display: none;">
<!-- 动态加载产品内容 -->
</div>
</div>
</div>
</div>
<?php get_footer(); // 加载网站页脚 ?>