From e771353622987974bdd39a03cba5550284c4b15e 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 | 8 ++++++++ react/components/SKUSelector/components/Variation.tsx | 7 ++++++- react/components/SKUSelector/index.tsx | 3 +++ react/package.json | 1 + react/yarn.lock | 4 ++++ 8 files changed, 31 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4ebd96f2..0a1b44ded 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.173.1] - 2024-07-09 ### Fixed 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 daeab3ea9..d0d70b0ad 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) { @@ -248,13 +249,16 @@ const variationNameToDisplayVariation = const allNumbers = options.every( (option: any) => !Number.isNaN(option.label) ) + options.sort((a: any, b: any) => { if (allNumbers) { return a.label - b.label } + return a.label < b.label ? -1 : a.label > b.label ? 1 : 0 }) } + return { name, originalName, options } } @@ -321,6 +325,7 @@ function SKUSelector({ sliderArrowSize, sliderItemsPerPage, sortVariationsByLabel = false, + displayModeSelectForColorVariation, }: Props) { const { handles } = useSKUSelectorCssHandles() const variationsSpacing = getValidMarginBottom(marginBottomProp) @@ -415,6 +420,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} /> ) } diff --git a/react/package.json b/react/package.json index 02ac83bc7..32751c72b 100644 --- a/react/package.json +++ b/react/package.json @@ -67,6 +67,7 @@ "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql", "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator", "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout", + "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.172.1/public/@types/vtex.store-components", "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql", "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons", "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image", diff --git a/react/yarn.lock b/react/yarn.lock index 7d596fee2..cb5c4a8f9 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5372,6 +5372,10 @@ validate-npm-package-license@^3.0.1: version "0.24.4" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout#81731b60025929589adeea1ffd3e12eb1d9480e1" +"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.172.1/public/@types/vtex.store-components": + version "3.172.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.172.1/public/@types/vtex.store-components#9c24ca2bba2b611a768a7940d7323dedd3357eba" + "vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql": version "2.170.1" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql#7e087ac00c2abf0a2e06ef5551110d0de5b7fe58"