feat: product images sizes

api/helpers.api.md

@@ -165,6 +165,9 @@ export function getProductReviews({ product, }?: {
 // @alpha
 export function getProductSpecialPrice(product: Product): number | undefined;
 
+// @beta
+export function getProductThumbnailUrl(product: Product): string;
+
 // @beta
 export function getProductTierPrices(product: Product): TierPrice[];
 

docs/landing/resources/api/helpers.getproductthumbnailurl.md

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/helpers](./helpers.md) &gt; [getProductThumbnailUrl](./helpers.getproductthumbnailurl.md)
+
+## getProductThumbnailUrl() function
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+get the thumbnail image URL with the smallest width
+
+<b>Signature:</b>
+
+```typescript
+export declare function getProductThumbnailUrl(product: Product): string;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  product | Product |  |
+
+<b>Returns:</b>
+
+string
+

docs/landing/resources/api/helpers.md

@@ -16,6 +16,7 @@
 |  --- | --- |
 |  [getListingAvailableFilters(aggregations)](./helpers.getlistingavailablefilters.md) | <b><i>(BETA)</i></b> |
 |  [getProductRegularPrice(product)](./helpers.getproductregularprice.md) | <b><i>(BETA)</i></b> Get the price for 1 unit of a product |
+|  [getProductThumbnailUrl(product)](./helpers.getproductthumbnailurl.md) | <b><i>(BETA)</i></b> get the thumbnail image URL with the smallest width |
 |  [getProductTierPrices(product)](./helpers.getproducttierprices.md) | <b><i>(BETA)</i></b> Get the prices depending on quantity added to cart. Tier prices can be set in <code>Advanced pricing</code> tab in <code>Product view</code> (admin panel) |
 |  [getStoreNavigationRoutes(navigationElements)](./helpers.getstorenavigationroutes.md) | <b><i>(BETA)</i></b> |
 |  [isProductSimple({ product, })](./helpers.isproductsimple.md) | <b><i>(BETA)</i></b> |

packages/composables/src/api-params.json

@@ -63,6 +63,9 @@
           "media"
       ],
       "media": [
+          "thumbnails",
+          "width",
+          "height",
           "url"
       ],
       "calculated_price": [
@@ -99,6 +102,9 @@
           "media"
       ],
       "media": [
+          "thumbnails",
+          "width",
+          "height",
           "url"
       ],
       "calculated_price": [

packages/default-theme/components/SwProductCard.vue

@@ -22,7 +22,7 @@
 import { SfProductCard, SfAddToCart } from "@storefront-ui/vue"
 import { useAddToCart } from "@shopware-pwa/composables"
 import {
-  getProductMainImageUrl,
+  getProductThumbnailUrl,
   getProductRegularPrice,
   getProductUrl,
   getProductSpecialPrice,
@@ -74,7 +74,7 @@ export default {
     },
     getImageUrl() {
       return (
-        getProductMainImageUrl(this.product) ||
+        getProductThumbnailUrl(this.product) ||
         require("@shopware-pwa/default-theme/assets/productB.jpg")
       )
     },

packages/helpers/__tests__/product/getProductThumbnailUrl.spec.ts

@@ -0,0 +1,89 @@
+import { getProductThumbnailUrl } from "@shopware-pwa/helpers";
+
+describe("Helpers - getProductThumbnailUrl", () => {
+  it("should return the smallest thumbnail contained in thumbnails array", () => {
+    const product: any = {
+      cover: {
+        media: {
+          url: "https://shopware.test/media/image.jpg",
+          thumbnails: [
+            {
+              width: 1920,
+              height: 1920,
+              url: "https://shopware.test/media/image_1920x1920.jpg",
+            },
+            {
+              width: 500,
+              height: 500,
+              url: "https://shopware.test/media/image_500x500.jpg",
+            },
+          ],
+        },
+      },
+    };
+    const coverUrl = getProductThumbnailUrl(product);
+    expect(coverUrl).toEqual("https://shopware.test/media/image_500x500.jpg");
+  });
+
+  it("should return the smallest thumbnail contained in thumbnails array", () => {
+    const product: any = {
+      cover: {
+        media: {
+          url: "https://shopware.test/media/image.jpg",
+          thumbnails: [
+            {
+              width: 500,
+              height: 500,
+              url: "https://shopware.test/media/image_500x500.jpg",
+            },
+            {
+              width: 1920,
+              height: 500,
+              url: "https://shopware.test/media/image_1920x500.jpg",
+            },
+          ],
+        },
+      },
+    };
+    const coverUrl = getProductThumbnailUrl(product);
+    expect(coverUrl).toEqual("https://shopware.test/media/image_500x500.jpg");
+  });
+
+  it("should return the main media url as a fallback if there is no thumbnail in the list", () => {
+    const product: any = {
+      cover: {
+        media: {
+          url: "https://shopware.test/media/image.jpg",
+          thumbnails: null,
+        },
+      },
+    };
+    const coverUrl = getProductThumbnailUrl(product);
+    expect(coverUrl).toEqual("https://shopware.test/media/image.jpg");
+  });
+
+  it("should return empty string as a fallback if the thumbnails array can't be reached", () => {
+    const product: any = {
+      cover: {},
+    };
+    const coverUrl = getProductThumbnailUrl(product);
+    expect(coverUrl).toEqual("");
+  });
+
+  it("should return null for product without cover media, cover or thumnails", () => {
+    const emptyProduct: any = {};
+    const coverUrl = getProductThumbnailUrl(emptyProduct);
+    expect(coverUrl).toEqual("");
+  });
+
+  it("should return default negative value if argument wasn't provided", () => {
+    const coverUrl = getProductThumbnailUrl(undefined as any);
+    expect(coverUrl).toEqual("");
+  });
+
+  it("should return default value if product was null", () => {
+    const argument: any = null;
+    const coverUrl = getProductThumbnailUrl(argument);
+    expect(coverUrl).toEqual("");
+  });
+});

packages/helpers/src/product/getProductThumbnailUrl.ts

@@ -0,0 +1,18 @@
+import { Product } from "@shopware-pwa/commons/interfaces/models/content/product/Product";
+
+/**
+ * get the thumbnail image URL with the smallest width
+ *
+ * @beta
+ */
+export function getProductThumbnailUrl(product: Product): string {
+  const coverImageUrlFallback = product?.cover?.media?.url || "";
+  const thumbnailImage = product?.cover?.media?.thumbnails?.reduce(function (
+    res,
+    thumb
+  ) {
+    return thumb.width < res.width ? thumb : res;
+  });
+
+  return thumbnailImage?.url || coverImageUrlFallback;
+}

packages/helpers/src/product/index.ts

@@ -15,3 +15,4 @@ export * from "./getProductUrl";
 export * from "./getProductRatingAverage";
 export * from "./getVariantOptionsLabel";
 export * from "./isProductSimple";
+export * from "./getProductThumbnailUrl";