Get products formating

- Checking related products with param
 - Changing the normalizer
 - Separate calls for product & products in normalizer

framework/elasticpath/api/operations/get-all-products.ts

@@ -2,7 +2,7 @@ import { Product } from '@commerce/types/product'
 import { GetAllProductsOperation } from '@commerce/types/product'
 import type { OperationContext } from '@commerce/api/operations'
 import type { ElasticpathConfig, Provider } from '../index'
-import normalizeProduct from '../../utils/normalize'
+import normalizeProducts from '../../utils/normalize'
 import epClient from '../../utils/ep-client'
 
 export default function getAllProductsOperation({
@@ -12,17 +12,24 @@ export default function getAllProductsOperation({
     query = '',
     variables,
     config,
+    related
   }: {
     query?: string
     variables?: T['variables']
     config?: Partial<ElasticpathConfig>
     preview?: boolean
+    related?: boolean
   } = {}): Promise<{ products: Product[] | any[] }> {
+    
+    if(related) {
+      return { products: [] };
+    }
+    
     // elastic path get all products
-    let products = await epClient.PCM.Limit(200).All();
-    let normalizeProducts = await normalizeProduct(products.data)
+    let productsRes = await epClient.PCM.Limit(variables?.first || 10).All();
+    let products = await normalizeProducts(productsRes.data)
     return {
-      products: normalizeProducts,
+      products: products,
       // products: data.products,
     }
   }

framework/elasticpath/api/operations/get-product.ts

@@ -1,9 +1,8 @@
 import type { ElasticpathConfig } from '../index'
 import { Product } from '@commerce/types/product'
 import { GetProductOperation } from '@commerce/types/product'
-import data from '../../data.json'
 import type { OperationContext } from '@commerce/api/operations'
-import normalizeProduct from '../../utils/normalize'
+import {normalizeProduct} from '../../utils/normalize'
 import epClient from '../../utils/ep-client'
 
 
@@ -26,16 +25,15 @@ export default function getProductOperation({
     } else {
       variablesS = variables.slug;
     }
-    let products = await epClient.PCM.Filter({
+    let {data:[product]} = await epClient.PCM.Filter({
       eq: {
         slug: variablesS 
       }
     }).All();
-    let normalizeProducts = await normalizeProduct(products.data)
-    let productSlugs = normalizeProducts.find(({ slug }) => slug === variables!.slug);
+    let productData = await normalizeProduct(product, true)
     return {
       // product: data.products.find(({ slug }) => slug === variables!.slug),
-      product: productSlugs
+      product: productData
     }
   }
 

framework/elasticpath/utils/all-products-context.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { Product } from '@commerce/types/product';
+
+const AllProductContext = React.createContext<Product>({
+    id: '',
+    name: '',
+    description: '',
+    images: [],
+    variants: [],
+    price: {
+        value: 0
+    },
+    options: [],
+});
+
+export default AllProductContext;

framework/elasticpath/utils/normalize.js

@@ -1,75 +0,0 @@
-import {
-	gateway as MoltinGateway
-} from '@moltin/sdk'
-const Moltin = MoltinGateway({
-	client_id: process.env.NEXT_PUBLIC_ELASTICPATH_CLIENTID
-})
-
-
-const normalizeProduct = async(products) => {
-	let normalizeProducts = []
-
-	const productImageGet = async(fileId) => {
-		try {
-			let apiImage = await Moltin.Files.Get(fileId);
-			return apiImage;
-		} catch (error) {
-			console.error(fileId, error);
-		}
-	}
-
-	const getPrices = (prices) => {
-
-		if(!prices) {
-			return [{
-				"value": 0,
-				"currencyCode": 'USD'
-			}];
-		}
-
-		let allPrices = []
-		for(let key in prices) {
-			allPrices.push({
-				"value": prices[key].amount/100,
-				"currencyCode": key
-			})
-		}
-		return allPrices
-	} 
-
-	const normalizeProductImages = async(productId) => {
-		let fileId = productId.relationships?.files?.data[0]?.id;
-		if (fileId) {
-			let productImageObject = await productImageGet(fileId);
-			return productImageObject?.data?.link?.href || '/assets/lightweight-jacket-0.png';
-		}
-		return '';
-	}
-
-	for (let index in products) {
-		let product = products[index];
-		
-		normalizeProducts.push({
-			"id":  product.id,
-			"name": product.attributes?.name,
-			"vendor": "trika",
-			"path": "/"+product.attributes?.slug,
-			"slug": product.attributes?.slug,
-			"price": getPrices(product.attributes?.price)[0],
-			"descriptionHtml": product.attributes?.description,
-			"images": [{
-				"url": await normalizeProductImages(product),
-				"altText": "Shirt",
-				"width": 1000,
-				"height": 1000
-			}],
-			"variants": [{
-				"options": []
-			}],
-			"options": []
-		})
-	}
-	return normalizeProducts;
-}
-
-export default normalizeProduct;

framework/elasticpath/utils/normalize.ts

@@ -0,0 +1,95 @@
+import {
+	gateway as MoltinGateway
+} from '@moltin/sdk'
+const Moltin = MoltinGateway({
+	client_id: process.env.NEXT_PUBLIC_ELASTICPATH_CLIENTID
+})
+import { Product, ProductImage } from '@commerce/types/product'
+
+const getPrices = (prices:any) => {
+
+	if(!prices) {
+		return [{
+			"value": 0,
+			"currencyCode": 'USD'
+		}];
+	}
+
+	let allPrices = []
+	for(let key in prices) {
+		allPrices.push({
+			"value": prices[key].amount/100,
+			"currencyCode": key
+		})
+	}
+	return allPrices
+}
+
+async function normalizeProductImages (product:any, allImages?:boolean): Promise< ProductImage[]> {
+
+	let fileCalls = [],
+			fileData = product.relationships?.files?.data || [];
+
+
+		for(let {id} of fileData) {
+			id && fileCalls.push(Moltin.Files.Get(id));
+		}
+	
+
+	try{
+		let allFileRes = await Promise.allSettled(fileCalls);
+		let allFiles:ProductImage[] = [];
+		allFileRes.filter((item) => {
+			if(item.status === 'fulfilled') {
+				let {data} = item.value;
+				allFiles.push({
+					"url": data?.link?.href || '',
+					"alt": data?.file_name || 'no image'
+				});
+			}
+		});
+		return allFiles;
+	} catch(err) {
+		return [{
+			"url": '/',
+			"alt": 'no image'
+		}];
+	}
+}
+
+export const normalizeProduct = async(product:any, allImages?: boolean) => {
+	return {
+		"id":  product.id,
+		"name": product.attributes?.name,
+		"path": "/"+product.attributes?.slug,
+		"slug": product.attributes?.slug,
+		"price": getPrices(product.attributes?.price)[0],
+		"description": product.attributes?.description,
+		"images":  await normalizeProductImages(product, allImages),
+		"variants": [
+			{
+				id: '',
+				options: [{
+					id: '',
+					displayName: '',
+					values: [{
+							label: ''
+					}]
+				}]
+			}
+	],
+		"options": []
+	}
+};
+
+const normalizeProducts = async(products:any) => {
+	let allProducts:Product[] = [];
+
+	for (let index in products) {
+		let product = products[index];
+		allProducts.push(await normalizeProduct(product));
+	}
+	return allProducts;
+}
+
+export default normalizeProducts;

pages/product/[slug].tsx

@@ -24,9 +24,10 @@ export async function getStaticProps({
   })
 
   const allProductsPromise = commerce.getAllProducts({
-    variables: { first: 4 },
+    variables: { first: 2 },
     config,
     preview,
+    related: true
   })
   const { pages } = await pagesPromise
   const { categories } = await siteInfoPromise