fix: add function to get vtex product image in properly ratio

components/product/ProductCard.tsx

@@ -7,6 +7,7 @@ import { useVariantPossibilities } from "$store/sdk/useVariantPossiblities.ts";
 import type { Product } from "deco-sites/std/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "deco-sites/std/commerce/utils/productToAnalyticsItem.ts";
 import Image from "deco-sites/std/components/Image.tsx";
+import { getImageInCorrectRatio } from "deco-sites/staging/sdk/getImageInCorrectRatio.ts";
 
 export interface Layout {
   basics?: {
@@ -155,7 +156,7 @@ function ProductCard({ product, preload, itemListName, layout }: Props) {
           class="grid grid-cols-1 grid-rows-1 w-full"
         >
           <Image
-            src={front.url!}
+            src={getImageInCorrectRatio(front.url, WIDTH, HEIGHT)}
             alt={front.alternateName}
             width={WIDTH}
             height={HEIGHT}
@@ -172,7 +173,11 @@ function ProductCard({ product, preload, itemListName, layout }: Props) {
           {(!l?.onMouseOver?.image ||
             l?.onMouseOver?.image == "Change image") && (
             <Image
-              src={back?.url ?? front.url!}
+              src={getImageInCorrectRatio(
+                back?.url ?? front.url!,
+                WIDTH,
+                HEIGHT,
+              )}
               alt={back?.alternateName ?? front.alternateName}
               width={WIDTH}
               height={HEIGHT}

components/product/ProductDetails.tsx

@@ -18,6 +18,7 @@ import type { ProductDetailsPage } from "deco-sites/std/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "deco-sites/std/commerce/utils/productToAnalyticsItem.ts";
 import Image from "deco-sites/std/components/Image.tsx";
 import ProductSelector from "./ProductVariantSelector.tsx";
+import { getImageInCorrectRatio } from "deco-sites/staging/sdk/getImageInCorrectRatio.ts";
 
 export type Variant = "front-back" | "slider" | "auto";
 
@@ -235,15 +236,17 @@ const useStableImages = (product: ProductDetailsPage["product"]) => {
   const allImages = product.isVariantOf?.hasVariant.flatMap((p) => p.image)
     .reduce((acc, img) => {
       if (img?.url) {
-        acc[imageNameFromURL(img.url)] = img.url;
+        const url = getImageInCorrectRatio(img.url, WIDTH, HEIGHT);
+        acc[imageNameFromURL(img.url)] = url;
       }
       return acc;
     }, {} as Record<string, string>) ?? {};
 
   return images.map((img) => {
     const name = imageNameFromURL(img.url);
+    const url = getImageInCorrectRatio(img.url, WIDTH, HEIGHT);
 
-    return { ...img, url: allImages[name] ?? img.url };
+    return { ...img, url: allImages[name] ?? url };
   });
 };
 

sdk/getImageInCorrectRatio.ts

@@ -0,0 +1,11 @@
+export const getImageInCorrectRatio = (
+  url = "",
+  width: number,
+  height: number,
+) => {
+  if (!url.includes("vteximg.com.br")) return url;
+  return url.replace(
+    /\/ids\/([0-9]*)\//,
+    `/ids/$1-${width}-${height}/`,
+  );
+};