← War Dungeon

War Dungeon — Search Results Build Brief

BBWD28 Approved Build Brief War Dungeon

Page intent

The War Dungeon Search Results page is the response surface to a visitor’s query. Three visitor jobs: see what matched the query (products, categories, content), refine if the matches aren’t right (filters, sort, edit the query), navigate to a specific result or pivot to a related path (browse the range, ask the workshop). The page is utility-led — atmosphere supports the visitor’s hunt without ornament cluttering the scannability of the results. Two states the page can be in: populated (results found) and empty (no results, with constructive next steps). This brief authors both, and the mockup renders the populated state as the primary visit.

Subject content (for the mockup)

Render the page as the response to query space marines. Search query header shows “Results for ‘space marines'” with a result count (“24 products, 3 categories, 2 guides”) and a small “Clear” link to start a new search. Filters sidebar on the left with the standard archive filters (Game, Faction, Format, Price range, Stock). Sort row across the top of the results column (“Sort by: Relevance / Price / Name / Newest”; 24 products visible). Product grid at the archive-layout default density (3-up at desktop, per the catalogue block) with 24 cards from the Space Marines range (Combat Patrol, Codex, Primaris kits, Terminators, Dreadnought, Captains, etc.). Category match strip beneath the grid: 3 top-level matches (Warhammer 40K → Space Marines, Warhammer 40K → Combat Patrols, Hobby Supplies → Citadel Paints). Content match strip: 2 How-To guides (“How to paint Ultramarines blue”, “Starting your first Space Marines army”). Pagination at the foot (page 1 of 3). Empty-state block is described and catalogued but not rendered as the visible mockup — show the populated state.

Mandatory structure (top to bottom)

  1. Pre-header announcement bar — REUSE announcement-bar.
  2. Global header — REUSE site-header.
  3. Breadcrumbs — REUSE breadcrumbs. Home / Search results.
  4. Search query header — Compact band beneath the breadcrumbs. Dark cowboy inverted with gear-pattern at 10%. LEFT: eyebrow (“Search”), title in modesto-condensed display (“Results for ‘space marines'”), small result-count subtitle in palatino-linotype (“24 products · 3 categories · 2 guides”). RIGHT: a refined-search input pre-populated with “space marines” + a “Clear” text-link beneath. NEW block search-query-header — distinct from content-page-hero (this carries an interactive input + result count, content-page-hero is brand-statement; distinct from hub-header per the hero-distinct rule).
  5. Section divider — REUSE gear-divider.
  6. Archive layout wrapper — REUSE archive-layout verbatim from the catalogue (originally authored on MWD15 shop archive). This block defines the entire paired-layout geometry: fixed 300px filter sidebar LEFT (sticky to viewport top, auto-hides at ≤880px in favour of a mobile filter button) + product grid slot RIGHT (3-up default at desktop, 2-up at ≤1080px, 1-up at ≤640px). DO NOT author a new wrapper class — this is the canonical search/archive paired layout for the brand and must be inherited verbatim from the catalogue. The Search Results page is structurally a shop archive variant; the wrapper geometry is the same.
    • LEFT slot of archive-layout: Filters sidebar. REUSE filter-sidebar verbatim from the catalogue (from MWD15). Five filter groups: Game (40K / AoS / TOW), Faction (Space Marines, Orks, Chaos, etc.), Format (Combat Patrol / Codex / Single Kit / Bundle), Price range (slider), Stock (In stock / Pre-order).
    • RIGHT slot of archive-layout: Results column. Top: REUSE archive-toolbar verbatim from MWD15 catalogue. Then: 24 archive-product-card tiles — REUSE archive-product-card verbatim from the catalogue (extended-density tile, not the smaller generic product-card). The grid is whatever archive-layout‘s right slot defines (3-up default at desktop) — do not override to 4-up.
  7. Section divider — REUSE gear-divider.
  8. Category match strip — Compact 3-up grid below the product grid. Each cell: stamped-roundel icon + category title + small breadcrumb path. REUSE faq-teaser-strip from catalogue (the 3-up card pattern reuses verbatim for this related-listings job; content slots differ).
  9. Content match strip — Compact 2-up grid: “Related guides”. Each cell: eyebrow + guide title + lede + “Read the guide →” link. REUSE existing pattern from catalogue if a 2-up content-card matches; otherwise NEW block content-match-strip.
  10. Pagination — Pagination band at the foot. REUSE pagination-band from the shop-archive catalogue (page 1 of 3, prev disabled, page indicators, next active).
  11. Trust strip — REUSE trust-strip.
  12. Global footer — REUSE site-footer.

Empty state — second block authored for catalogue

Author NEW block search-empty-state in the manifest. Not rendered on the visible mockup, but catalogued for Phase 2 when results = 0. Shape: dark cowboy inverted band, stamped roundel large at top, “No results for ‘{query}'” title, palatino-linotype copy (“The trail’s quiet here. Try a different word, or saddle up with one of these starting points:”), then a 4-up grid of suggested next steps reusing dual-cta-band shape (Browse the Range / Browse by Game / Read the How-To Guides / Write to the Workshop). The empty-state block is the page’s recovery surface.

Block reuse intent (conservative — per locked brand rule)

Reused: announcement-bar, site-header, breadcrumbs, gear-divider, the archive’s archive-layout (wrapper geometry) + filter-sidebar + archive-toolbar + archive-product-card + pagination-band (all from MWD15 catalogue), faq-teaser-strip (from MWD31 catalogue, reused verbatim as the category-match strip), trust-strip, site-footer, plus primitives (eyebrow-stamp, section-head, btn, stamped-roundel).

NEW blocks expected (2, possibly 3):

  • search-query-header — compact page-introductory band with interactive input + result count. Distinct from content-page-hero (carries the input + count; different rhetorical job).
  • search-empty-state — recovery surface for zero-result queries. Catalogued but not rendered on this mockup.
  • content-match-strip — 2-up content-card strip for “Related guides”. Author NEW only if no existing catalogue block fits the structural purpose; reuse if one does.

Content principles

  • Scannability is the load-bearing decision. Result grid stays clean and dense. Filter sidebar is sticky so refinement is always one click away. Sort + view-mode controls are above the grid where the visitor expects them.
  • Three result types ranked by intent. Products first (the visitor’s likely target), then category matches (alternative browse paths), then content matches (educational pivots). The order isn’t decorative; it matches typical search intent.
  • Refine without leaving the page. The search query header has an inline input so the visitor can re-query without navigating back. Sidebar filters update results in-place.
  • Empty state is constructive, not apologetic. “The trail’s quiet here” carries the voice without admitting defeat; the 4 next-step CTAs give the visitor concrete onward paths.
  • Brand register stays consistent. Even on a utility surface, dark cowboy header + gear dividers + brass roundels stay in play. The visitor knows they’re on a War Dungeon page, not a commodity search results page.

Voice notes

Old-West shopkeeper voice at utility register. Search query header reads functional (“Results for ‘…'”, “24 products · 3 categories · 2 guides”, “Clear”). Sort dropdown labels stay plain (“Sort by: Relevance / Price / Name / Newest”). Category match strip headers in voice (“Where else this fits”). Content match strip header in voice (“Wisdom from the workshop”). Empty-state lede in full voice (“The trail’s quiet here. Try a different word, or saddle up with one of these starting points:”). Pagination labels stay plain (“Previous · 1 · 2 · 3 · Next”).

Render direction

Locked methodology: Maximalist Industrial at the Frontier styleguide (SWD1). Canonical references MWD5 / MWD9 / MWD14 / MWD15 / MWD16 / MWD17 / MWD21 / MWD22 / MWD23 / MWD24 / MWD25 / MWD26 / MWD27 / MWD28 / MWD29 / MWD30 / MWD31 / MWD32. The brand’s 99-block reuse catalogue auto-supplies methodology-consistent chrome and the full archive pattern. Author NEW under the same methodology for the search-specific gaps. MWD15 (shop archive) is the closest structural reference for the filters-sidebar + archive-toolbar + product-card + pagination-band patterns.

Hero-distinct rule (locked 2026-06-07): search-query-header is its own block — distinct from content-page-hero (no input or result count there), hub-header / hub-header-with-cta (browse/contribute modes), transaction-step-header (funnel mode), dashboard-header (account mode).

Desktop composition (locked brand rule, 2026-06-07)

War Dungeon is desktop-first. Mockups render at 1440px first; mobile is graceful collapse. Paired row: filters ⅓ + results ⅔, both visible together at desktop. Result grid is 4-up at desktop. Category match strip is 3-up; content match strip is 2-up. Pagination is full-width at the foot. Mobile collapse: 1080 (results drop to 3-up), 980 (filters collapse to a top accordion, results to 2-up), 880 (content match 1-up), 720 (category match 1-up, sort row stacks), 640 (results 1-up), 480 (panel widths simplify, ornament stays).

Technical constraints

  • Page max-width 1440px. Base font size 20px.
  • Search query header input submits the new query via standard form GET to /?s={query}.
  • Filters sidebar updates results in-place via AJAX (no full page reload); URL parameters reflect the filter state for shareability.
  • Sort dropdown updates results in-place via AJAX.
  • Pagination is server-driven (no infinite scroll) — predictable URLs for sharing and SEO.
  • Empty-state block renders when WordPress reports zero results across all post types; visible in place of the populated grid + strips.
  • The 4 next-step CTAs in the empty state link to /shop, /shop?orderby=game, /how-to-guides, /contact respectively.
  • Result counts respect post-type visibility (excludes drafts, private posts, hidden products).