kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shop): category filter bar + sort/load-more 1:1 UX

Browse Source 
Port zibll hierarchical cat tabs, multi-metric sort with price toggle,
skeleton/empty states, and REST archive payload (header/html/paginate)
while reusing product-card template for AJAX HTML.
This commit is contained in:
kate522 committed 2026-07-18 16:42:52 +08:00
1 parent e2587ca3a0
commit 433b7cb3a6
9 files changed
+828 -273
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/shop/product-cat.php
+108 -84
View File
@@ -1,6 +1,6 @@
<?php
/**
* 商品分类归档模板
* 商品分类归档模板 — zibll shop cat filter + ajax list 1:1 UX
*
* @package AKSRT
*/
@@ -11,14 +11,25 @@ get_header();
$term = get_queried_object();
$paged = max(1, (int) get_query_var('paged'));
$orderby = isset($_GET['shop_orderby']) ? sanitize_key(wp_unslash((string) $_GET['shop_orderby'])) : '';
$shop = class_exists('\AKSRT\Shop\Shop') ? \AKSRT\Shop\Shop::get_instance() : null;
$view = $shop ? $shop->get_product_archive_view([
'taxonomy' => 'aksrt_product_cat',
'term_id' => $term ? (int) $term->term_id : 0,
'paged' => $paged,
'orderby' => $orderby,
]) : ['products' => [], 'term' => null, 'total' => 0, 'max_pages' => 0, 'orderby' => 'date', 'paging' => 'number'];
$orderby = '';
$order = '';
if (isset($_GET['orderby'])) {
$orderby = sanitize_key(wp_unslash((string) $_GET['orderby']));
} elseif (isset($_GET['shop_orderby'])) {
$orderby = sanitize_key(wp_unslash((string) $_GET['shop_orderby']));
}
if (isset($_GET['order'])) {
$order = sanitize_key(wp_unslash((string) $_GET['order']));
}
$shop = class_exists('\AKSRT\Shop\Shop') ? \AKSRT\Shop\Shop::get_instance() : null;
$view = $shop ? $shop->get_product_archive_view([
'taxonomy' => 'aksrt_product_cat',
'term_id' => $term ? (int) $term->term_id : 0,
'paged' => $paged,
'orderby' => $orderby,
'order' => $order,
]) : ['products' => [], 'term' => null, 'total' => 0, 'max_pages' => 0, 'orderby' => 'date', 'order' => 'DESC', 'paging' => 'number'];
$products = $view['products'] ?? [];
$total = (int) ($view['total'] ?? 0);
@@ -26,95 +37,108 @@ $max_pages = (int) ($view['max_pages'] ?? 0);
$term_name = $term->name ?? '';
$term_desc = $term->description ?? '';
$active_orderby = (string) ($view['orderby'] ?? 'date');
$active_order = strtoupper((string) ($view['order'] ?? 'DESC'));
$paging = (string) ($view['paging'] ?? 'number');
$ias_s = !empty($view['ias_s']);
$ias_max = (int) ($view['ias_max'] ?? 5);
$style = (string) ($view['style'] ?? 'default');
$sales_cfg = is_array($view['sales'] ?? null) ? $view['sales'] : [];
$order_options = [
'date' => __('最新', 'aksrt'),
'sales' => __('销量', 'aksrt'),
'price_asc' => __('价格升序', 'aksrt'),
'price_desc' => __('价格降序', 'aksrt'),
'comments' => __('评价', 'aksrt'),
];
$filter = is_array($view['filter'] ?? null) ? $view['filter'] : null;
?>
<main id="main-content" class="site-main content-shell" tabindex="-1">
<?php if (function_exists('aksrt_breadcrumbs')) { aksrt_breadcrumbs(); } ?>
<?php if (function_exists('aksrt_breadcrumbs')) { aksrt_breadcrumbs(); } ?>
<div class="aksrt-product-archive container"
data-aksrt-product-archive
data-taxonomy="aksrt_product_cat"
data-term-id="<?php echo esc_attr((string) ($term->term_id ?? 0)); ?>"
data-orderby="<?php echo esc_attr($active_orderby); ?>"
data-page="<?php echo esc_attr((string) $paged); ?>"
data-max-pages="<?php echo esc_attr((string) $max_pages); ?>"
data-paging="<?php echo esc_attr($paging); ?>"
data-ias="<?php echo $ias_s ? '1' : '0'; ?>"
data-ias-max="<?php echo esc_attr((string) $ias_max); ?>"
data-style="<?php echo esc_attr($style); ?>">
<div class="aksrt-product-archive container"
data-aksrt-product-archive
data-taxonomy="aksrt_product_cat"
data-term-id="<?php echo esc_attr((string) ($term->term_id ?? 0)); ?>"
data-orderby="<?php echo esc_attr($active_orderby); ?>"
data-order="<?php echo esc_attr($active_order); ?>"
data-page="<?php echo esc_attr((string) $paged); ?>"
data-max-pages="<?php echo esc_attr((string) $max_pages); ?>"
data-paging="<?php echo esc_attr($paging); ?>"
data-ias="<?php echo $ias_s ? '1' : '0'; ?>"
data-ias-max="<?php echo esc_attr((string) $ias_max); ?>"
data-style="<?php echo esc_attr($style); ?>">
<header class="aksrt-product-archive__header">
<div class="aksrt-product-archive__eyebrow"><?php esc_html_e('商城商品', 'aksrt'); ?></div>
<h1 class="aksrt-product-archive__title"><?php echo esc_html($term_name); ?></h1>
<?php if ($term_desc) : ?>
<p class="aksrt-product-archive__desc"><?php echo esc_html($term_desc); ?></p>
<?php endif; ?>
<p class="aksrt-product-archive__count" data-aksrt-archive-count><?php printf(esc_html__('共 %d 件商品', 'aksrt'), $total); ?></p>
</header>
<header class="aksrt-product-archive__header shop-term-header ajax-item-header" data-aksrt-ajax-header>
<div class="aksrt-product-archive__eyebrow"><?php esc_html_e('商城商品', 'aksrt'); ?></div>
<h1 class="aksrt-product-archive__title" data-aksrt-archive-title><?php echo esc_html($term_name); ?></h1>
<?php if ($term_desc) : ?>
<p class="aksrt-product-archive__desc" data-aksrt-archive-desc><?php echo esc_html($term_desc); ?></p>
<?php endif; ?>
<p class="aksrt-product-archive__count" data-aksrt-archive-count><?php printf(esc_html__('共 %d 件商品', 'aksrt'), $total); ?></p>
<nav class="aksrt-product-archive__toolbar" aria-label="<?php esc_attr_e('商品排序', 'aksrt'); ?>">
<?php foreach ($order_options as $key => $label) :
$url = add_query_arg(['shop_orderby' => $key]);
?>
<a class="aksrt-product-archive__sort<?php echo $active_orderby === $key ? ' is-active' : ''; ?>"
href="<?php echo esc_url($url); ?>"
data-aksrt-shop-orderby="<?php echo esc_attr($key); ?>">
<?php echo esc_html($label); ?>
</a>
<?php endforeach; ?>
</nav>
<?php
if ($filter) {
$orderby = $active_orderby;
$order = $active_order;
$term = $view['term'] ?? null;
include get_template_directory() . '/templates/parts/shop/product-cat-filter.php';
}
?>
</header>
<?php if (!empty($products)) : ?>
<div class="aksrt-product-archive__grid aksrt-product-archive__grid--<?php echo esc_attr($style); ?>" id="aksrt-product-grid" data-aksrt-product-grid>
<?php foreach ($products as $product) :
get_template_part('templates/parts/shop/product', 'card', [
'product' => $product,
'sales_cfg' => $sales_cfg,
]);
endforeach; ?>
</div>
<div class="ajaxpager product-lists-row aksrt-product-archive__ajaxpager"
data-aksrt-ajaxpager
data-aksrt-ajax-clear="1">
<div class="post_ajax_loader" data-aksrt-ajax-loader data-aksrt-ajax-loader-hide hidden>
<div class="aksrt-product-archive__skeleton">
<?php for ($i = 0; $i < 4; $i++) : ?>
<div class="aksrt-product-card aksrt-product-card--placeholder placeholder"></div>
<?php endfor; ?>
</div>
</div>
<?php if ($max_pages > 1) : ?>
<?php if ($paging === 'ajax') : ?>
<div class="aksrt-product-archive__load-more">
<button type="button" class="aksrt-load-more-btn" data-aksrt-shop-load-more><?php esc_html_e('加载更多', 'aksrt'); ?></button>
</div>
<?php else : ?>
<nav class="aksrt-product-archive__pagination" aria-label="<?php esc_attr_e('商品分页', 'aksrt'); ?>">
<?php
echo paginate_links([
'total' => $max_pages,
'current' => $paged,
'prev_text' => '<i class="fas fa-chevron-left"></i>',
'next_text' => '<i class="fas fa-chevron-right"></i>',
'add_args' => $active_orderby ? ['shop_orderby' => $active_orderby] : [],
]);
?>
</nav>
<?php endif; ?>
<?php endif; ?>
<?php else : ?>
<div class="aksrt-product-archive__empty">
<i class="fas fa-box-open"></i>
<p><?php esc_html_e('内容空空如也', 'aksrt'); ?></p>
</div>
<?php endif; ?>
</div>
<div class="aksrt-product-archive__grid aksrt-product-archive__grid--<?php echo esc_attr($style); ?>" id="aksrt-product-grid" data-aksrt-product-grid>
<?php if (!empty($products)) : ?>
<?php foreach ($products as $product) :
get_template_part('templates/parts/shop/product', 'card', [
'product' => $product,
'sales_cfg' => $sales_cfg,
]);
endforeach; ?>
<?php else : ?>
<?php echo function_exists('aksrt_get_ajax_null') ? aksrt_get_ajax_null(__('内容空空如也', 'aksrt')) : '<div class="aksrt-product-archive__empty ajax-item"><p>' . esc_html__('内容空空如也', 'aksrt') . '</p></div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php endif; ?>
</div>
<?php if ($max_pages > 1 && $paging === 'ajax') : ?>
<div class="ajax-pag text-center theme-pagination">
<div class="next-page ajax-next">
<a href="#"
class="ajax-next aksrt-load-more-btn"
data-aksrt-shop-load-more
data-aksrt-ajax-next><?php esc_html_e('加载更多', 'aksrt'); ?></a>
</div>
</div>
<?php elseif ($max_pages > 1) : ?>
<nav class="aksrt-product-archive__pagination" aria-label="<?php esc_attr_e('商品分页', 'aksrt'); ?>">
<?php
echo paginate_links([
'total' => $max_pages,
'current' => $paged,
'prev_text' => '<i class="fas fa-chevron-left"></i>',
'next_text' => '<i class="fas fa-chevron-right"></i>',
'add_args' => array_filter([
'orderby' => $active_orderby,
'order' => $active_orderby === 'price' ? $active_order : null,
]),
]);
?>
</nav>
<?php endif; ?>
</div>
</div>
</main>
<?php
wp_enqueue_script('aksrt-product-archive', get_template_directory_uri() . '/assets/js/product-archive.js', ['aksrt-script'], AKSRT_VERSION, true);
wp_enqueue_script(
'aksrt-product-archive',
get_template_directory_uri() . '/assets/js/product-archive.js',
['aksrt-script', 'aksrt-core-ajax-list'],
AKSRT_VERSION,
true
);
get_footer();