Skip to content

Commit 0750245

Browse files
mihaidanieldumitrumihaidanieldumitru
committed
Feature displayMode select for Color Variation
1 parent dd52993 commit 0750245

9 files changed

Lines changed: 31 additions & 2 deletions

File tree

‎.prettierignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
CHANGELOG.md

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10+
### Added
11+
12+
- Prop `displayModeSelectForColorVariation` to enable `"displayMode": "select"` for color variations in SKU Selector
13+
1014
## [3.173.0] - 2024-05-28
1115

1216
### Added

‎docs/SKUSelector.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ The `sku-selector` block is mainly used in Product Details Pages (PDPs) to displ
6464
| `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` |
6565
| `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` |
6666
| `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` |
67+
|`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`|
6768

6869
- **`visibleVariations` props**
6970

‎react/components/SKUSelector/Wrapper.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ interface Props {
170170
sliderArrowSize?: number
171171
sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
172172
sortVariationsByLabel?: boolean
173+
displayModeSelectForColorVariation?: boolean
173174
/** Used to override default CSS handles */
174175
classes?: CssHandlesTypes.CustomClasses<typeof SKU_SELECTOR_CSS_HANDLES>
175176
}
@@ -262,6 +263,9 @@ function SKUSelectorWrapper(props: Props) {
262263
sliderArrowSize={props.sliderArrowSize}
263264
sliderDisplayThreshold={props.sliderDisplayThreshold}
264265
sortVariationsByLabel={props.sortVariationsByLabel}
266+
displayModeSelectForColorVariation={
267+
props.displayModeSelectForColorVariation
268+
}
265269
/>
266270
</SKUSelectorCssHandlesProvider>
267271
)

‎react/components/SKUSelector/components/SKUSelector.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ interface Props {
6868
sliderArrowSize: number
6969
sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue<number>
7070
sortVariationsByLabel?: boolean
71+
displayModeSelectForColorVariation?: boolean
7172
}
7273

7374
function isSkuAvailable(item?: SelectorProductItem) {
@@ -248,13 +249,16 @@ const variationNameToDisplayVariation =
248249
const allNumbers = options.every(
249250
(option: any) => !Number.isNaN(option.label)
250251
)
252+
251253
options.sort((a: any, b: any) => {
252254
if (allNumbers) {
253255
return a.label - b.label
254256
}
257+
255258
return a.label < b.label ? -1 : a.label > b.label ? 1 : 0
256259
})
257260
}
261+
258262
return { name, originalName, options }
259263
}
260264

@@ -321,6 +325,7 @@ function SKUSelector({
321325
sliderArrowSize,
322326
sliderItemsPerPage,
323327
sortVariationsByLabel = false,
328+
displayModeSelectForColorVariation,
324329
}: Props) {
325330
const { handles } = useSKUSelectorCssHandles()
326331
const variationsSpacing = getValidMarginBottom(marginBottomProp)
@@ -415,6 +420,9 @@ function SKUSelector({
415420
sliderDisplayThreshold={sliderDisplayThreshold}
416421
sliderArrowSize={sliderArrowSize}
417422
sliderItemsPerPage={sliderItemsPerPage}
423+
displayModeSelectForColorVariation={
424+
displayModeSelectForColorVariation
425+
}
418426
/>
419427
)
420428
})}

‎react/components/SKUSelector/components/Variation.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ interface Props {
3333
sliderDisplayThreshold: number
3434
sliderArrowSize: number
3535
sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue<number>
36+
displayModeSelectForColorVariation?: boolean
3637
}
3738

3839
const ITEMS_VISIBLE_THRESHOLD = 2
@@ -60,6 +61,7 @@ const Variation: FC<Props> = ({
6061
sliderArrowSize,
6162
sliderDisplayThreshold,
6263
sliderItemsPerPage,
64+
displayModeSelectForColorVariation,
6365
}) => {
6466
const { originalName, name, options } = variation
6567

@@ -177,7 +179,10 @@ const Variation: FC<Props> = ({
177179
<div
178180
className={`${styles.skuSelectorOptionsList} w-100 inline-flex flex-wrap ml2 items-center`}
179181
>
180-
{mode === 'select' && !displayImage ? (
182+
{(mode === 'select' && !displayImage) ||
183+
(mode === 'select' &&
184+
displayImage &&
185+
displayModeSelectForColorVariation) ? (
181186
<SelectModeVariation
182187
selectedItem={selectedItem}
183188
displayOptions={displayOptions}

‎react/components/SKUSelector/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ interface Props {
187187
sliderArrowSize?: number
188188
sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
189189
sortVariationsByLabel?: boolean
190+
displayModeSelectForColorVariation?: boolean
190191
}
191192

192193
const getNewSelectedVariations = (
@@ -254,6 +255,7 @@ const SKUSelectorContainer: FC<Props> = ({
254255
tablet: 2,
255256
phone: 1,
256257
},
258+
displayModeSelectForColorVariation,
257259
}) => {
258260
const productContext = useProduct()
259261
const selectedItem = productContext?.selectedItem
@@ -425,6 +427,7 @@ const SKUSelectorContainer: FC<Props> = ({
425427
sliderArrowSize={sliderArrowSize}
426428
sliderItemsPerPage={sliderItemsPerPage}
427429
sortVariationsByLabel={sortVariationsByLabel}
430+
displayModeSelectForColorVariation={displayModeSelectForColorVariation}
428431
/>
429432
)
430433
}

‎react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql",
6868
"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",
6969
"vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout",
70+
"vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.172.1/public/@types/vtex.store-components",
7071
"vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql",
7172
"vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons",
7273
"vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image",

‎react/yarn.lock‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5372,6 +5372,10 @@ validate-npm-package-license@^3.0.1:
53725372
version "0.24.4"
53735373
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout#81731b60025929589adeea1ffd3e12eb1d9480e1"
53745374

5375+
"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.172.1/public/@types/vtex.store-components":
5376+
version "3.172.1"
5377+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.172.1/public/@types/vtex.store-components#9c24ca2bba2b611a768a7940d7323dedd3357eba"
5378+
53755379
"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql":
53765380
version "2.170.1"
53775381
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql#7e087ac00c2abf0a2e06ef5551110d0de5b7fe58"

0 commit comments

Comments
 (0)