From 82f68f59bce3f0d755e89844ea1eaca2c43355ca Mon Sep 17 00:00:00 2001 From: Daniel Dumitru Date: Tue, 27 Feb 2024 14:11:15 +0200 Subject: [PATCH] Feature displayMode select for Color Variation --- CHANGELOG.md | 4 ++++ docs/SKUSelector.md | 1 + react/components/SKUSelector/Wrapper.tsx | 4 ++++ react/components/SKUSelector/components/SKUSelector.tsx | 5 +++++ react/components/SKUSelector/components/Variation.tsx | 7 ++++++- react/components/SKUSelector/index.tsx | 3 +++ 6 files changed, 23 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 99b6f5ba9..743d0c927 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Prop `displayModeSelectForColorVariation` to enable `"displayMode": "select"` for color variations in SKU Selector + ## [3.176.1] - 2024-11-08 ## [3.176.0] - 2024-11-06 diff --git a/docs/SKUSelector.md b/docs/SKUSelector.md index ff58a6cb5..f0f5babaf 100644 --- a/docs/SKUSelector.md +++ b/docs/SKUSelector.md @@ -64,6 +64,7 @@ The `sku-selector` block is mainly used in Product Details Pages (PDPs) to displ | `variationsSpacing` | `number` | Defines the `margin-bottom` size to be applied in the rendered product variations. Possible values range from `0` to `11` (the prop value is not in `px`; every value represents a tachyon class). | `7` | | `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 on the product details page. Please note that no variations will be displayed if you declare a name that does not represent a real product variation or an empty array. There is more information regarding this prop structure below this table. | `undefined` | +|`displayModeSelectForColorVariation`|`boolean`|When `displayMode` prop value is set to `select` and this prop is set to `true` it enables the SKU Selector to render the color variation using `select` mode instead of buttons. This is especially useful in shelves.| `undefined`| - **`visibleVariations` props** diff --git a/react/components/SKUSelector/Wrapper.tsx b/react/components/SKUSelector/Wrapper.tsx index 6ca6e15be..3429ca745 100644 --- a/react/components/SKUSelector/Wrapper.tsx +++ b/react/components/SKUSelector/Wrapper.tsx @@ -170,6 +170,7 @@ interface Props { sliderArrowSize?: number sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue sortVariationsByLabel?: boolean + displayModeSelectForColorVariation?: boolean /** Used to override default CSS handles */ classes?: CssHandlesTypes.CustomClasses } @@ -262,6 +263,9 @@ function SKUSelectorWrapper(props: Props) { sliderArrowSize={props.sliderArrowSize} sliderDisplayThreshold={props.sliderDisplayThreshold} sortVariationsByLabel={props.sortVariationsByLabel} + displayModeSelectForColorVariation={ + props.displayModeSelectForColorVariation + } /> ) diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index 479cb5c2d..ef1d1b6a3 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/react/components/SKUSelector/components/SKUSelector.tsx @@ -68,6 +68,7 @@ interface Props { sliderArrowSize: number sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue sortVariationsByLabel?: boolean + displayModeSelectForColorVariation?: boolean } function isSkuAvailable(item?: SelectorProductItem) { @@ -360,6 +361,7 @@ function SKUSelector({ sliderArrowSize, sliderItemsPerPage, sortVariationsByLabel = false, + displayModeSelectForColorVariation, }: Props) { const { handles } = useSKUSelectorCssHandles() const variationsSpacing = getValidMarginBottom(marginBottomProp) @@ -454,6 +456,9 @@ function SKUSelector({ sliderDisplayThreshold={sliderDisplayThreshold} sliderArrowSize={sliderArrowSize} sliderItemsPerPage={sliderItemsPerPage} + displayModeSelectForColorVariation={ + displayModeSelectForColorVariation + } /> ) })} diff --git a/react/components/SKUSelector/components/Variation.tsx b/react/components/SKUSelector/components/Variation.tsx index 673b02efe..ba3feccbb 100644 --- a/react/components/SKUSelector/components/Variation.tsx +++ b/react/components/SKUSelector/components/Variation.tsx @@ -33,6 +33,7 @@ interface Props { sliderDisplayThreshold: number sliderArrowSize: number sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue + displayModeSelectForColorVariation?: boolean } const ITEMS_VISIBLE_THRESHOLD = 2 @@ -60,6 +61,7 @@ const Variation: FC = ({ sliderArrowSize, sliderDisplayThreshold, sliderItemsPerPage, + displayModeSelectForColorVariation, }) => { const { originalName, name, options } = variation @@ -177,7 +179,10 @@ const Variation: FC = ({
- {mode === 'select' && !displayImage ? ( + {(mode === 'select' && !displayImage) || + (mode === 'select' && + displayImage && + displayModeSelectForColorVariation) ? ( sortVariationsByLabel?: boolean + displayModeSelectForColorVariation?: boolean } const getNewSelectedVariations = ( @@ -254,6 +255,7 @@ const SKUSelectorContainer: FC = ({ tablet: 2, phone: 1, }, + displayModeSelectForColorVariation, }) => { const productContext = useProduct() const selectedItem = productContext?.selectedItem @@ -425,6 +427,7 @@ const SKUSelectorContainer: FC = ({ sliderArrowSize={sliderArrowSize} sliderItemsPerPage={sliderItemsPerPage} sortVariationsByLabel={sortVariationsByLabel} + displayModeSelectForColorVariation={displayModeSelectForColorVariation} /> ) }