Skip to content

Commit 5e3e197

Browse files
mihaidanieldumitrumihaidanieldumitru
committed
Added Prop hideUnavailableVariations that enables hiding unavailable variations from DOM
1 parent 1c0cac2 commit 5e3e197

File tree

9 files changed

+64
-30
lines changed

9 files changed

+64
-30
lines changed

‎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 `hideUnavailableVariations` that enables hiding unavailable variations from DOM
13+
1014
## [3.173.1] - 2024-07-09
1115

1216
### Fixed

‎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+
| `hideUnavailableVariations`|`boolean`| When this prop is set to `true` all unavailable variations will not be rendered.|`false`|
6768

6869
- **`visibleVariations` props**
6970

‎react/components/SKUSelector/Wrapper.tsx‎

Lines changed: 2 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+
hideUnavailableVariations?: boolean
173174
/** Used to override default CSS handles */
174175
classes?: CssHandlesTypes.CustomClasses<typeof SKU_SELECTOR_CSS_HANDLES>
175176
}
@@ -262,6 +263,7 @@ function SKUSelectorWrapper(props: Props) {
262263
sliderArrowSize={props.sliderArrowSize}
263264
sliderDisplayThreshold={props.sliderDisplayThreshold}
264265
sortVariationsByLabel={props.sortVariationsByLabel}
266+
hideUnavailableVariations={props.hideUnavailableVariations}
265267
/>
266268
</SKUSelectorCssHandlesProvider>
267269
)

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

Lines changed: 6 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+
hideUnavailableVariations?: 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+
hideUnavailableVariations,
324329
}: Props) {
325330
const { handles } = useSKUSelectorCssHandles()
326331
const variationsSpacing = getValidMarginBottom(marginBottomProp)
@@ -415,6 +420,7 @@ function SKUSelector({
415420
sliderDisplayThreshold={sliderDisplayThreshold}
416421
sliderArrowSize={sliderArrowSize}
417422
sliderItemsPerPage={sliderItemsPerPage}
423+
hideUnavailableVariations={hideUnavailableVariations}
418424
/>
419425
)
420426
})}

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

Lines changed: 12 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+
hideUnavailableVariations?: boolean
3637
}
3738

3839
const ITEMS_VISIBLE_THRESHOLD = 2
@@ -60,8 +61,13 @@ const Variation: FC<Props> = ({
6061
sliderArrowSize,
6162
sliderDisplayThreshold,
6263
sliderItemsPerPage,
64+
hideUnavailableVariations,
6365
}) => {
64-
const { originalName, name, options } = variation
66+
const { originalName, name, options: initialOptions } = variation
67+
68+
const options = hideUnavailableVariations
69+
? initialOptions.filter(option => option.available)
70+
: [...initialOptions]
6571

6672
const visibleItemsWhenCollapsed = maxItems - ITEMS_VISIBLE_THRESHOLD
6773

@@ -88,6 +94,11 @@ const Variation: FC<Props> = ({
8894
)
8995

9096
const showAllAction = useCallback(() => setShowAll(true), [setShowAll])
97+
98+
if (options.length === 0) {
99+
return null
100+
}
101+
91102
const containerClasses = classnames(
92103
'flex flex-column',
93104
containerClassesProp,

‎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+
hideUnavailableVariations?: boolean
190191
}
191192

192193
const getNewSelectedVariations = (
@@ -254,6 +255,7 @@ const SKUSelectorContainer: FC<Props> = ({
254255
tablet: 2,
255256
phone: 1,
256257
},
258+
hideUnavailableVariations = false,
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+
hideUnavailableVariations={hideUnavailableVariations}
428431
/>
429432
)
430433
}

‎react/components/SKUSelector/styles.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
1616
.skuSelectorTextContainer {
1717
}
1818

19-
.skuSelectorSelectContainer {}
19+
.skuSelectorSelectContainer {
20+
}
2021

2122
.skuSelectorItem {
2223
font-size: 90%;
2324
height: 36px;
25+
display: block !important;
2426
}
2527

2628
.skuSelectorItemImage {

‎react/package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
"apollo-cache-inmemory": "^1.4.3",
4848
"babel-eslint": "^10.1.0",
4949
"typescript": "3.9.7",
50-
"vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form",
51-
"vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql",
50+
"vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.24.3/public/@types/vtex.address-form",
51+
"vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.16.0/public/@types/vtex.apps-graphql",
5252
"vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources",
5353
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.1/public/@types/vtex.css-handles",
5454
"vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
@@ -64,13 +64,14 @@
6464
"vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime",
6565
"vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values",
6666
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text",
67-
"vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql",
68-
"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",
67+
"vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.60.1/public/@types/vtex.search-graphql",
68+
"vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/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-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql",
70+
"vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.173.0/public/@types/vtex.store-components",
71+
"vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.171.0/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",
72-
"vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image",
73-
"vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources",
73+
"vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.21.0/public/@types/vtex.store-image",
74+
"vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources",
7475
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
7576
},
7677
"resolutions": {

‎react/yarn.lock‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5292,13 +5292,13 @@ validate-npm-package-license@^3.0.1:
52925292
spdx-correct "^3.0.0"
52935293
spdx-expression-parse "^3.0.0"
52945294

5295-
"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form":
5296-
version "4.22.8"
5297-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form#3df049602b25e54cffe543a9f61f9b01043d9413"
5295+
"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.24.3/public/@types/vtex.address-form":
5296+
version "4.24.3"
5297+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.24.3/public/@types/vtex.address-form#001990f5774e8b2175d14536c01df3981356e2a2"
52985298

5299-
"vtex.apps-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql":
5300-
version "3.15.0"
5301-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql#eae9419b63948f1162541e71f90292a3bae07d6a"
5299+
"vtex.apps-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.16.0/public/@types/vtex.apps-graphql":
5300+
version "3.16.0"
5301+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.16.0/public/@types/vtex.apps-graphql#b1129c749b82d5eb1afe5e2c5b37cb6dc177ed75"
53025302

53035303
"vtex.checkout-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources":
53045304
version "0.49.0"
@@ -5360,33 +5360,37 @@ validate-npm-package-license@^3.0.1:
53605360
version "0.16.0"
53615361
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text#0cdcaccffb37ae0d025894ba7055f69bc3c9aa30"
53625362

5363-
"vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql":
5364-
version "0.58.0"
5365-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql#e0227a47b862277d2b9b4744f114e241afa158e4"
5363+
"vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.60.1/public/@types/vtex.search-graphql":
5364+
version "0.60.1"
5365+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.60.1/public/@types/vtex.search-graphql#4e59e3577351d967e4b5c9594d4970783ee543bb"
53665366

5367-
"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":
5368-
version "2.2.3"
5369-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator#56c520e45e61572c253542572c153eb1ad0f993f"
5367+
"vtex.shipping-estimate-translator@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator":
5368+
version "2.3.0"
5369+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator#47cd5baf775e33d3c623c56bbe223acca703faf7"
53705370

53715371
"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout":
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-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql":
5376-
version "2.170.1"
5377-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql#7e087ac00c2abf0a2e06ef5551110d0de5b7fe58"
5375+
"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.173.0/public/@types/vtex.store-components":
5376+
version "3.173.0"
5377+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.173.0/public/@types/vtex.store-components#c57196f89906ac33d5fadde06685c9fb365d9891"
5378+
5379+
"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.171.0/public/@types/vtex.store-graphql":
5380+
version "2.171.0"
5381+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.171.0/public/@types/vtex.store-graphql#97d4e6caab10537776f25956ca92e73828d7f1ba"
53785382

53795383
"vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons":
53805384
version "0.18.0"
53815385
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons#0ee94d549aa283ce3a13ab987c13eac4fdfd1bba"
53825386

5383-
"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image":
5384-
version "0.20.0"
5385-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image#c0b627efa82e3e224b1ed48416836213fb204952"
5387+
"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.21.0/public/@types/vtex.store-image":
5388+
version "0.21.0"
5389+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.21.0/public/@types/vtex.store-image#5bf4e2d3857e92ac91a8de166b402f04e249467c"
53865390

5387-
"vtex.store-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources":
5388-
version "0.93.0"
5389-
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources#f7d82498aa2871d25df89c54f8fff2f5a7ac22f7"
5391+
"vtex.store-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources":
5392+
version "0.96.0"
5393+
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources#6c281dd03ba28beeed38f4538c2068753d824f0d"
53905394

53915395
"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide":
53925396
version "9.146.9"

0 commit comments

Comments
 (0)