Skip to content

feat(search):ES-5892 Introduce displayName and displayKey fields to facets #2690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jfugalde merged 6 commits into from
Dec 5, 2025
Merged

feat(search):ES-5892 Introduce displayName and displayKey fields to facets #2690

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2ca23d
feat(search):ES-5892 Introduce displayName and displayKey fields to f…
jfugalde Nov 11, 2025
44c9f28
feat(search): ES-5892 Add displayName and filterKey fields to facets …
jfugalde Nov 13, 2025
dc7c599
feat(search): Enhance facet filters with displayName and filterKey fi…
jfugalde Nov 24, 2025
0e8a030
test(search):ES-5892 Refactor Facets Tests
jfugalde Dec 3, 2025
41258fb
Merge branch 'canary' into ES-5892
jfugalde Dec 3, 2025
29ce1f6
Merge branch 'canary' into ES-5892
jfugalde Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/facets-displayName.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@bigcommerce/catalyst-core": patch
---

feat(search):ES-5892 Introduce displayName and displayKey fields to facets

- Added `displayName` field to all facet filter types in GraphQL query
- Updated facet transformer to use `displayName` instead of deprecated `name` field
- Added `filterKey` field support for product attribute facets
7 changes: 7 additions & 0 deletions core/app/[locale]/(default)/(faceted)/fetch-faceted-search.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@ const GetProductSearchResultsQuery = graphql(
node {
__typename
name
displayName
isCollapsedByDefault
... on BrandSearchFilter {
displayProductCount
displayName
brands {
pageInfo {
...PaginationFragment
Expand All @@ -60,6 +62,7 @@ const GetProductSearchResultsQuery = graphql(
}
... on CategorySearchFilter {
displayProductCount
displayName
categories {
pageInfo {
...PaginationFragment
Expand Down Expand Up @@ -92,6 +95,8 @@ const GetProductSearchResultsQuery = graphql(
... on ProductAttributeSearchFilter {
displayProductCount
filterName
filterKey
displayName
attributes {
pageInfo {
...PaginationFragment
Expand All @@ -107,6 +112,7 @@ const GetProductSearchResultsQuery = graphql(
}
}
... on RatingSearchFilter {
displayName
ratings {
pageInfo {
...PaginationFragment
Expand All @@ -122,6 +128,7 @@ const GetProductSearchResultsQuery = graphql(
}
}
... on PriceSearchFilter {
displayName
selected {
minPrice
maxPrice
Expand Down
14 changes: 7 additions & 7 deletions core/data-transformers/facets-transformer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
const { filters } = PublicToPrivateParams.parse(searchParams);

return allFacets.map((facet) => {
const refinedFacet = refinedFacets.find((f) => f.name === facet.name);
const refinedFacet = refinedFacets.find((f) => f.displayName === facet.displayName);

if (facet.__typename === 'CategorySearchFilter') {
const refinedCategorySearchFilter =
Expand All @@ -31,7 +31,7 @@
return {
type: 'toggle-group' as const,
paramName: 'categoryIn',
label: facet.name,
label: facet.displayName,
defaultCollapsed: facet.isCollapsedByDefault,
options: facet.categories.map((category) => {
const refinedCategory = refinedCategorySearchFilter?.categories.find(
Expand All @@ -57,7 +57,7 @@
return {
type: 'toggle-group' as const,
paramName: 'brand',
label: facet.name,
label: facet.displayName,
defaultCollapsed: facet.isCollapsedByDefault,
options: facet.brands.map((brand) => {
const refinedBrand = refinedBrandSearchFilter?.brands.find(
Expand All @@ -80,8 +80,8 @@

return {
type: 'toggle-group' as const,
paramName: `attr_${facet.filterName}`,
label: facet.filterName,
paramName: `attr_${facet.filterKey}`,
label: facet.displayName ?? facet.filterName,

Check failure on line 84 in core/data-transformers/facets-transformer.ts

View workflow job for this annotation

GitHub Actions / Lint, Typecheck, and gql.tada 

Unnecessary conditional, expected left-hand side of `??` operator to be possibly null or undefined
defaultCollapsed: facet.isCollapsedByDefault,
options: facet.attributes.map((attribute) => {
const refinedAttribute = refinedProductAttributeSearchFilter?.attributes.find(
Expand Down Expand Up @@ -111,7 +111,7 @@
return {
type: 'rating' as const,
paramName: 'minRating',
label: facet.name,
label: facet.displayName,
disabled: refinedRatingSearchFilter == null && !isSelected,
defaultCollapsed: facet.isCollapsedByDefault,
};
Expand All @@ -126,7 +126,7 @@
type: 'range' as const,
minParamName: 'minPrice',
maxParamName: 'maxPrice',
label: facet.name,
label: facet.displayName,
min: facet.selected?.minPrice ?? undefined,
max: facet.selected?.maxPrice ?? undefined,
disabled: refinedPriceSearchFilter == null && !isSelected,
Expand Down
Loading