slug

components/product/ProductCard/ProductCard.tsx

@@ -57,11 +57,11 @@ const ProductCard: FC<Props> = ({
                   {product.price.currencyCode}
                 </span>
               </div>
-              {/* <WishlistButton
+              <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
-                variant={product.variant[0]!}
-              /> */}
+                variant={product.variants[0]}
+              />
             </div>
             <div className={s.imageContainer}>
               {product?.images && (

components/product/ProductView/ProductView.tsx

@@ -25,21 +25,26 @@ interface Props {
 }
 
 const ProductView: FC<Props> = ({ product }) => {
+  console.log(product)
+
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
     baseAmount: product.price.retailValue,
     currencyCode: product.price.currencyCode!,
   })
+
   const { openSidebar } = useUI()
-  const options = getProductOptions(product)
+
+  // const options = getProductOptions(product)
+
   const [loading, setLoading] = useState(false)
   const [choices, setChoices] = useState<SelectedOptions>({
     size: null,
     color: null,
   })
 
-  const variant = getCurrentVariant(product, choices) || product.variants[0]
+  // const variant = getCurrentVariant(product, choices) || product.variants[0]
 
   const addToCart = async () => {
     setLoading(true)
@@ -106,7 +111,7 @@ const ProductView: FC<Props> = ({ product }) => {
 
         <div className={s.sidebar}>
           <section>
-            {options?.map((opt: any) => (
+            {/* {options?.map((opt: any) => (
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
@@ -133,7 +138,7 @@ const ProductView: FC<Props> = ({ product }) => {
                   })}
                 </div>
               </div>
-            ))}
+            ))} */}
 
             <div className="pb-14 break-words w-full max-w-xl">
               <Text html={product.description} />
@@ -146,7 +151,7 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
-              disabled={!variant}
+              // disabled={!variant}
             >
               Add to Cart
             </Button>

framework/bigcommerce/lib/normalize.ts

@@ -13,16 +13,25 @@ export function normalizeProduct(productNode: BCProduct): Product {
 
   return {
     path,
-    slug: path?.slice(1, -1),
-    images: images?.edges?.map(
-      ({ node: { urlOriginal, altText, ...rest } }: any) => ({
-        url: urlOriginal,
-        alt: altText,
-        ...rest,
-      })
-    ),
-    variants: variants?.edges?.map(({ node }: any) => node),
-    productOptions: productOptions?.edges?.map(({ node }: any) => node),
+    slug: path?.replace(/^\/+|\/+$/g, ''),
+    images: images.edges
+      ? images.edges.map(
+          ({ node: { urlOriginal, altText, ...rest } }: any) => ({
+            url: urlOriginal,
+            alt: altText,
+            ...rest,
+          })
+        )
+      : [],
+    variants: variants.edges
+      ? variants.edges.map(({ node: { entityId, ...rest } }: any) => ({
+          id: entityId,
+          ...rest,
+        }))
+      : [],
+    productOptions: productOptions.edges
+      ? productOptions.edges.map(({ node }: any) => node)
+      : [],
     price: {
       value: prices?.price.value,
       currencyCode: prices?.price.currencyCode,

framework/types.d.ts

@@ -8,8 +8,8 @@ interface Product extends Entity {
   description: string
   slug: string
   path?: string
-  images: ProductImage[] | any[] | undefined
-  variants: ProductVariant[] | any[] | null | undefined
+  images: ProductImage[]
+  variants: ProductVariant[]
   price: ProductPrice
 }
 interface ProductImage {