diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md index 82e1b9937c..7a714ed873 100644 --- a/docs/guides/migrations.md +++ b/docs/guides/migrations.md @@ -24,6 +24,10 @@ For that reason we removed it. Use the validator `equalTo` instead. Find more information in the method description in the [`special-validators.ts`](https://github.com/intershop/intershop-pwa/blob/3.0.0/src/app/shared/forms/validators/special-validators.ts#L82-L87). +The "Product Image Not Available" PNG image `not_available.png` is removed and replaced by an SVG image `not-available.svg` which does not include a text inside the image any more to avoid localization issues. +The file references are updated accordingly, the product image component is updated to use the correct image attributes, a localized alternative text is added and the product and image mapper files are updated to provide the correct data. +In case the current PNG image file and the handling is customized in a project, you have to make sure to keep the project changes. + ## 2.4 to 3.0 With the 2.4.1 Hotfix we introduced a more fixed Node.js version handling to the version used and tested by us. diff --git a/src/app/core/models/image/image.mapper.ts b/src/app/core/models/image/image.mapper.ts index 2f328c983d..c768644686 100644 --- a/src/app/core/models/image/image.mapper.ts +++ b/src/app/core/models/image/image.mapper.ts @@ -12,7 +12,6 @@ import { Image } from './image.model'; * @example * ImageMapper.fromImages(images) * ImageMapper.fromImage(image) - * ImageMapper.fromImages(images) */ @Injectable({ providedIn: 'root' }) export class ImageMapper { @@ -26,7 +25,6 @@ export class ImageMapper { * Maps Images to Images. * * @param images The source images. - * @param icmBaseURL The prefix URL for building absolute URLs for each relative URL. * @returns The images. */ fromImages(images: Image[]): Image[] { @@ -40,7 +38,6 @@ export class ImageMapper { * Maps Image to Image. * * @param image The source image. - * @param icmBaseURL The prefix URL for building absolute URLs for each relative URL. * @returns The image. */ private fromImage(image: Image): Image { @@ -54,7 +51,6 @@ export class ImageMapper { * Builds absolute URL from relative URL and icmBaseURL or returns absolute URL. * * @param url The relative or absolute image URL. - * @param icmBaseURL The prefix URL for building absolute URLs for each relative URL. * @returns The URL. */ private fromEffectiveUrl(url: string): string { @@ -66,4 +62,38 @@ export class ImageMapper { } return `${this.icmBaseURL}${url}`; } + + /** + * Maps a single product image URL to a minimum product images array. + * + * @param url The image URL. + * @returns The minimum images (M and S image). + */ + fromImageUrl(url: string): Image[] { + if (!url) { + return; + } + return [ + { + effectiveUrl: this.fromEffectiveUrl(url), + name: 'front M', + primaryImage: true, + type: 'Image', + typeID: 'M', + viewID: 'front', + imageActualHeight: 270, + imageActualWidth: 270, + }, + { + effectiveUrl: this.fromEffectiveUrl(url), + name: 'front S', + primaryImage: true, + type: 'Image', + typeID: 'S', + viewID: 'front', + imageActualHeight: 110, + imageActualWidth: 110, + }, + ]; + } } diff --git a/src/app/core/models/product/__snapshots__/product.mapper.spec.ts.snap b/src/app/core/models/product/__snapshots__/product.mapper.spec.ts.snap index a5ed2687e8..6b551845e3 100644 --- a/src/app/core/models/product/__snapshots__/product.mapper.spec.ts.snap +++ b/src/app/core/models/product/__snapshots__/product.mapper.spec.ts.snap @@ -20,8 +20,8 @@ Object { "images": Array [ Object { "effectiveUrl": "http://www.example.org/assets/product_img/a.jpg", - "imageActualHeight": undefined, - "imageActualWidth": undefined, + "imageActualHeight": 270, + "imageActualWidth": 270, "name": "front M", "primaryImage": true, "type": "Image", @@ -30,8 +30,8 @@ Object { }, Object { "effectiveUrl": "http://www.example.org/assets/product_img/a.jpg", - "imageActualHeight": undefined, - "imageActualWidth": undefined, + "imageActualHeight": 110, + "imageActualWidth": 110, "name": "front S", "primaryImage": true, "type": "Image", diff --git a/src/app/core/models/product/product.mapper.spec.ts b/src/app/core/models/product/product.mapper.spec.ts index a3c7046a89..da6fe7e07f 100644 --- a/src/app/core/models/product/product.mapper.spec.ts +++ b/src/app/core/models/product/product.mapper.spec.ts @@ -188,7 +188,7 @@ describe('Product Mapper', () => { expect(stub.name).toEqual('productName'); expect(stub.shortDescription).toEqual('productDescription'); expect(stub.sku).toEqual('productSKU'); - verify(imageMapper.fromImages(anything())).once(); + verify(imageMapper.fromImageUrl(anything())).once(); verify(attachmentMapper.fromAttachments(anything())).never(); }); diff --git a/src/app/core/models/product/product.mapper.ts b/src/app/core/models/product/product.mapper.ts index fb086308e4..b1b97a161f 100644 --- a/src/app/core/models/product/product.mapper.ts +++ b/src/app/core/models/product/product.mapper.ts @@ -122,28 +122,7 @@ export class ProductMapper { shortDescription: data.description, name: data.title, sku, - images: this.imageMapper.fromImages([ - { - effectiveUrl: retrieveStubAttributeValue(data, 'image'), - name: 'front M', - primaryImage: true, - type: 'Image', - typeID: 'M', - viewID: 'front', - imageActualHeight: undefined, - imageActualWidth: undefined, - }, - { - effectiveUrl: retrieveStubAttributeValue(data, 'image'), - name: 'front S', - primaryImage: true, - type: 'Image', - typeID: 'S', - viewID: 'front', - imageActualHeight: undefined, - imageActualWidth: undefined, - }, - ]), + images: this.imageMapper.fromImageUrl(retrieveStubAttributeValue(data, 'image')), manufacturer: retrieveStubAttributeValue(data, 'manufacturer'), available: this.calculateAvailable( retrieveStubAttributeValue(data, 'availability'), diff --git a/src/app/pages/category/category-image/category-image.component.ts b/src/app/pages/category/category-image/category-image.component.ts index b0adbf86b0..ac3e6cb554 100644 --- a/src/app/pages/category/category-image/category-image.component.ts +++ b/src/app/pages/category/category-image/category-image.component.ts @@ -16,7 +16,7 @@ export class CategoryImageComponent implements OnChanges { */ @Input() category: Category; - categoryImageUrl = '/assets/img/not_available.png'; + categoryImageUrl = '/assets/img/not-available.svg'; ngOnChanges() { this.setCategoryImageUrl(); diff --git a/src/app/pages/product/product-images/product-images.component.html b/src/app/pages/product/product-images/product-images.component.html index 70daca06f9..01130d46ac 100644 --- a/src/app/pages/product/product-images/product-images.component.html +++ b/src/app/pages/product/product-images/product-images.component.html @@ -1,6 +1,6 @@