Query Changes

contentstack · Mar 28, 2024 · 1cbdfaa · 1cbdfaa
1 parent b9355ff
commit 1cbdfaa
Show file tree

Hide file tree

Showing 4 changed files with 17,544 additions and 10,092 deletions.
diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
@@ -15,7 +15,23 @@ export const meta: MetaFunction = () => {
 
 export async function loader({context, request}: LoaderFunctionArgs) {
   const {storefront} = context;
-  const recommendedProducts = storefront.query(RECOMMENDED_PRODUCTS_QUERY);
+  const featuredProductsQueryResult = await storefront.query(
+    FEATURED_PRODUCT_QUERY,
+  );
+  const newArrivalProductsQueryResult = await storefront.query(
+    NEW_ARRIVALS_QUERY,
+  );
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 6,
+  });
+
+  const {collections} = await context.storefront.query(NEW_COLLLECTION_QUERY, {
+    variables: paginationVariables,
+  });
+  const topCategoriesQueryResult = await storefront.query(TOP_CATEGORIES_QUERY);
+
+  const bestSellersQueryResult = await storefront.query(BEST_SELLERS_QUERY);
+
   const envConfig = context.env;
   const fetchData = async () => {
     try {
@@ -30,27 +46,54 @@ export async function loader({context, request}: LoaderFunctionArgs) {
       console.error('ERROR', error);
     }
   };
-  const paginationVariables = getPaginationVariables(request, {
-    pageBy: 6,
-  });
-
-  const {collections} = await context.storefront.query(COLLECTIONS_QUERY, {
-    variables: paginationVariables,
-  });
 
   return defer({
-    recommendedProducts,
+    topCategoriesQueryResult,
+    bestSellersQueryResult,
+    featuredProductsQueryResult,
+    newArrivalProductsQueryResult,
     fetchedData: await fetchData(),
     collections,
   });
 }
 
+// Function to filter categories with products marked as "Best Seller"
+const filterCategoriesWithBestSellers = (data: any) => {
+  const categoriesWithBestSellers: any = [];
+
+  data?.edges?.forEach((collection: any) => {
+    const products = collection.node.products.edges;
+    const hasBestSeller = products.some(
+      (product: any) => product.node.productType === 'Best Seller',
+    );
+
+    if (hasBestSeller) {
+      categoriesWithBestSellers.push({
+        id: collection.node.id,
+        products: products.filter(
+          (product: any) => product.node.productType === 'Best Seller',
+        ),
+        title: collection.node.title,
+      });
+    }
+  });
+
+  return categoriesWithBestSellers;
+};
+
+// Filter categories with products marked as "Best Seller"
+
 export default function Homepage() {
-  const data = useLoaderData<typeof loader>();
+  const data: any = useLoaderData<typeof loader>();
+  const categoriesWithBestSellers = filterCategoriesWithBestSellers(
+    data?.topCategoriesQueryResult?.collections,
+  );
+
   return (
     <div className="home flex pg_bt">
       <RecommendedProducts
-        products={data.recommendedProducts}
+        newArrivalProductsQueryResult={data.newArrivalProductsQueryResult}
+        products={data.featuredProductsQueryResult}
         cmsData={data.fetchedData}
         collections={data.collections.nodes}
       />
@@ -90,10 +133,12 @@ function RecommendedProducts({
   products,
   cmsData,
   collections,
+  newArrivalProductsQueryResult,
 }: {
   products: Promise<RecommendedProductsQuery>;
   cmsData: Awaited<ReturnType<typeof getEntryByUid>>;
   collections: CollectionFragment[];
+  newArrivalProductsQueryResult: Promise<any>;
 }) {
   return (
     <div>
@@ -200,30 +245,7 @@ function RecommendedProducts({
   );
 }
 
-const FEATURED_COLLECTION_QUERY = `#graphql
-  fragment FeaturedCollection on Collection {
-    id
-    title
-    image {
-      id
-      url
-      altText
-      width
-      height
-    }
-    handle
-  }
-  query FeaturedCollection($country: CountryCode, $language: LanguageCode)
-    @inContext(country: $country, language: $language) {
-    collections(first: 1, sortKey: UPDATED_AT, reverse: true) {
-      nodes {
-        ...FeaturedCollection
-      }
-    }
-  }
-` as const;
-
-const RECOMMENDED_PRODUCTS_QUERY = `#graphql
+const FEATURED_PRODUCT_QUERY = `#graphql
   fragment RecommendedProduct on Product {
     id
     title
@@ -254,7 +276,62 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
     }
   }
 ` as const;
-const COLLECTIONS_QUERY = `#graphql
+
+const NEW_ARRIVALS_QUERY = `#graphql
+fragment NewArrival on Product {
+  id
+  title
+  handle
+  productType
+  priceRange {
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+  images(first: 1) {
+    nodes {
+      id
+      url
+      altText
+      width
+      height
+    }
+  }
+}
+query NewArrivals ($country: CountryCode, $language: LanguageCode)
+  @inContext(country: $country, language: $language) {
+  products(first: 5, sortKey: CREATED_AT, reverse: true) {
+    nodes {
+      ...NewArrival
+    }
+  }
+}` as const;
+
+const TOP_CATEGORIES_QUERY = `#graphql
+  query FeaturedCollection($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+      collections(first:5) {
+        edges {
+          node {
+            id
+            title
+            handle
+            products(first: 5) {
+              edges {
+                node {
+                  id
+                  productType
+                }
+              }
+            }
+          }
+        }
+      }
+  }
+` as const;
+
+const NEW_COLLLECTION_QUERY = `#graphql
   fragment Collection on Collection {
     id
     title
@@ -277,7 +354,7 @@ const COLLECTIONS_QUERY = `#graphql
     $startCursor: String
   ) @inContext(country: $country, language: $language) {
     collections(
-      first: 3,
+      first: 1,
       last: $last,
       before: $startCursor,
       after: $endCursor
@@ -294,3 +371,28 @@ const COLLECTIONS_QUERY = `#graphql
     }
   }
 ` as const;
+
+const BEST_SELLERS_QUERY = `#graphql
+  query FeaturedCollection($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+      collection(handle: "Mens") {
+        handle
+        products(first: 4,filters: { productType: "Best Sellers"}) {
+          nodes{
+            id
+            title
+            images(first: 1) {
+              nodes {
+                id
+                url
+                altText
+                width
+                height
+              }
+            }
+          }
+         
+        }
+      }
+  }
+` as const;
diff --git a/app/routes/($locale).products.$handle.tsx b/app/routes/($locale).products.$handle.tsx
@@ -55,10 +55,17 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
   const {product} = await storefront.query(PRODUCT_QUERY, {
     variables: {handle, selectedOptions},
   });
-
   if (!product?.id) {
     throw new Response(null, {status: 404});
   }
+  const productID = product?.id;
+  // Fetch related products using the product ID
+  const relatedProductQueryResults = await storefront.query(
+    RELATED_PRODUCT_QUERY,
+    {
+      variables: {productID}, // Pass the product ID as the $productID variable
+    },
+  );
 
   const firstVariant = product.variants.nodes[0];
   const firstVariantIsDefault = Boolean(
@@ -87,7 +94,7 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
     variables: {handle},
   });
 
-  return defer({product, variants});
+  return defer({product, variants, relatedProductQueryResults});
 }
 
 function redirectToFirstVariant({
@@ -114,7 +121,8 @@ function redirectToFirstVariant({
 }
 
 export default function Product() {
-  const {product, variants} = useLoaderData<typeof loader>();
+  const {product, variants, relatedProductQueryResults} =
+    useLoaderData<typeof loader>();
   const {selectedVariant} = product;
   return (
     <div className="product container">
@@ -368,7 +376,6 @@ function AddToCartButton({
     </CartForm>
   );
 }
-
 const PRODUCT_VARIANT_FRAGMENT = `#graphql
   fragment ProductVariant on ProductVariant {
     availableForSale
@@ -484,3 +491,25 @@ const VARIANTS_QUERY = `#graphql
     }
   }
 ` as const;
+
+const RELATED_PRODUCT_QUERY = `#graphql
+  query productRecommendations(
+    $country: CountryCode
+    $language: LanguageCode
+    $productID: ID!
+  ) @inContext(country: $country, language: $language) {
+    productRecommendations(productId: $productID, intent: RELATED) {
+      id,
+      title
+      images(first:1){
+        nodes{
+          id
+        url
+        altText
+        width
+        height
+        }
+      }
+    }
+  }
+` as const;