Merge pull request #300 from FlavioOdas/feature/label-match-criteria

Feature/label match criteria

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.70.0] - 2021-03-08
 

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` | `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` |
 | `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:

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",

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 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",

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",

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",

react/ProductSummaryImage.tsx

@@ -32,12 +32,20 @@ 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 = {
@@ -88,11 +96,15 @@ function getHoverImage({
   hoverImage,
   hoverImageLabel,
 }: GetHoverImageParams) {
-  const { criteria = 'label', label = hoverImageLabel, index } =
-    hoverImage ?? {}
+  const {
+    criteria = 'label',
+    label = hoverImageLabel,
+    labelMatchCriteria = 'exact',
+    index,
+  } = hoverImage ?? {}
 
   if (criteria === 'label') {
-    return findImageByLabel(images, label)
+    return findImageByLabel(images, label, labelMatchCriteria)
   }
 
   if (criteria === 'index') {
@@ -184,12 +196,17 @@ function BadgeWrapper({
 
 function findImageByLabel(
   images: ProductSummaryTypes.SKU['images'],
-  selectedLabel: string | undefined
+  selectedLabel: string | undefined,
+  labelMatchCriteria?: ImageLabelMatchCriteria
 ) {
   if (!selectedLabel) {
     return null
   }
 
+  if (labelMatchCriteria === 'contains') {
+    return images.find(({ imageLabel }) => imageLabel?.includes(selectedLabel))
+  }
+
   return images.find(({ imageLabel }) => imageLabel === selectedLabel)
 }
 
@@ -256,7 +273,7 @@ interface Props {
   /**
    * @default ""
    */
-  mainImageLabel?: string
+  mainImageLabel?: string | MainImageLabel
   /**
    * @default ""
    * @deprecated
@@ -367,7 +384,14 @@ function ProductImage({
   })
 
   if (selectedImageVariationSKU == null && mainImageLabel) {
-    const mainImage = findImageByLabel(images, mainImageLabel)
+    const mainImage =
+      typeof mainImageLabel === 'string'
+        ? findImageByLabel(images, mainImageLabel)
+        : findImageByLabel(
+            images,
+            mainImageLabel.label,
+            mainImageLabel.labelMatchCriteria
+          )
 
     if (mainImage) {
       skuImageUrl = mainImage.imageUrl
@@ -501,6 +525,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',
+                },
               },
             },
           ],