feat: homepage and integrate with shopify page

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

lib/shopify/index.ts

@@ -380,12 +380,19 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
   return reshapeCart(res.body.data.cart);
 }
 
-export async function getCollection(handle: string): Promise<Collection | undefined> {
+export async function getCollection({
+  handle,
+  id
+}: {
+  handle?: string;
+  id?: string;
+}): Promise<Collection | undefined> {
   const res = await shopifyFetch<ShopifyCollectionOperation>({
     query: getCollectionQuery,
     tags: [TAGS.collections],
     variables: {
-      handle
+      handle,
+      id
     }
   });
 

lib/shopify/queries/collection.ts

@@ -15,8 +15,8 @@ const collectionFragment = /* GraphQL */ `
 `;
 
 export const getCollectionQuery = /* GraphQL */ `
-  query getCollection($handle: String!) {
-    collection(handle: $handle) {
+  query getCollection($handle: String, $id: ID) {
+    collection(handle: $handle, id: $id) {
       ...collection
     }
   }

lib/shopify/types.ts

@@ -56,7 +56,13 @@ export type PageMetafield = {
   value: string;
 };
 
-export const PAGE_TYPES = ['image', 'icon_content_section', 'page_section', 'accordion'] as const;
+export const PAGE_TYPES = [
+  'image',
+  'icon_content_section',
+  'page_section',
+  'accordion',
+  'category_preview'
+] as const;
 export type PageType = (typeof PAGE_TYPES)[number];
 
 export type ShopifyPage = {
@@ -246,7 +252,8 @@ export type ShopifyCollectionOperation = {
     collection: ShopifyCollection;
   };
   variables: {
-    handle: string;
+    handle?: string;
+    id?: string;
   };
 };