feat(cms-base-layer): support filters within search context

[Maciek Kucmus (mkucmus)]

closes: #2250

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontends-starter-template-extended	Ready	Preview, Comment	Jun 29, 2026 11:53am

[Copilot]

Pull request overview

Adds reusable listing filters to the product search page by wiring the shared SwProductListingFilters* components to the useProductSearchListing() composable when used in a search context, and by updating the starter template search page to SSR-fetch and hydrate a listing suitable for filter rendering.

Changes:

• Updated the starter template /search page to SSR-fetch product search listings, render the shared filter sidebar, and hydrate the shared listing state.
• Made SwProductListingFilters and SwProductListingFiltersHorizontal switch between useCategoryListing() and useProductSearchListing() based on a listingType prop and keep the search term in criteria/URL.
• Minor docs formatting adjustments + added a changeset for the cms-base-layer minor bump.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
templates/vue-starter-template/app/pages/search.vue	SSR-driven search listing + adds filter sidebar and listing hydration for search context
packages/cms-base-layer/app/components/SwProductListingFiltersHorizontal.vue	Allows filters to drive useProductSearchListing() and preserve search query in URL
packages/cms-base-layer/app/components/SwProductListingFilters.vue	Same as above for vertical filters component
apps/docs/src/resources/integrations/cms/sanity.md	Formatting-only doc adjustments
.changeset/tidy-falcons-glow.md	Declares minor release and describes new listingType behavior

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Patryk Tomczyk (patzick)]

Review summary from local testing:

I found one behavioral issue worth fixing before merge:

Filter UI state can drift from the route/listing after browser navigation or another query-only route change.

Both SwProductListingFilters.vue and SwProductListingFiltersHorizontal.vue initialize sidebarSelectedFilters from route.query once during setup, but they do not resync when route.query changes while the component remains mounted. The new search page is route-driven via useAsyncData(..., { watch: [() => route.query] }), so product results update correctly from the URL, but the filter controls can still show stale selected state.

Relevant spots:

• packages/cms-base-layer/app/components/SwProductListingFilters.vue: the setup-time loop over route.query around the sidebarSelectedFilters initialization.
• packages/cms-base-layer/app/components/SwProductListingFiltersHorizontal.vue: same setup-time route parsing.
• templates/vue-starter-template/app/pages/search.vue: search results are refetched from the current query, so this creates a UI/listing mismatch rather than a missing fetch.

Example reproduction:

1. Open /search?search=shirt.
2. Select a manufacturer filter. URL and results update, e.g. /search?manufacturer=...&search=shirt.
3. Press the browser Back button.
4. URL/results return to /search?search=shirt, but the filter checkbox/chip/reset state can still reflect the removed manufacturer because the component-local Sets were not rebuilt from the new query.

A route-query watcher or route-derived selected filter state would keep the controls, active chips, reset button, and listing results aligned.

Checks I ran locally:

• pnpm --filter @shopware/cms-base-layer test -- app/utils/routeQuery.test.ts
• pnpm --filter @shopware/cms-base-layer typecheck
• pnpm --filter @shopware/cms-base-layer lint
• pnpm --filter vue-starter-template typecheck
• pnpm --filter vue-starter-template lint

All passed.

[Patryk Tomczyk (patzick)]

Re-reviewed after the latest updates. The previous route/query filter-state drift is addressed by the new selected-filter state utility and tests. Local targeted tests, lint, and typechecks passed.