Define image from props

If the label does not exist or is not defined, the first image is used.
beightone · Aug 13, 2021 · 5a373d5 · 5a373d5
1 parent ca430db
commit 5a373d5
Showing 1 changed file with 29 additions and 18 deletions.
diff --git a/react/Index.tsx b/react/Index.tsx
@@ -12,7 +12,8 @@ interface SimilarProductsVariantsProps {
     product: {
       productId: string
     }
-  }
+  },
+  imageLabel: string
 }
 
 const CSS_HANDLES = [
@@ -25,6 +26,7 @@ const CSS_HANDLES = [
 
 function SimilarProductsVariants({
   productQuery,
+  imageLabel
 }: SimilarProductsVariantsProps) {
   const handles = useCssHandles(CSS_HANDLES)
   const productContext = useProduct()
@@ -68,24 +70,33 @@ function SimilarProductsVariants({
     <div className={`${handles.variants}`}>
       <p className={`${handles.title}`}>Colores</p>
       <div className={handles['var-wrap']}>
-        {items.map((element: ProductTypes.Product) => (
-          <a
-            key={element.productId}
-            className={`${handles.img_wrap}${
-              route?.params?.slug === element.linkText ? '--is-active' : ''
-            }`}
-            href={`/${element.linkText}/p`}
-          >
-            <img
-              height="50px"
-              alt={element.productName}
-              className={`${handles.img} mr3 ${
-                route?.params?.slug === element.linkText ? 'o-50' : ''
+        {items.map((element: ProductTypes.Product) => {
+          const imageIndex = imageLabel === undefined 
+            ? 0
+            : element.items[0].images.findIndex(image => image.imageLabel === imageLabel) === -1
+              ? 0 
+              : element.items[0].images.findIndex(image => image.imageLabel === imageLabel)
+
+          const srcImage = element.items[0].images[imageIndex].imageUrl
+          return (
+            <a
+              key={element.productId}
+              href={`/${element.linkText}/p`}
+              className={`${handles.img_wrap}${
+                route?.params?.slug === element.linkText ? '--is-active' : ''
               }`}
-              src={element.items[0].images[0].imageUrl}
-            />
-          </a>
-        ))}
+            >
+              <img
+                src={ srcImage }
+                alt={element.productName}
+                height="50px"
+                className={`${handles.img} mr3 ${
+                  route?.params?.slug === element.linkText ? 'o-50' : ''
+                }`}
+              />
+            </a>
+          )
+        })}
       </div>
     </div>
   )