diff --git a/packages/commerce-server/src/lib/commerce/catalog-subgraph.ts b/packages/commerce-server/src/lib/commerce/catalog-subgraph.ts index adeeb135..47d1d070 100644 --- a/packages/commerce-server/src/lib/commerce/catalog-subgraph.ts +++ b/packages/commerce-server/src/lib/commerce/catalog-subgraph.ts @@ -272,10 +272,13 @@ export function getAvailableInventoryQuantity( return edges.find((edge) => edge?.node?.type === 'AVAILABLE')?.node?.quantity ?? 0; } +// The catalog API still returns `PHOTO` for media created before the `IMAGE` type. +const imageMediaTypes: ReadonlySet = new Set(['IMAGE', 'PHOTO']); + export function getImageUrls(item: MediaObjectContainer | null | undefined): string[] { return ( item?.mediaObjects?.edges - ?.filter((edge) => edge?.node?.type === 'IMAGE' && edge.node.url) + ?.filter((edge) => imageMediaTypes.has(edge?.node?.type ?? '') && edge?.node?.url) .map((edge) => edge?.node?.url) .filter((url): url is string => Boolean(url)) ?? [] ); diff --git a/packages/commerce-storefront/src/catalog-model.test.ts b/packages/commerce-storefront/src/catalog-model.test.ts index 9857c808..5a5ed0af 100644 --- a/packages/commerce-storefront/src/catalog-model.test.ts +++ b/packages/commerce-storefront/src/catalog-model.test.ts @@ -1,6 +1,7 @@ import { describe, expect, it } from 'vitest'; import { getAvailableInventoryQuantity, + getImageUrls, getLabeledSkuOptions, getSingleMatchedSku, type SKU, @@ -47,4 +48,19 @@ describe('safe SKU selection', () => { }), ).toBe(2); }); + it('treats legacy PHOTO media as images and skips other media', () => { + expect( + getImageUrls({ + mediaObjects: { + edges: [ + { node: { type: 'PHOTO', url: '/legacy.jpg' } }, + { node: { type: 'VIDEO', url: '/clip.mp4' } }, + { node: { type: 'IMAGE', url: '/current.jpg' } }, + { node: { type: 'IMAGE', url: '' } }, + null, + ], + }, + }), + ).toEqual(['/legacy.jpg', '/current.jpg']); + }); }); diff --git a/packages/commerce-storefront/src/catalog-model.ts b/packages/commerce-storefront/src/catalog-model.ts index 45b4fc39..66949720 100644 --- a/packages/commerce-storefront/src/catalog-model.ts +++ b/packages/commerce-storefront/src/catalog-model.ts @@ -215,10 +215,13 @@ export function getAvailableInventoryQuantity( return edges.find((edge) => edge?.node?.type === 'AVAILABLE')?.node?.quantity ?? 0; } +// The catalog API still returns `PHOTO` for media created before the `IMAGE` type. +const imageMediaTypes: ReadonlySet = new Set(['IMAGE', 'PHOTO']); + export function getImageUrls(item: MediaObjectContainer | null | undefined): string[] { return ( item?.mediaObjects?.edges - ?.filter((edge) => edge?.node?.type === 'IMAGE' && edge.node.url) + ?.filter((edge) => imageMediaTypes.has(edge?.node?.type ?? '') && edge?.node?.url) .map((edge) => edge?.node?.url) .filter((url): url is string => Boolean(url)) ?? [] );