product variants and options

packages/sfcc/src/api/operations/get-product.ts

@@ -2,7 +2,6 @@
 import { GetProductOperation, Product } from '@vercel/commerce/types/product'
 import type { SFCCConfig } from '../index'
 import type { OperationContext } from '@vercel/commerce/api/operations'
-import staticData from '../../data.json'
 import { normalizeProduct } from '../utils/normalise-product';
 
 export default function getProductOperation({
@@ -25,13 +24,6 @@ export default function getProductOperation({
     const product = await shopperProductsClient.getProduct({parameters: {id: variables?.slug as string}});
     const normalizedProduct = normalizeProduct(product)
   
-    // TODO: add dummy data 
-    const singleProduct = staticData.products.find(({ slug }) => slug === "new-short-sleeve-t-shirt");
-    if (singleProduct) {
-      normalizedProduct['variants'] = singleProduct['variants'] as any // TODO: variants
-      normalizedProduct['options'] = singleProduct['options'] // TODO: options
-    }
-
     return {
       product: normalizedProduct,
     }

packages/sfcc/src/api/utils/normalise-product.ts

@@ -1,7 +1,44 @@
 import { Product as SFCCProduct, Search } from "commerce-sdk";
-import type { Product, ProductImage } from '@vercel/commerce/types/product'
+import type { Product, ProductImage, ProductOption, ProductVariant } from '@vercel/commerce/types/product'
-// import type { RawProduct } from '../../types/product'
 
+const normaliseOptions = (options: SFCCProduct.ShopperProducts.Product["variationAttributes"]): Product["options"] => {
+    if (!Array.isArray(options)) return []
+
+    return options.map(option => {
+        return {
+            id: option.id,
+            displayName: option.name as string,
+            values: option.values!.map(value => ({label: value.name}))
+        } as ProductOption
+    });
+}
+
+const normaliseVariants = (variants: SFCCProduct.ShopperProducts.Product["variants"]): Product["variants"] => {
+    if (!Array.isArray(variants)) return []
+
+    return variants.map(variant => {
+
+        const options = [] as ProductOption[];
+
+        if (variant.variationValues) {
+            for (const [key, value] of Object.entries(variant.variationValues)) {
+                const variantOptionObject = {
+                    id: `${variant.productId}-${key}`,
+                    displayName: key,
+                    values: [{
+                        label: value,
+                    }]
+                }
+                options.push(variantOptionObject);
+            }
+        }
+
+        return {
+            id: variant.productId,
+            options
+        } as ProductVariant;
+    });
+}
 
 export function normalizeProduct(product: SFCCProduct.ShopperProducts.Product): Product {
     return {
@@ -18,8 +55,8 @@ export function normalizeProduct(product: SFCCProduct.ShopperProducts.Product):
             url: image.disBaseLink,
             altText: image.title
         })) as ProductImage[],
-        variants: [] as any, // TODO
+        variants: normaliseVariants(product.variants),
-        options: [] as any // TODO
+        options: normaliseOptions(product.variationAttributes),
     };
 }
 
@@ -40,8 +77,8 @@ export function normalizeSearchProducts(products: Search.ShopperSearch.ProductSe
                 altText: product.productName
             } as ProductImage
         ],
-        variants: [] as any, // TODO
+        variants: normaliseVariants(product.variants),
-        options: [] as any // TODO
+        options: normaliseOptions(product.variationAttributes),
     }));
 
 }