Browse Source

feat: 更新分类组件样式和逻辑,支持叶子节点的交互

master
peijunlei 3 weeks ago
parent
commit
57e13a496d
  1. 4
      public/themes/dist_static/static/css/category.css
  2. 3
      public/themes/dist_static/static/js/category.js
  3. 65
      public/themes/website/1/zh/demo/category.html

4
public/themes/dist_static/static/css/category.css

@ -59,7 +59,6 @@
list-style: none;
}
.c-sidebar__item.is-active .c-sidebar__trigger {
padding: 2rem 0;
color: var(--color-primary);
}
.c-sidebar__item.is-active .c-sidebar__subs {
@ -118,6 +117,9 @@
transform: rotate(-90deg);
color: var(--color-primary);
}
.c-sidebar__item.is-leaf .c-sidebar__trigger {
cursor: pointer;
}
.c-sidebar__subs {
display: none;
margin: 0;

3
public/themes/dist_static/static/js/category.js

@ -105,7 +105,8 @@ function bindEvents(state) {
syncUrl(state);
} else {
const id = trigger.dataset.categoryId;
if (state.expandedId === id) state.expandedId = "";
const isLeaf = !!trigger.closest(".c-sidebar__item.is-leaf");
if (!isLeaf && state.expandedId === id) state.expandedId = "";
else {
state.expandedId = id;
state.categoryId = id;

65
public/themes/website/1/zh/demo/category.html

@ -88,30 +88,40 @@ $current_cate_id = $current_cate['id'] ?? '';
<div class="c-layout">
<aside class="c-sidebar" aria-label="产品分类" data-lenis-prevent>
<ul class="c-sidebar__list" data-category-nav>
<!-- 获取所有分类 -->
<!-- 获取所有一级分类 -->
{hcTaglib:subcategory pid="333" item="vo" sort="" key="key_top"}
{php}
$sub_cate_id = $vo['id']; // 获取子分类的ID
$need_show_sub_content = $vo['need_show_sub_content'] ?? 0; //是否需要展示此分类下的内容列表0=不展示,1=展示
$sub_cate_id = $vo['id'];
$need_show_sub_content = (int)($vo['need_show_sub_content'] ?? 0);
{/php}
<li class="c-sidebar__item {if $key_top==1}is-active{/if}" data-category-item="product-control-{$vo.id}">
{hcTaglib:subcategory pid="$sub_cate_id" onlyData="1"}
{/hcTaglib:subcategory}
{php}
$level2_list = $hc_subcategory ?? [];
$has_level2 = !empty($level2_list);
{/php}
<li class="c-sidebar__item {if $key_top==1}is-active{/if}{if !$has_level2} is-leaf{/if}" data-category-item="product-control-{$vo.id}">
<button type="button" class="c-sidebar__trigger" data-category-id="product-control-{$vo.id}" data-category-name="{$vo.title}" aria-expanded="{if $key_top==1}true{else /}false{/if}">
<span>{$vo.title}</span>
{if $has_level2}
<span class="c-sidebar__chevron" aria-hidden="true">
<svg viewBox="-1 -1 8.59082 13.0605" xmlns="http://www.w3.org/2000/svg" fill="none">
<path d="M0 4.12464e-05L5 5.00004L10 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0,-1,1,0,0.530273,10.5303)" />
</svg>
</span>
{/if}
</button>
{if $has_level2}
<ul class="c-sidebar__subs">
{hcTaglib:subcategory pid="$sub_cate_id" item="vo_sub" sort="" key="key_sub"}
{volist name="level2_list" id="vo_sub" key="key_sub"}
<li>
<button type="button" class="c-sidebar__sub" data-category-id="product-control-{$vo.id}" data-sub-id="product-plc-{$vo_sub.id}">{$vo_sub.title}</button>
</li>
{/hcTaglib:subcategory}
{/volist}
</ul>
{/if}
</li>
{/hcTaglib:subcategory}
@ -121,18 +131,22 @@ $current_cate_id = $current_cate['id'] ?? '';
<div class="c-main">
{hcTaglib:subcategory pid="333" item="vo" sort="" key="key_top"}
{php}
$sub_cate_id = $vo['id']; // 获取子分类的ID
// var_dump($sub_cate_id);exit;
// $need_show_sub_content = $vo['need_show_sub_content'] ?? 0; //是否需要展示此分类下的内容列表0=不展示,1=展示
$sub_cate_id = $vo['id'];
$need_show_sub_content = (int)($vo['need_show_sub_content'] ?? 0);
{/php}
{hcTaglib:subcategory pid="$sub_cate_id" onlyData="1"}
{/hcTaglib:subcategory}
{php}
$level2_list = $hc_subcategory ?? [];
$has_level2 = !empty($level2_list);
{/php}
<div class="c-panel" data-category-panel="product-control-{$vo.id}" {if $key_top!=1}hidden{/if}>
<div class="c-grid" data-product-grid>
{hcTaglib:subcategory pid="$sub_cate_id" item="vo_sub" sort="" key="key_sub"}
<!-- 获取当前二级分类的所有产品,统一放进同一个 grid -->
{if $has_level2}
{volist name="level2_list" id="vo_sub" key="key_sub"}
{hcTaglib:contentPage2 cid="$vo_sub.id" mainField="id,category_id,title,sub_title,thumbnail" subField="" name="hc_content" limit="100" item="content_sub22" sort="sort asc"}
{/hcTaglib:contentPage2}
{volist name="hc_content" id="vo_content"}
<article class="s-product-card" data-sub="product-plc-{$vo_sub.id}">
<a class="s-product-card__link" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
@ -153,7 +167,32 @@ $current_cate_id = $current_cate['id'] ?? '';
</a>
</article>
{/volist}
{/hcTaglib:subcategory}
{/volist}
{else /}
<!-- 仅一级分类:直接按一级 id 取产品 -->
{hcTaglib:contentPage2 cid="$vo.id" mainField="id,category_id,title,sub_title,thumbnail" subField="" name="hc_content" limit="100" item="content_sub22" sort="sort asc"}
{/hcTaglib:contentPage2}
{volist name="hc_content" id="vo_content"}
<article class="s-product-card">
<a class="s-product-card__link" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
<div class="s-product-card__media">
<img src="{$vo_content['thumbnail']['url'] ?? ''}" alt="{$vo_content.title}" loading="lazy" />
</div>
<div class="s-product-card__foot">
<h3 class="s-product-card__name">{$vo_content.title}</h3>
<span class="s-product-card__arrow" aria-hidden="true">
<img
src="data:image/svg+xml,%3csvg%20viewBox='0%200%2012.2529%2011.314'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='12.252930'%20height='11.313965'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='合并'%20d='M5.18202%201.41422L6.59622%200L12.2531%205.65686L12.2529%205.65702L10.8389%207.07108L6.59608%2011.3139L5.18186%209.89966L8.4245%206.65702L-0%206.65702L0%204.657L8.42482%204.65702L5.18202%201.41422Z'%20fill='rgb(239,67,53)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e"
alt=""
width="12"
height="11"
/>
</span>
</div>
</a>
</article>
{/volist}
{/if}
</div>
<div class="c-empty" data-product-empty hidden>

Loading…
Cancel
Save