SKU Selector [Add variationsWithSingleValueAreVisibles prop]

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
+- `variationsWithSingleValueAreVisibles` prop to `SKUSelector` in order to control whether the SKU variations with only one possible value are displayed or not.
 
 ## [3.159.5] - 2022-06-08
 

docs/SKUSelector.md

@@ -61,6 +61,7 @@ The `sku-selector` block is mainly used in Product Details Pages (PDPs) to displ
 | `showVariationsLabels` | `enum`   | Where variation names should be displayed. Possible values are: `none` (doesn't display the variation names. Replaces the previous `false` behavior), `variation` (shows the variation name as a header of the items. Replaces the previous `true` behavior), `itemValue` (displays the variation name before with each item's value) and `variationAndItemValue` (behaves as `variation` and `itemValue` at the same time).    | `variation` |
 | `thumbnailImage` | `string`  | First image to be displayed. This prop value must be the same text string defined in the desired product image's `imageLabel` field (from the Catalog module). If you use this prop and no image declaring the same text string in its `imageLabel` field is found, any product image will be randomly rendered instead. To apply the `thumbnailImage` configuration, see the [Configuring custom images for the SKU Selector documentation](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-configuring-custom-images-for-the-sku-selector) | `undefined` |
 | `variationsSpacing`  | `number` | Defines the `margin-bottom` size to be applied in the rendered product variations. Possible values are from `0` to `11` (the prop value is not in `px`, every value represents a tachyons class). | `7`   |
+| `variationsWithSingleValueAreVisibles`  | `boolean`  | Whether the SKU variations should be displayed when they only have one possible value (`true`) or not (`false`).  | `true` |
 | `visibility`  | `enum`  | Defines the scenarios in which the SKU selector should be displayed. Possible values are: `always` (it will always be displayed even if the product has only one SKU option) or `more-than-one` (the SKU Selector is only displayed when the product has more than one SKU option).  | `always` |
 | `visibleVariations`  | `array` | Specifies which product variations should be displayed in the product details page. Notice the following: if you declare a name that doesn't represent a real product variation or an empty array, no variations will be displayed. Check out more information regarding this prop structure below this table. | `undefined` |
 

react/components/SKUSelector/Wrapper.tsx

@@ -162,6 +162,7 @@ interface Props {
   thumbnailImage?: string
   visibleVariations?: string[]
   showVariationsLabels?: ShowVariationsLabels
+  variationsWithSingleValueAreVisibles?: boolean
   variationsSpacing?: number
   showVariationsErrorMessage?: boolean
   initialSelection?: InitialSelectionType
@@ -254,6 +255,7 @@ function SKUSelectorWrapper(props: Props) {
         variationsSpacing={props.variationsSpacing}
         showValueForVariation={showValueForVariation}
         showVariationsLabels={props.showVariationsLabels}
+        variationsWithSingleValueAreVisibles={props.variationsWithSingleValueAreVisibles}
         hideImpossibleCombinations={props.hideImpossibleCombinations}
         disableUnavailableSelectOptions={props.disableUnavailableSelectOptions}
         showVariationsErrorMessage={props.showVariationsErrorMessage}

react/components/SKUSelector/components/SKUSelector.tsx

@@ -61,6 +61,7 @@ interface Props {
   imageHeight?: number
   imageWidth?: number
   showVariationsLabels: ShowVariationsLabels
+  variationsWithSingleValueAreVisibles?: boolean
   variationsSpacing?: number
   showVariationsErrorMessage: boolean
   displayMode: DisplayMode
@@ -289,6 +290,7 @@ function SKUSelector({
   displayMode,
   selectedVariations,
   showVariationsLabels,
+  variationsWithSingleValueAreVisibles,
   showValueForVariation,
   hideImpossibleCombinations,
   disableUnavailableSelectOptions,
@@ -361,6 +363,8 @@ function SKUSelector({
       {displayVariations.map((variationOption, index) => {
         const selectedItem = selectedVariations[variationOption.name]
 
+        if ( !variationsWithSingleValueAreVisibles && variationOption.options.length === 1 ) return
+
         return (
           <Variation
             mode={displayMode}

react/components/SKUSelector/index.tsx

@@ -179,6 +179,7 @@ interface Props {
   imageWidth?: number
   thumbnailImage?: string
   showVariationsLabels?: ShowVariationsLabels
+  variationsWithSingleValueAreVisibles?: boolean
   variationsSpacing?: number
   showVariationsErrorMessage?: boolean
   initialSelection?: InitialSelectionType
@@ -239,6 +240,7 @@ const SKUSelectorContainer: FC<Props> = ({
   thumbnailImage,
   variationsSpacing,
   showVariationsLabels = 'variation',
+  variationsWithSingleValueAreVisibles = true,
   displayMode = 'default',
   hideImpossibleCombinations = true,
   disableUnavailableSelectOptions = false,
@@ -415,6 +417,7 @@ const SKUSelectorContainer: FC<Props> = ({
       variationsSpacing={variationsSpacing}
       selectedVariations={selectedVariations}
       showVariationsLabels={showVariationsLabels}
+      variationsWithSingleValueAreVisibles={variationsWithSingleValueAreVisibles}
       showValueForVariation={showValueForVariation}
       hideImpossibleCombinations={hideImpossibleCombinations}
       disableUnavailableSelectOptions={disableUnavailableSelectOptions}