diff --git a/CHANGELOG.md b/CHANGELOG.md index 011abfded..a85de5c05 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 +- `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 diff --git a/docs/SKUSelector.md b/docs/SKUSelector.md index eb7a78a75..2e23e6f19 100644 --- a/docs/SKUSelector.md +++ b/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` | diff --git a/react/components/SKUSelector/Wrapper.tsx b/react/components/SKUSelector/Wrapper.tsx index f08e31a21..659ac00b2 100644 --- a/react/components/SKUSelector/Wrapper.tsx +++ b/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} diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index ee71f1611..7a52421a4 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/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 ( = ({ thumbnailImage, variationsSpacing, showVariationsLabels = 'variation', + variationsWithSingleValueAreVisibles = true, displayMode = 'default', hideImpossibleCombinations = true, disableUnavailableSelectOptions = false, @@ -415,6 +417,7 @@ const SKUSelectorContainer: FC = ({ variationsSpacing={variationsSpacing} selectedVariations={selectedVariations} showVariationsLabels={showVariationsLabels} + variationsWithSingleValueAreVisibles={variationsWithSingleValueAreVisibles} showValueForVariation={showValueForVariation} hideImpossibleCombinations={hideImpossibleCombinations} disableUnavailableSelectOptions={disableUnavailableSelectOptions}