Add collection count display to category titles in index and categor…

…ies routes - Import `parseGid` and `useFilterCounts` hooks to fetch and display the count of subcollections in category titles. - Query `GET_COLLECTION_FILTERS` to obtain filter counts for root collections. - Display the count next to the category titles in `FeaturedCollections` components on both index and categories pages.
jamalsoueidan · Jul 14, 2024 · 66eb06d · 66eb06d
1 parent 4c61a43
commit 66eb06d
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 39 deletions.
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -24,11 +24,15 @@ import {H2} from '~/components/titles/H2';
 
 import {ProfessionButton} from '~/components/ProfessionButton';
 
-import {getPaginationVariables} from '@shopify/hydrogen';
+import {getPaginationVariables, parseGid} from '@shopify/hydrogen';
 import {useTranslation} from 'react-i18next';
 import {Headless} from '~/components/blocks/Headless';
+import {useFilterCounts} from '~/hooks/useFilterCounts';
 import {getTags} from '~/lib/tags';
-import {GET_CATEGORY_QUERY} from './categories_.$handle';
+import {
+  GET_CATEGORY_QUERY,
+  GET_COLLECTION_FILTERS,
+} from './categories_.$handle';
 import {PAGE_QUERY} from './pages.$handle';
 import {UserCard, USERS_QUERY} from './users._index';
 
@@ -66,6 +70,18 @@ export async function loader({context, request}: LoaderFunctionArgs) {
     },
   );
 
+  // we are getting rootCollectionFilters to figure out the total count of the subcollections
+  const {collection: rootCollectionFilters} = await context.storefront.query(
+    GET_COLLECTION_FILTERS,
+    {
+      variables: {
+        handle: 'alle-behandlinger',
+        language: 'DA',
+      },
+      cache: context.storefront.CacheLong(),
+    },
+  );
+
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
@@ -92,6 +108,7 @@ export async function loader({context, request}: LoaderFunctionArgs) {
     page,
     tags,
     rootCollection,
+    rootCollectionFilters: rootCollectionFilters?.products.filters,
   });
 }
 
@@ -163,7 +180,12 @@ function Header() {
 function FeaturedCollections() {
   const theme = useMantineTheme();
   const {t} = useTranslation(['index']);
-  const {rootCollection} = useLoaderData<typeof loader>();
+  const {rootCollection, rootCollectionFilters} =
+    useLoaderData<typeof loader>();
+  const collectionCount = useFilterCounts(
+    rootCollectionFilters as any,
+    'collectionid',
+  );
 
   return (
     <Box
@@ -187,7 +209,8 @@ function FeaturedCollections() {
                   >
                     <Flex justify="space-between">
                       <Title order={2} size="lg">
-                        {col.title}
+                        {col.title} ({collectionCount[parseGid(col.id).id] || 0}
+                        )
                       </Title>
                       <IconArrowRight />
                     </Flex>
@@ -203,7 +226,8 @@ function FeaturedCollections() {
                         to={`/categories/${col.handle}?collection=${nesCol.handle}`}
                       >
                         <Title order={2} size="lg">
-                          {nesCol.title}
+                          {nesCol.title} (
+                          {collectionCount[parseGid(nesCol.id).id] || 0})
                         </Title>
                       </UnstyledButton>
                     ))}

diff --git a/app/routes/categories.tsx b/app/routes/categories.tsx
@@ -11,12 +11,17 @@ import {
   UnstyledButton,
 } from '@mantine/core';
 import {Link, useLoaderData} from '@remix-run/react';
+import {parseGid} from '@shopify/hydrogen';
 import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {IconArrowRight} from '@tabler/icons-react';
 import {useTranslation} from 'react-i18next';
 import {Headless} from '~/components/blocks/Headless';
 import {VisualTeaser} from '~/components/blocks/VisualTeaser';
-import {GET_CATEGORY_QUERY} from './categories_.$handle';
+import {useFilterCounts} from '~/hooks/useFilterCounts';
+import {
+  GET_CATEGORY_QUERY,
+  GET_COLLECTION_FILTERS,
+} from './categories_.$handle';
 import {PAGE_QUERY} from './pages.$handle';
 
 export const handle: Handle = {
@@ -41,7 +46,23 @@ export async function loader({context, params, request}: LoaderFunctionArgs) {
     cache: context.storefront.CacheLong(),
   });
 
-  return json({page, rootCollection});
+  // we are getting rootCollectionFilters to figure out the total count of the subcollections
+  const {collection: rootCollectionFilters} = await context.storefront.query(
+    GET_COLLECTION_FILTERS,
+    {
+      variables: {
+        handle: 'alle-behandlinger',
+        language: 'DA',
+      },
+      cache: context.storefront.CacheLong(),
+    },
+  );
+
+  return json({
+    page,
+    rootCollection,
+    rootCollectionFilters: rootCollectionFilters?.products.filters || [],
+  });
 }
 
 export default function Collections() {
@@ -58,7 +79,12 @@ export default function Collections() {
 
 function FeaturedCollections() {
   const {t} = useTranslation(['index']);
-  const {rootCollection} = useLoaderData<typeof loader>();
+  const {rootCollection, rootCollectionFilters} =
+    useLoaderData<typeof loader>();
+  const collectionCount = useFilterCounts(
+    rootCollectionFilters as any,
+    'collectionid',
+  );
 
   return (
     <Box py={{base: rem(20), sm: rem(40)}}>
@@ -73,7 +99,7 @@ function FeaturedCollections() {
                 >
                   <Flex justify="space-between">
                     <Title order={2} size="lg">
-                      {col.title}
+                      {col.title} ({collectionCount[parseGid(col.id).id] || 0})
                     </Title>
                     <IconArrowRight />
                   </Flex>
@@ -89,7 +115,8 @@ function FeaturedCollections() {
                       to={`/categories/${col.handle}?collection=${nesCol.handle}`}
                     >
                       <Title order={2} size="lg">
-                        {nesCol.title}
+                        {nesCol.title} (
+                        {collectionCount[parseGid(nesCol.id).id] || 0})
                       </Title>
                     </UnstyledButton>
                   ))}

diff --git a/app/routes/categories_.$handle.tsx b/app/routes/categories_.$handle.tsx
@@ -220,37 +220,39 @@ function Header() {
         align="center"
         gap="md"
       >
-        {!!rootCollection.children?.references?.nodes.length && (
-          <Radio.Group
-            value={
-              searchParams.get('collection')
-                ? searchParams.get('collection')
-                : ''
-            }
-            onChange={(collection: string) =>
-              setSearchParams({collection}, {preventScrollReset: true})
-            }
-          >
-            <Group gap="xs" wrap="wrap">
-              <Radio
-                label={`Alle (${
-                  collectionCount[parseGid(rootCollection.id).id]
-                })`}
-                value=""
-              />
-              {rootCollection.children?.references?.nodes.map((col) => (
+        <Flex flex={1}>
+          {!!rootCollection.children?.references?.nodes.length && (
+            <Radio.Group
+              value={
+                searchParams.get('collection')
+                  ? searchParams.get('collection')
+                  : ''
+              }
+              onChange={(collection: string) =>
+                setSearchParams({collection}, {preventScrollReset: true})
+              }
+            >
+              <Group gap="xs" wrap="wrap">
                 <Radio
-                  key={col.id}
-                  value={col.handle}
-                  label={`${col.title} (${
-                    collectionCount[parseGid(col.id).id] || 0
+                  label={`Alle (${
+                    collectionCount[parseGid(rootCollection.id).id] || 0
                   })`}
+                  value=""
                 />
-              ))}
-            </Group>
-          </Radio.Group>
-        )}
-        <Group gap="xs">
+                {rootCollection.children?.references?.nodes.map((col) => (
+                  <Radio
+                    key={col.id}
+                    value={col.handle}
+                    label={`${col.title} (${
+                      collectionCount[parseGid(col.id).id] || 0
+                    })`}
+                  />
+                ))}
+              </Group>
+            </Radio.Group>
+          )}
+        </Flex>
+        <Group gap="xs" flex={0.6} align="center" justify="flex-end">
           <Select
             value={
               (searchParams.get('sort') as ProductSortKeys) || 'CREATED_AT'
@@ -531,7 +533,7 @@ export const GET_CATEGORY_QUERY = `#graphql
   }
 ` as const;
 
-const GET_COLLECTION_FILTERS = `#graphql
+export const GET_COLLECTION_FILTERS = `#graphql
   ${USER_COLLECTION_FILTER}
   query GetCollectionFilters(
     $handle: String!