Merge pull request #2 from IvanLopezLuna/feature/mainImage

Define image from props
beightone · Aug 30, 2021 · 6612367 · 6612367
2 parents ca430db + 69ae98b
commit 6612367
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -52,9 +52,18 @@ Add the similar-products-variants block to the store theme template where you de
       "share#default"
     ]
   },
+  "similar-products-variants": {
+      "props": {
+          "imageLabel": "swatch"
+      }
+  },
 ...
 ```
 
+| Prop name    | Type   | Description                                                                                                   | Default value |
+|--------------|--------|---------------------------------------------------------------------------------------------------------------| ------------- |
+| `imageLabel` | String | Define which image will be displayed. If the label does not exist or is not defined, the first image is used. | `null`        |
+
 *Notice that this block depends on the product context, so its recomended to declare it inside the product page contex. If the SKU doesn't have any similar product configured on the catalog the component wont render anything.*
 
 ## Customization

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>
   )