You've already forked wc-bootstrap
magdev
1e7f82615b
Switch from custom link classes to Bootstrap's native list-group-item-action pattern. Replace bold primary-colored active background with subtle tertiary background, left accent border, and semibold text. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
48 lines
1.9 KiB
Twig
48 lines
1.9 KiB
Twig
{#
|
|
# Single Category Tree Node (recursive)
|
|
#
|
|
# Renders one category as a list-group-item-action link with optional
|
|
# collapsible nested list for children. Included recursively.
|
|
#
|
|
# Expected context:
|
|
# node - Category node from wc_bootstrap_get_category_tree()
|
|
# level - Current nesting depth (1-3)
|
|
#
|
|
# @package WcBootstrap
|
|
# @since 0.1.7
|
|
#}
|
|
|
|
{% set has_children = node.children is not empty %}
|
|
{% set is_open = node.is_active or node.is_ancestor %}
|
|
|
|
<div class="category-tree-item">
|
|
<div class="d-flex align-items-center">
|
|
<a href="{{ node.url }}"
|
|
class="list-group-item list-group-item-action border-0 py-1 flex-grow-1{% if node.is_active %} active{% endif %}"
|
|
style="padding-left: {{ 0.5 + (level - 1) * 1 }}rem;"
|
|
{% if node.is_active %}aria-current="page"{% endif %}>
|
|
{{ node.name }}
|
|
<small class="text-body-secondary ms-1">({{ node.count }})</small>
|
|
</a>
|
|
{% if has_children %}
|
|
<button class="btn btn-sm btn-link text-body-secondary p-0 px-2 category-tree-toggle"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#cat-{{ node.term_id }}"
|
|
aria-expanded="{{ is_open ? 'true' : 'false' }}"
|
|
aria-controls="cat-{{ node.term_id }}"
|
|
aria-label="{{ __('Toggle subcategories', 'wc-bootstrap') }}">
|
|
<i class="bi bi-chevron-down small" aria-hidden="true"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if has_children %}
|
|
<div class="collapse{{ is_open ? ' show' : '' }}" id="cat-{{ node.term_id }}">
|
|
{% for child in node.children %}
|
|
{% include 'global/category-tree-node.html.twig' with { node: child, level: level + 1 } only %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|