feat(shop): category filter bar + sort/load-more 1:1 UX
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
1 parent
e2587ca3a0
commit
433b7cb3a6
9 files changed
+828
-273
No files matched your search
@@ -34,7 +34,7 @@ $image = (string) ($product['image'] ?? '');
|
||||
$excerpt = (string) ($product['excerpt'] ?? '');
|
||||
$price = (float) ($product['price'] ?? 0);
|
||||
?>
|
||||
<article class="aksrt-product-card">
|
||||
<article class="aksrt-product-card product-item posts-item card ajax-item">
|
||||
<a href="<?php echo esc_url($permalink !== '' ? $permalink : '#'); ?>" class="aksrt-product-card__link">
|
||||
<?php if ($image !== '') : ?>
|
||||
<div class="aksrt-product-card__image">
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
<?php
|
||||
/**
|
||||
* Product category hierarchical filter bar (zibll shop-cat-filter parity).
|
||||
*
|
||||
* Expects in scope:
|
||||
* - $filter array from Shop::build_product_cat_filter()
|
||||
* - $orderby string
|
||||
* - $order string ASC|DESC
|
||||
* - $term array|null
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
$filter = is_array($filter ?? null) ? $filter : [];
|
||||
$orderby = sanitize_key((string) ($orderby ?? ($filter['orderby'] ?? 'date')));
|
||||
$order = strtoupper(sanitize_key((string) ($order ?? ($filter['order'] ?? 'DESC'))));
|
||||
if (!in_array($order, ['ASC', 'DESC'], true)) {
|
||||
$order = 'DESC';
|
||||
}
|
||||
$current_id = (int) ($filter['current_id'] ?? 0);
|
||||
$mode = (string) ($filter['mode'] ?? 'siblings');
|
||||
$siblings = is_array($filter['siblings'] ?? null) ? $filter['siblings'] : [];
|
||||
$children = is_array($filter['children'] ?? null) ? $filter['children'] : [];
|
||||
$child_tabs = is_array($filter['child_tabs'] ?? null) ? $filter['child_tabs'] : [];
|
||||
$parent_url = (string) ($filter['parent_url'] ?? '');
|
||||
$parent_id = (int) ($filter['parent_id'] ?? 0);
|
||||
$term_name = is_array($term ?? null) ? (string) ($term['name'] ?? '') : '';
|
||||
|
||||
$order_labels = [
|
||||
'date' => __('最新', 'aksrt'),
|
||||
'views' => __('最热', 'aksrt'),
|
||||
'favorite_count' => __('收藏', 'aksrt'),
|
||||
'score' => __('评分', 'aksrt'),
|
||||
'sales' => __('销量', 'aksrt'),
|
||||
];
|
||||
|
||||
$base_term_url = !empty($term['url']) ? (string) $term['url'] : '';
|
||||
if ($base_term_url === '' && $current_id > 0) {
|
||||
$link = get_term_link($current_id, 'aksrt_product_cat');
|
||||
$base_term_url = is_wp_error($link) ? '' : (string) $link;
|
||||
}
|
||||
|
||||
$blog = wp_strip_all_tags(get_bloginfo('name'));
|
||||
?>
|
||||
<div class="shop-cat-filter aksrt-shop-cat-filter zib-widget relative" data-aksrt-shop-cat-filter win-ajax-replace="shop-cat-filter">
|
||||
<?php if (!empty($siblings)) : ?>
|
||||
<div class="shop-cat-filter-tab list-inline scroll-x mini-scrollbar tab-nav-theme" data-aksrt-cat-tabs>
|
||||
<?php foreach ($siblings as $sib) :
|
||||
$sid = (int) ($sib['id'] ?? 0);
|
||||
$is_active = ($mode === 'with_children' && $sid === $current_id)
|
||||
|| ($mode === 'parent_siblings' && $sid === $parent_id)
|
||||
|| ($mode === 'siblings' && $sid === $current_id);
|
||||
?>
|
||||
<?php if ($is_active) : ?>
|
||||
<li class="active"><span class="focus-color"><?php echo esc_html((string) ($sib['name'] ?? '')); ?></span></li>
|
||||
<?php else : ?>
|
||||
<li>
|
||||
<a class="ajax-next"
|
||||
ajax-replace="true"
|
||||
route="1"
|
||||
route-title="<?php echo esc_attr((string) ($sib['name'] ?? '') . ' - ' . __('商城', 'aksrt') . ($blog ? ' · ' . $blog : '')); ?>"
|
||||
href="<?php echo esc_url((string) ($sib['url'] ?? '#')); ?>"
|
||||
data-aksrt-shop-term="<?php echo esc_attr((string) $sid); ?>">
|
||||
<?php echo esc_html((string) ($sib['name'] ?? '')); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($mode === 'with_children' && !empty($child_tabs)) : ?>
|
||||
<div class="shop-cat-filter-child" data-aksrt-cat-children>
|
||||
<span class="focus-color"><?php esc_html_e('全部', 'aksrt'); ?></span>
|
||||
<?php foreach ($child_tabs as $child) : ?>
|
||||
<a class="ajax-next"
|
||||
ajax-replace="true"
|
||||
route="1"
|
||||
route-title="<?php echo esc_attr((string) ($child['name'] ?? '') . ' - ' . __('商城', 'aksrt')); ?>"
|
||||
href="<?php echo esc_url((string) ($child['url'] ?? '#')); ?>"
|
||||
data-aksrt-shop-term="<?php echo esc_attr((string) ((int) ($child['id'] ?? 0))); ?>">
|
||||
<?php echo esc_html((string) ($child['name'] ?? '')); ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php elseif ($mode === 'parent_siblings' && !empty($children)) : ?>
|
||||
<div class="shop-cat-filter-child" data-aksrt-cat-children>
|
||||
<?php if ($parent_url !== '') : ?>
|
||||
<a class="ajax-next" ajax-replace="true" route="1" href="<?php echo esc_url($parent_url); ?>" data-aksrt-shop-term="<?php echo esc_attr((string) $parent_id); ?>">
|
||||
<?php esc_html_e('全部', 'aksrt'); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php foreach ($children as $child) :
|
||||
$cid = (int) ($child['id'] ?? 0);
|
||||
?>
|
||||
<?php if ($cid === $current_id) : ?>
|
||||
<span class="focus-color"><?php echo esc_html((string) ($child['name'] ?? '')); ?></span>
|
||||
<?php else : ?>
|
||||
<a class="ajax-next"
|
||||
ajax-replace="true"
|
||||
route="1"
|
||||
route-title="<?php echo esc_attr((string) ($child['name'] ?? '') . ' - ' . __('商城', 'aksrt')); ?>"
|
||||
href="<?php echo esc_url((string) ($child['url'] ?? '#')); ?>"
|
||||
data-aksrt-shop-term="<?php echo esc_attr((string) $cid); ?>">
|
||||
<?php echo esc_html((string) ($child['name'] ?? '')); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="shop-cat-filter-orderby shop-cat-filter-child" win-ajax-replace="orderby" data-aksrt-shop-orderby-bar>
|
||||
<span class="opacity5"><?php esc_html_e('排序', 'aksrt'); ?></span>
|
||||
<?php foreach ($order_labels as $key => $label) :
|
||||
if ($orderby === $key) : ?>
|
||||
<span class="focus-color"><?php echo esc_html($label); ?></span>
|
||||
<?php else :
|
||||
$href = $base_term_url !== '' ? add_query_arg(['orderby' => $key], $base_term_url) : add_query_arg(['orderby' => $key]);
|
||||
?>
|
||||
<a rel="nofollow" ajax-replace="true" class="ajax-next" href="<?php echo esc_url($href); ?>" data-aksrt-shop-orderby="<?php echo esc_attr($key); ?>">
|
||||
<?php echo esc_html($label); ?>
|
||||
</a>
|
||||
<?php endif;
|
||||
endforeach;
|
||||
|
||||
// Price toggle (single 售价 control).
|
||||
if ($orderby === 'price') {
|
||||
$next_order = $order === 'DESC' ? 'ASC' : 'DESC';
|
||||
$icon = $next_order === 'DESC' ? 'up' : 'down';
|
||||
$href = $base_term_url !== ''
|
||||
? add_query_arg(['orderby' => 'price', 'order' => $next_order], $base_term_url)
|
||||
: add_query_arg(['orderby' => 'price', 'order' => $next_order]);
|
||||
?>
|
||||
<a rel="nofollow" ajax-replace="true" class="ajax-next focus-color" href="<?php echo esc_url($href); ?>" data-aksrt-shop-orderby="price" data-aksrt-shop-order="<?php echo esc_attr($next_order); ?>">
|
||||
<?php esc_html_e('售价', 'aksrt'); ?><i class="opacity5 ml3 fa fa-long-arrow-<?php echo esc_attr($icon); ?>"></i>
|
||||
</a>
|
||||
<?php } else {
|
||||
$href = $base_term_url !== ''
|
||||
? add_query_arg(['orderby' => 'price'], $base_term_url)
|
||||
: add_query_arg(['orderby' => 'price']);
|
||||
?>
|
||||
<a rel="nofollow" ajax-replace="true" class="ajax-next" href="<?php echo esc_url($href); ?>" data-aksrt-shop-orderby="price">
|
||||
<?php esc_html_e('售价', 'aksrt'); ?>
|
||||
</a>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user