User report: product detail page was wrong — section titles are
per-product custom data (CMS wppop_sections migration: Packing &
Delivery / Our Exhibition / Our Certifications / Our Company / FAQ),
not fixed headings; they must drive an anchor tab system like the
CMS [locale]/products/[slug].astro detailTabs.
Data side (both layers, task option 1 + 2):
- theme_pro.product_detail_sections: fields.sections
[{title, content}] JSON is the structured source; legacy sync
output that appended sections as trailing body H2 blocks is
recognized by known/data titles and split out (overview keeps the
rest; same-title blocks dedupe to the structured version; Features
body block drops when fields.features renders it)
- sync_cms_data.build_product: store sections/features as structured
fields JSON, stop appending H2 blocks to the body; stats now count
entries with a sections field
- Specifications table no longer leaks structural JSON field keys
(sections/features/specs/gallery/categories) — scalar spec keys
only
Template side (trade-pro product.html, replaces 12a panel
switching):
- tab sequence is fully data-driven and matches the CMS: Product
Details (always) -> custom sections (data titles) ->
Specifications / Features (shown only when data exists)
- tabs are #anchor links, not panel toggles: all sections render
flat with visible titles (readable and crawlable without JS; native
anchor jump), JS adds smooth scrolling + scrollspy highlight +
tab centering in the horizontal scroll row
- section ids are slug-derived (sec-packing-delivery), duplicate
titles get an index suffix; features grid ports the CMS
detail-feature-row
Tests: test_trade_pro_product_layout_structure rewritten for the
anchor-tab contract — sections via fields, legacy body-H2 fallback,
spec/features conditional tabs, no-sections product showing only
Product Details + Specifications, spec table free of JSON key leaks,
updated pro.css needles. 30 passed; the 1 failure
(test_trade_pro_blocks_visual_bridge) fails identically on the
previous commit (pre-existing, unrelated).
Co-Authored-By: Claude Code <noreply@example.com>
Task 12a: rebuild product detail to precisely match cms [slug].astro - sticky tab nav (muted bar, brand underline, single-row h-scroll) with .sf-tp-panel/.active switching via inline script (no-JS renders all panels flat); Product Details panel renders body HTML as rich-body with cms table rules (full-width, hairline borders, zebra, inline width/height override, cell div scrub); Specifications panel shows clean spec-table with two key/value pairs per row when specs exist; panel titles get the cms 3px brand underline. Breakpoints mapped cms 900/960 -> platform 900, cms 620 -> 620; product responsive rules consolidated in the 12a block and removed from the shared responsive block. Product title keeps h1 tag at cms h2 scale (2xl) per platform single-h1 contract. Note: most product.html and test edits were swept into concurrent commit 85e6d4a; this commit carries the pro.css 12a block and the h1 refinements.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Rewrite pages/product.html from the 3-row skeleton to the cms
[slug].astro design: breadcrumb -> gallery (main + scrolling thumbs,
reusing the platform pro.js data-gallery-image hooks, zero new JS) +
summary column (eyebrow/h1/lead/brand+model/actions) -> flattened
Product details panel -> Specifications table from fields (hidden when
empty) -> related products on the home card grid -> inquiry section
(left contact info, right external form only when form_endpoint is
configured, CTA to /contact/ otherwise).
Component CSS lands in pro.css under .sf-theme-trade-pro with
900/620 breakpoints; stale .pro-specs tint rules removed (other
themes keep their pro-base skeleton); cross-theme skeleton assertion
in test_theme_pro_v3.py now excludes trade-pro; new
test_trade_pro_product_layout_structure covers the build output.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Task 9 (new design, not a cms port): _professional_components.html gains
an icon(name, size, cls) macro — 10 inline line-style glyphs (arrow-right,
arrow-left, chevron-down, check, phone, mail, location, download, search,
quote), 24x24 viewBox, stroke=currentColor, stroke-width 1.5, round
caps/joins, decorative aria-hidden + focusable=false, default size
var(--sf-tp-icon-size-md, 20px), unknown names fall back to arrow-right.
Every glyph is a single <path> so the d attribute needs no |safe.
All bare text arrows (->, <-, ↗, ▾, ⌕) in the macro library, pro.html,
site.html and pages/* are replaced with macro calls (site.html keeps a
self-contained copy of the arrow glyph because its rendering envs cannot
import the macro library); the filters macro search box gains an inline
search icon; footer links gain small arrows. theme.css adds .sf-tp-icon
alignment, in-button icon spacing, and search-box icon positioning.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Fifth built-in theme: English-first international B2B skeleton registered
via manifest discovery, builds real sites end-to-end. pro.html derives
from industrial with lang=en, href-set value-comparison English fallback
nav (header + footer), sf-tp-* button classes and hard-coded #0b3d91
theme-color until the map entry lands. pages/ ships all 14 kinds; macro
library is an English passthrough copy pending the Phase 3 cms port.
Co-Authored-By: Claude Code <noreply@anthropic.com>
浅念