feat: show sub-categories

bigcommerce · Jan 3, 2025 · 4bbfb41 · 4bbfb41
1 parent 4b65f5c
commit 4bbfb41
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/_components/sub-categories.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/_components/sub-categories.tsx
diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts b/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts
@@ -6,8 +6,6 @@ import { graphql, VariablesOf } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { BreadcrumbsFragment } from '~/components/breadcrumbs/fragment';
 
-import { CategoryTreeFragment } from './_components/sub-categories';
-
 const CategoryPageQuery = graphql(
   `
     query CategoryPageQuery($categoryId: Int!) {
@@ -22,11 +20,25 @@ const CategoryPageQuery = graphql(
             metaKeywords
           }
         }
-        ...CategoryTreeFragment
+        categoryTree(rootEntityId: $categoryId) {
+          entityId
+          name
+          path
+          children {
+            entityId
+            name
+            path
+            children {
+              entityId
+              name
+              path
+            }
+          }
+        }
       }
     }
   `,
-  [BreadcrumbsFragment, CategoryTreeFragment],
+  [BreadcrumbsFragment],
 );
 
 type Variables = VariablesOf<typeof CategoryPageQuery>;

diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
@@ -53,6 +53,28 @@ async function getBreadcrumbs(props: Props): Promise<Breadcrumb[]> {
   }));
 }
 
+async function getSubCategoriesFilters(props: Props): Promise<Filter[]> {
+  const { slug } = await props.params;
+  const categoryId = Number(slug);
+  const data = await getCategoryPageData({ categoryId });
+  const t = await getTranslations('FacetedGroup.MobileSideNav');
+
+  const categoryTree = data.categoryTree[0];
+
+  if (categoryTree == null || categoryTree.children.length === 0) return [];
+
+  return [
+    {
+      type: 'link-group',
+      label: t('subCategories'),
+      links: categoryTree.children.map((category) => ({
+        label: category.name,
+        href: category.path,
+      })),
+    },
+  ];
+}
+
 async function getTitle(props: Props): Promise<string | null> {
   const category = await getCategory(props);
 
@@ -143,7 +165,10 @@ async function getFilters(props: Props): Promise<Filter[]> {
     searchParams: { ...searchParams, ...parsedSearchParams },
   });
 
-  return transformedFacets.filter((facet) => facet != null);
+  const filters = transformedFacets.filter((facet) => facet != null);
+  const subCategoriesFilters = await getSubCategoriesFilters(props);
+
+  return [...subCategoriesFilters, ...filters];
 }
 
 async function getSortLabel(): Promise<string> {