From 98b9bc3dfe2bf48fd92a6981be3a1dd421ef01a5 Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Mon, 25 Jan 2021 11:24:14 -0300 Subject: [PATCH 1/9] feat: adding label match criteria --- messages/context.json | 1 + messages/en.json | 1 + messages/es.json | 1 + messages/pt.json | 1 + react/ProductSummaryImage.tsx | 40 +++++++++++++++++++++++++++++------ 5 files changed, 37 insertions(+), 7 deletions(-) diff --git a/messages/context.json b/messages/context.json index 71a259df..b3237e71 100644 --- a/messages/context.json +++ b/messages/context.json @@ -36,6 +36,7 @@ "admin/editor.productSummaryImage.hoverImage.criteria.title": "admin/editor.productSummaryImage.hoverImage.criteria.title", "admin/editor.productSummaryImage.hoverImage.criteria.index": "admin/editor.productSummaryImage.hoverImage.criteria.index", "admin/editor.productSummaryImage.hoverImage.criteria.label": "admin/editor.productSummaryImage.hoverImage.criteria.label", + "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria", "admin/editor.productSummaryBuyButton.title": "admin/editor.productSummaryBuyButton.title", "admin/editor.productSummaryName.title": "admin/editor.productSummaryName.title", "admin/editor.product-summary-specification-badges.title": "admin/editor.product-summary-specification-badges.title", diff --git a/messages/en.json b/messages/en.json index 19535e53..1a67dd1e 100644 --- a/messages/en.json +++ b/messages/en.json @@ -35,6 +35,7 @@ "admin/editor.productSummaryImage.hoverImageLabel.description": "This property is deprecated. Use the criteria property instead", "admin/editor.productSummaryImage.hoverImage.criteria.title": "Criteria for hover image selection", "admin/editor.productSummaryImage.hoverImage.criteria.label": "Hover Image Label", + "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Hover image label search criteria (exact: finds the image that matches exactly the name filled in 'Hover Image Label' field | contains: finds the first image that contains the text filled in 'Hover Image Label' field)", "admin/editor.productSummaryImage.hoverImage.criteria.index": "Hover Image Index", "admin/editor.productSummaryBuyButton.title": "Product Summary Buy Button", "admin/editor.productSummaryName.title": "Product Summary Name", diff --git a/messages/es.json b/messages/es.json index 9a28f4da..e009c49e 100644 --- a/messages/es.json +++ b/messages/es.json @@ -35,6 +35,7 @@ "admin/editor.productSummaryImage.hoverImageLabel.description": "Esta propiedad ha sido descontinuada. Usar la propiedad de tipo de selección", "admin/editor.productSummaryImage.hoverImage.criteria.title": "Tipo de selección para imagen secundaria", "admin/editor.productSummaryImage.hoverImage.criteria.label": "Etiqueta de imagen secundaria", + "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Criterios de búsqueda de la etiqueta de imagen secundaria (exact: busca el nombre exacto definido en la etiqueta | contains: busca la primera imagen que contiene el texto definido en la etiqueta)", "admin/editor.productSummaryImage.hoverImage.criteria.index": "Número de imagen secundaria", "admin/editor.productSummaryBuyButton.title": "Botón de compra", "admin/editor.productSummaryName.title": "Nombre de Resumen del producto", diff --git a/messages/pt.json b/messages/pt.json index ce64bba3..4f8e85a5 100644 --- a/messages/pt.json +++ b/messages/pt.json @@ -35,6 +35,7 @@ "admin/editor.productSummaryImage.hoverImageLabel.description": "Esta propriedade foi descontinuada. Use a propriedade de tipo de seleção", "admin/editor.productSummaryImage.hoverImage.criteria.title": "Tipo de seleção para imagem secundária", "admin/editor.productSummaryImage.hoverImage.criteria.label": "Rótulo da imagem secundária", + "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Critério de busca do rótulo da imagem secundária (exact: busca pelo nome exato definido no rótulo | contains: busca a primeira imagem que conter o texto definido no rótulo)", "admin/editor.productSummaryImage.hoverImage.criteria.index": "Número da imagem secundária", "admin/editor.productSummaryBuyButton.title": "Botão de compra", "admin/editor.productSummaryName.title": "Nome do resumo do produto", diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx index b8605ab2..92e56bb7 100644 --- a/react/ProductSummaryImage.tsx +++ b/react/ProductSummaryImage.tsx @@ -31,12 +31,21 @@ const CSS_HANDLES = [ const MAX_SIZE = 500 const DEFAULT_SIZE = 300 +type ImageLabelMatchCriteria = 'exact' | 'contains' + +type MainImageLabel = { + label?: string + labelMatchCriteria?: ImageLabelMatchCriteria +} + type HoverImageCriteria = 'label' | 'index' + type HoverImage = { label?: string index?: number criteria?: HoverImageCriteria + labelMatchCriteria?: ImageLabelMatchCriteria } type GetImageSrcParams = { @@ -87,11 +96,13 @@ function getHoverImage({ hoverImage, hoverImageLabel, }: GetHoverImageParams) { - const { criteria = 'label', label = hoverImageLabel, index } = + const { criteria = 'label', index } = hoverImage ?? {} + const label = hoverImage?.label ?? hoverImageLabel + if (criteria === 'label') { - return findImageByLabel(images, label) + return findImageByLabel(images, label, hoverImage?.labelMatchCriteria) } if (criteria === 'index') { @@ -183,12 +194,17 @@ function BadgeWrapper({ function findImageByLabel( images: ProductSummaryTypes.SKU['images'], - selectedLabel: string | undefined + selectedLabel: string | undefined, + labelMatchCriteria: ImageLabelMatchCriteria | undefined = 'exact' ) { if (!selectedLabel) { return null } + if(labelMatchCriteria === 'contains') { + return images.find(({ imageLabel }) => imageLabel?.indexOf(selectedLabel) !== -1) + } + return images.find(({ imageLabel }) => imageLabel === selectedLabel) } @@ -255,7 +271,7 @@ interface Props { /** * @default "" */ - mainImageLabel?: string + mainImageLabel?: MainImageLabel /** * @default "" * @deprecated @@ -280,7 +296,7 @@ function ProductImage({ showBadge = true, badgeText, displayMode = 'normal', - mainImageLabel = '', + mainImageLabel, hoverImageLabel = '', hoverImage, showCollections = false, @@ -360,8 +376,8 @@ function ProductImage({ hoverImageLabel, }) - if (selectedImageVariationSKU == null && mainImageLabel) { - const mainImage = findImageByLabel(images, mainImageLabel) + if (selectedImageVariationSKU == null && mainImageLabel?.label) { + const mainImage = findImageByLabel(images, mainImageLabel.label, mainImageLabel.labelMatchCriteria) if (mainImage) { skuImageUrl = mainImage.imageUrl @@ -495,6 +511,16 @@ ProductImage.schema = { 'admin/editor.productSummaryImage.hoverImage.criteria.label', type: 'string', }, + labelMatchCriteria: { + title: + 'admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria', + widget: { + "ui:widget": "radio" + }, + type: 'string', + enum: ['exact', 'contains'], + default: 'exact' + }, }, }, ], From 31dcf0d453b99e8a387891b475cf54ac508555b0 Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Mon, 25 Jan 2021 15:08:11 -0300 Subject: [PATCH 2/9] docs: filling product summary image docs --- docs/ProductSummaryImage.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/ProductSummaryImage.md b/docs/ProductSummaryImage.md index ea4cb078..aa8243cc 100644 --- a/docs/ProductSummaryImage.md +++ b/docs/ProductSummaryImage.md @@ -39,20 +39,29 @@ | `showCollections` | `boolean` | Whether collection badges (if there are any) will be displayed (`true`) or not (`false`). | `false` | | `displayMode` | `enum` | Defines the Product Summary Image display mode. Possible values are: `normal` and `inline`. | `normal` | | `placeholder` | `string` | Defines the Product Summary Image placeholder image. | `undefined` | -| `mainImageLabel` | `string` | Text value that matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. If you set a label and no match is found, the main image of the product will be shown instead. | `undefined`| -| `hoverImageLabel` | `string` | ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red) Text value that matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be displayed when the user is hovering. If you set a label and no match is found, no image will be displayed during the hover. *Caution*: Use the `hoverImage` prop instead. | `undefined` | +| `mainImageLabel` | `object` | Matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. | `undefined`| +| `hoverImageLabel` | `string` | ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red) Text value that matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be displayed when the user is hovering. If you set a label and no match is found, no image will be displayed during the hover. *Caution*: Use the `hoverImage` prop instead. | `undefined` | | `hoverImage` | `object` | Defines which criteria should be used to define the hover image according to the product images in the admin's Catalog. | `undefined`| | `width` | `object` | Defines the Product Summary Image width. | `undefined` | | `height` | `object` | Defines the Product Summary Image height. | `undefined` | | `aspectRatio` | `object` | Aspect ratio of the Product Summary Image. It defines whether the image should be displayed in a square, portrait, landscape or in another format. The prop value should follow the [common aspect ratio notation](https://en.wikipedia.org/wiki/Aspect_ratio_(image)), which gives two numbers separated by a colon. For example: `1:1` for a square format or `3:4` for an upright portrait. Note that this prop won't work if you've already configured the `width` or `height` props. | `undefined` | | `maxHeight` | `object` | Defines the Product Summary Image max height. Note that this prop won't work if you've already configured the `width` or `height` props.| `undefined` | +- `mainImageLabel` object: + +| Prop name | Type | Description | Default value | +| :--------:| :--: | :---------: | :-----------: | +| `label` | `string` | Text value that matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. If you set a label and no match is found, the main image of the product will be shown instead. | `undefined` | +| `labelMatchCriteria`| `enum` | Criteria to define if the image's `label` searched value should be exactly as provided or if it just needs to contain the substring anywhere in the image's `label`. Possible values are: `exact` (finds the image that matches exactly the string filled in `label` field) and `contains` (finds the first image that contains the substring filled in `label` field). | `exact` | + + - `hoverImage` object: | Prop name | Type | Description | Default value | | :--------:| :--: | :---------: | :-----------: | | `criteria` | `enum` | Criteria that should be used to define the hover image according to the product images in the admin's Catalog. Possible values are: `label` (the hover image will be the one that matches the `label` value) and `index` (the hover image should be the one with the same `index` value). | `label` | | `label` | `string` | Text string to match the desired image's `label` value. If no match is found, no image will be displayed during the hover. *Caution*: This prop should only be used when the `criteria` prop is set as `label`. | `undefined` | +| `labelMatchCriteria` | `enum` | Criteria to define if the image's `label` searched value should be exactly as provided or if it just needs to contain the substring anywhere in the image's `label`. Possible values are: `exact` (finds the image that matches exactly the string filled in `label` field) and `contains` (finds the first image that contains the substring filled in `label` field). *Caution*: This prop should only be used when the `criteria` prop is set as `label`. | `exact` | | `index` | `number` | Index number to match with the desired image's. If no match is found, no image will be displayed during the hover. *Caution*: This prop should only be used when the `criteria` prop is set as `index`. | `undefined` | - `width` object: From 5be6f7070e6dad7f0b12ed1d0dcb7ddd01c0b79f Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Mon, 25 Jan 2021 15:16:02 -0300 Subject: [PATCH 3/9] docs: changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd923fa4..ce40ad07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- Option to match only a substring when defining the Product Image's label. ## [2.68.2] - 2021-01-12 ### Fixed From 29828225b579d6e38aa4459981b880d2c34d692d Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Mon, 25 Jan 2021 18:13:44 -0300 Subject: [PATCH 4/9] refactor: lint fix --- react/ProductSummaryImage.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx index 92e56bb7..1ee2331a 100644 --- a/react/ProductSummaryImage.tsx +++ b/react/ProductSummaryImage.tsx @@ -40,7 +40,6 @@ type MainImageLabel = { type HoverImageCriteria = 'label' | 'index' - type HoverImage = { label?: string index?: number @@ -96,8 +95,7 @@ function getHoverImage({ hoverImage, hoverImageLabel, }: GetHoverImageParams) { - const { criteria = 'label', index } = - hoverImage ?? {} + const { criteria = 'label', index } = hoverImage ?? {} const label = hoverImage?.label ?? hoverImageLabel @@ -195,16 +193,18 @@ function BadgeWrapper({ function findImageByLabel( images: ProductSummaryTypes.SKU['images'], selectedLabel: string | undefined, - labelMatchCriteria: ImageLabelMatchCriteria | undefined = 'exact' + labelMatchCriteria: ImageLabelMatchCriteria | undefined = 'exact' ) { if (!selectedLabel) { return null } - if(labelMatchCriteria === 'contains') { - return images.find(({ imageLabel }) => imageLabel?.indexOf(selectedLabel) !== -1) + if (labelMatchCriteria === 'contains') { + return images.find( + ({ imageLabel }) => imageLabel?.indexOf(selectedLabel) !== -1 + ) } - + return images.find(({ imageLabel }) => imageLabel === selectedLabel) } @@ -377,7 +377,11 @@ function ProductImage({ }) if (selectedImageVariationSKU == null && mainImageLabel?.label) { - const mainImage = findImageByLabel(images, mainImageLabel.label, mainImageLabel.labelMatchCriteria) + const mainImage = findImageByLabel( + images, + mainImageLabel.label, + mainImageLabel.labelMatchCriteria + ) if (mainImage) { skuImageUrl = mainImage.imageUrl @@ -515,11 +519,11 @@ ProductImage.schema = { title: 'admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria', widget: { - "ui:widget": "radio" + 'ui:widget': 'radio', }, type: 'string', enum: ['exact', 'contains'], - default: 'exact' + default: 'exact', }, }, }, From ba6cda830179cc700ea59a1c1c4cef83318d2f95 Mon Sep 17 00:00:00 2001 From: Flavio Odas Junior Date: Wed, 27 Jan 2021 16:33:58 -0300 Subject: [PATCH 5/9] Update en.json --- messages/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/messages/en.json b/messages/en.json index 1a67dd1e..bb8b3c2e 100644 --- a/messages/en.json +++ b/messages/en.json @@ -35,7 +35,7 @@ "admin/editor.productSummaryImage.hoverImageLabel.description": "This property is deprecated. Use the criteria property instead", "admin/editor.productSummaryImage.hoverImage.criteria.title": "Criteria for hover image selection", "admin/editor.productSummaryImage.hoverImage.criteria.label": "Hover Image Label", - "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Hover image label search criteria (exact: finds the image that matches exactly the name filled in 'Hover Image Label' field | contains: finds the first image that contains the text filled in 'Hover Image Label' field)", + "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Hover image label search criteria (exact: finds the image that is an exact match with the name filled in the 'Hover Image Label' field | contains: finds the first image that contains the text filled in 'Hover Image Label' field)", "admin/editor.productSummaryImage.hoverImage.criteria.index": "Hover Image Index", "admin/editor.productSummaryBuyButton.title": "Product Summary Buy Button", "admin/editor.productSummaryName.title": "Product Summary Name", From a828515b1535ff9a832e2b7b37ec475c37af1f4f Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Thu, 4 Feb 2021 09:21:23 -0300 Subject: [PATCH 6/9] refactor: PR changes --- react/ProductSummaryImage.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx index 1ee2331a..6f984e53 100644 --- a/react/ProductSummaryImage.tsx +++ b/react/ProductSummaryImage.tsx @@ -193,16 +193,14 @@ function BadgeWrapper({ function findImageByLabel( images: ProductSummaryTypes.SKU['images'], selectedLabel: string | undefined, - labelMatchCriteria: ImageLabelMatchCriteria | undefined = 'exact' + labelMatchCriteria: ImageLabelMatchCriteria = 'exact' ) { if (!selectedLabel) { return null } if (labelMatchCriteria === 'contains') { - return images.find( - ({ imageLabel }) => imageLabel?.indexOf(selectedLabel) !== -1 - ) + return images.find(({ imageLabel }) => imageLabel?.includes(selectedLabel)) } return images.find(({ imageLabel }) => imageLabel === selectedLabel) From 754b6e594cf9809b8a604d6e49f6ce04eb7039fc Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Fri, 19 Feb 2021 14:03:36 -0300 Subject: [PATCH 7/9] refactor: code readability --- react/ProductSummaryImage.tsx | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx index 6f984e53..f8a0edfe 100644 --- a/react/ProductSummaryImage.tsx +++ b/react/ProductSummaryImage.tsx @@ -95,12 +95,15 @@ function getHoverImage({ hoverImage, hoverImageLabel, }: GetHoverImageParams) { - const { criteria = 'label', index } = hoverImage ?? {} - - const label = hoverImage?.label ?? hoverImageLabel + const { + criteria = 'label', + label = hoverImageLabel, + labelMatchCriteria = 'exact', + index, + } = hoverImage ?? {} if (criteria === 'label') { - return findImageByLabel(images, label, hoverImage?.labelMatchCriteria) + return findImageByLabel(images, label, labelMatchCriteria) } if (criteria === 'index') { @@ -193,7 +196,7 @@ function BadgeWrapper({ function findImageByLabel( images: ProductSummaryTypes.SKU['images'], selectedLabel: string | undefined, - labelMatchCriteria: ImageLabelMatchCriteria = 'exact' + labelMatchCriteria: ImageLabelMatchCriteria ) { if (!selectedLabel) { return null @@ -374,12 +377,10 @@ function ProductImage({ hoverImageLabel, }) - if (selectedImageVariationSKU == null && mainImageLabel?.label) { - const mainImage = findImageByLabel( - images, - mainImageLabel.label, - mainImageLabel.labelMatchCriteria - ) + const { label, labelMatchCriteria = 'exact' } = mainImageLabel ?? {} + + if (selectedImageVariationSKU == null && label) { + const mainImage = findImageByLabel(images, label, labelMatchCriteria) if (mainImage) { skuImageUrl = mainImage.imageUrl From 4cfe2bb32a4122154fc25fc717d9249abec2f16e Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Fri, 5 Mar 2021 11:48:50 -0300 Subject: [PATCH 8/9] fix: adapting changes to previous label type --- docs/ProductSummaryImage.md | 2 +- react/ProductSummaryImage.tsx | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/docs/ProductSummaryImage.md b/docs/ProductSummaryImage.md index aa8243cc..e41daccf 100644 --- a/docs/ProductSummaryImage.md +++ b/docs/ProductSummaryImage.md @@ -39,7 +39,7 @@ | `showCollections` | `boolean` | Whether collection badges (if there are any) will be displayed (`true`) or not (`false`). | `false` | | `displayMode` | `enum` | Defines the Product Summary Image display mode. Possible values are: `normal` and `inline`. | `normal` | | `placeholder` | `string` | Defines the Product Summary Image placeholder image. | `undefined` | -| `mainImageLabel` | `object` | Matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. | `undefined`| +| `mainImageLabel` | `string | object` | Matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. | `undefined`| | `hoverImageLabel` | `string` | ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red) Text value that matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be displayed when the user is hovering. If you set a label and no match is found, no image will be displayed during the hover. *Caution*: Use the `hoverImage` prop instead. | `undefined` | | `hoverImage` | `object` | Defines which criteria should be used to define the hover image according to the product images in the admin's Catalog. | `undefined`| | `width` | `object` | Defines the Product Summary Image width. | `undefined` | diff --git a/react/ProductSummaryImage.tsx b/react/ProductSummaryImage.tsx index f8a0edfe..5e2d6650 100644 --- a/react/ProductSummaryImage.tsx +++ b/react/ProductSummaryImage.tsx @@ -196,7 +196,7 @@ function BadgeWrapper({ function findImageByLabel( images: ProductSummaryTypes.SKU['images'], selectedLabel: string | undefined, - labelMatchCriteria: ImageLabelMatchCriteria + labelMatchCriteria?: ImageLabelMatchCriteria ) { if (!selectedLabel) { return null @@ -272,7 +272,7 @@ interface Props { /** * @default "" */ - mainImageLabel?: MainImageLabel + mainImageLabel?: string | MainImageLabel /** * @default "" * @deprecated @@ -297,7 +297,7 @@ function ProductImage({ showBadge = true, badgeText, displayMode = 'normal', - mainImageLabel, + mainImageLabel = '', hoverImageLabel = '', hoverImage, showCollections = false, @@ -377,10 +377,15 @@ function ProductImage({ hoverImageLabel, }) - const { label, labelMatchCriteria = 'exact' } = mainImageLabel ?? {} - - if (selectedImageVariationSKU == null && label) { - const mainImage = findImageByLabel(images, label, labelMatchCriteria) + if (selectedImageVariationSKU == null && mainImageLabel) { + const mainImage = + typeof mainImageLabel === 'string' + ? findImageByLabel(images, mainImageLabel) + : findImageByLabel( + images, + mainImageLabel.label, + mainImageLabel.labelMatchCriteria + ) if (mainImage) { skuImageUrl = mainImage.imageUrl From 43aa00644569a6dc07b2b6fe9e71d0492fe93141 Mon Sep 17 00:00:00 2001 From: Flavio Odas Date: Fri, 5 Mar 2021 13:54:15 -0300 Subject: [PATCH 9/9] fix: md typo --- docs/ProductSummaryImage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ProductSummaryImage.md b/docs/ProductSummaryImage.md index e41daccf..5dcfdc88 100644 --- a/docs/ProductSummaryImage.md +++ b/docs/ProductSummaryImage.md @@ -39,7 +39,7 @@ | `showCollections` | `boolean` | Whether collection badges (if there are any) will be displayed (`true`) or not (`false`). | `false` | | `displayMode` | `enum` | Defines the Product Summary Image display mode. Possible values are: `normal` and `inline`. | `normal` | | `placeholder` | `string` | Defines the Product Summary Image placeholder image. | `undefined` | -| `mainImageLabel` | `string | object` | Matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. | `undefined`| +| `mainImageLabel` | `string \| object` | Matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component. | `undefined`| | `hoverImageLabel` | `string` | ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red) Text value that matches the value defined in the `imageLabel` field from the admin's Catalog. Once matched, it defines which product image will be displayed when the user is hovering. If you set a label and no match is found, no image will be displayed during the hover. *Caution*: Use the `hoverImage` prop instead. | `undefined` | | `hoverImage` | `object` | Defines which criteria should be used to define the hover image according to the product images in the admin's Catalog. | `undefined`| | `width` | `object` | Defines the Product Summary Image width. | `undefined` |