update css vars

hooks/use-shopify-collections.ts

@@ -26,10 +26,23 @@ export interface CollectionWithProducts extends Collection {
   products: Product[];
 }
 
+export type CollectionSortKey = 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+
+export interface ProductFilter {
+  available?: boolean;
+  price?: { min?: number; max?: number };
+  productType?: string;
+  productVendor?: string;
+  tag?: string;
+  variantOption?: { name: string; value: string };
+  productMetafield?: { namespace: string; key: string; value: string };
+}
+
 interface UseCollectionProductsOptions {
   first?: number;
-  sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+  sortKey?: CollectionSortKey;
   reverse?: boolean;
+  filters?: ProductFilter[];
 }
 
 // Fetch all collections
@@ -45,19 +58,24 @@ export async function getCollections(first = 50): Promise<Collection[]> {
 // Fetch products in a collection by handle
 export async function getCollectionProducts(
   handle: string,
-  { first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
-): Promise<CollectionWithProducts | null> {
+  { first = 50, sortKey = 'BEST_SELLING', reverse = false, filters }: UseCollectionProductsOptions = {},
+  after?: string | null,
+): Promise<{ collection: CollectionWithProducts; hasNextPage: boolean; endCursor: string | null } | null> {
   const response = await shopifyFetch({
     query: GET_COLLECTION_PRODUCTS_QUERY,
-    variables: { handle, first, sortKey, reverse },
+    variables: { handle, first, sortKey, reverse, filters: filters?.length ? filters : undefined, after: after ?? null },
   });
 
   const collection = response.data.collection;
   if (!collection) return null;
 
   return {
-    ...collection,
-    products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+    collection: {
+      ...collection,
+      products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+    },
+    hasNextPage: collection.products.pageInfo.hasNextPage,
+    endCursor: collection.products.pageInfo.endCursor,
   };
 }
 
@@ -96,6 +114,10 @@ export function useCollectionProducts(
   const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [cursor, setCursor] = useState<string | null>(null);
+
+  const filtersKey = JSON.stringify(options.filters ?? []);
 
   const fetchCollection = useCallback(async () => {
     if (!handle) {
@@ -106,10 +128,14 @@ export function useCollectionProducts(
     try {
       setLoading(true);
       setError(null);
-      const data = await getCollectionProducts(handle, options);
-      setCollection(data);
-      if (!data) {
+      const result = await getCollectionProducts(handle, options);
+      if (!result) {
+        setCollection(null);
         setError('Collection not found');
+      } else {
+        setCollection(result.collection);
+        setHasNextPage(result.hasNextPage);
+        setCursor(result.endCursor);
       }
     } catch (err) {
       console.error('Error fetching collection products:', err);
@@ -117,11 +143,32 @@ export function useCollectionProducts(
     } finally {
       setLoading(false);
     }
-  }, [handle, options.first, options.sortKey, options.reverse]);
+  }, [handle, options.first, options.sortKey, options.reverse, filtersKey]);
 
   useEffect(() => {
     fetchCollection();
   }, [fetchCollection]);
 
-  return { collection, loading, error, refetch: fetchCollection };
+  const fetchMore = useCallback(async () => {
+    if (!handle || !cursor || !hasNextPage || loading) return;
+    setLoading(true);
+    try {
+      const result = await getCollectionProducts(handle, options, cursor);
+      if (result) {
+        setCollection((prev) =>
+          prev
+            ? { ...prev, products: [...prev.products, ...result.collection.products] }
+            : result.collection
+        );
+        setHasNextPage(result.hasNextPage);
+        setCursor(result.endCursor);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Load more failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle, cursor, hasNextPage, loading, options.first, options.sortKey, options.reverse, filtersKey]);
+
+  return { collection, loading, error, hasNextPage, fetchMore, refetch: fetchCollection };
 }