Add product category tree sidebar to archive and single product pages (v0.1.7)
All checks were successful
Create Release Package / PHP Lint (push) Successful in 1m4s
Create Release Package / PHPUnit Tests (push) Successful in 50s
Create Release Package / Build Release (push) Successful in 58s

Hierarchical category navigation with collapsible sub-levels up to 3 levels
deep, using Bootstrap 5 list-group and collapse components. Sidebar renders
on both archive/shop and single product pages with responsive offcanvas on
mobile. Active category highlighting and ancestor auto-expand for intuitive
navigation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-29 15:19:53 +02:00
parent 5e4af247fa
commit 9860a184cd
9 changed files with 332 additions and 8 deletions

View File

@@ -345,10 +345,34 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
## Version History
Current version: **v0.1.6**
Current version: **v0.1.7**
## Session History
### 2026-03-29 — v0.1.7 Add Product Category Tree Sidebar
**Scope:** Added a hierarchical product category tree sidebar to archive/shop and single product pages, with collapsible sub-levels up to 3 levels deep.
**Files created (2):**
- `templates/global/category-tree.html.twig` — Main category tree template with "All products" link and Bootstrap list-group wrapper
- `templates/global/category-tree-node.html.twig` — Recursive node template with collapsible children, count badges, chevron toggle buttons
**Files modified (5):**
- `functions.php` — Added `wc_bootstrap_get_category_tree()`: builds hierarchical category array using parent-indexed lookup map, with `is_active`/`is_ancestor` flags based on current query; supports up to 3 nesting levels
- `woocommerce/archive-product.php` — Sidebar now renders when categories exist (not just when widgets are configured); category tree rendered above widgets via TwigService
- `woocommerce/single-product.php` — Added responsive sidebar layout (`col-lg-3` + `col-lg-9`) with offcanvas on mobile, matching archive page pattern; wraps product content in grid
- `assets/css/wc-bootstrap.css` — Category tree styles: hover states, active highlighting (primary color), chevron rotation animation, nested list indentation, dark mode compatible via Bootstrap CSS variables
- `style.css` — Version bump 0.1.6 → 0.1.7
**Key decisions:**
- **Programmatic tree over widget:** Category tree renders from `get_terms()` data, not dependent on widgets being configured in WP admin. Widgets still render below the tree if configured.
- **Recursive Twig `{% include %}` for nesting:** `category-tree-node.html.twig` includes itself for child categories, keeping the template DRY and handling arbitrary depth (capped at 3 by PHP).
- **`is_ancestor` auto-expand:** When viewing a subcategory, all ancestor categories auto-expand their collapse panels (`show` class + `aria-expanded="true"`), so the user sees the full path.
- **Shared sidebar pattern:** Both archive and single product pages use the same offcanvas-lg responsive pattern — full sidebar on desktop, slide-out panel on mobile.
### 2026-03-01 — v0.1.6 Add PHPUnit Test Suite
**Scope:** Added PHPUnit test infrastructure with Brain\Monkey for WordPress function mocking, covering both PHP classes (`TemplateOverride`, `WooCommerceExtension`). Added test job to Gitea CI pipeline.