Added Prop hideUnavailableVariations that enables hiding unavailable variations from DOM

Author: mihaidanieldumitru

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Prop `hideUnavailableVariations` that enables hiding unavailable variations from DOM
+
 ## [3.175.1] - 2024-09-11
 
 ### Fixed

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

react/components/SKUSelector/Wrapper.tsx

@@ -170,6 +170,7 @@ interface Props {
   sliderArrowSize?: number
   sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
   sortVariationsByLabel?: boolean
+  hideUnavailableVariations?: boolean
   /** Used to override default CSS handles */
   classes?: CssHandlesTypes.CustomClasses<typeof SKU_SELECTOR_CSS_HANDLES>
 }
@@ -262,6 +263,7 @@ function SKUSelectorWrapper(props: Props) {
         sliderArrowSize={props.sliderArrowSize}
         sliderDisplayThreshold={props.sliderDisplayThreshold}
         sortVariationsByLabel={props.sortVariationsByLabel}
+        hideUnavailableVariations={props.hideUnavailableVariations}
       />
     </SKUSelectorCssHandlesProvider>
   )

react/components/SKUSelector/components/SKUSelector.tsx

@@ -68,6 +68,7 @@ interface Props {
   sliderArrowSize: number
   sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue<number>
   sortVariationsByLabel?: boolean
+  hideUnavailableVariations?: 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,
+  hideUnavailableVariations,
 }: Props) {
   const { handles } = useSKUSelectorCssHandles()
   const variationsSpacing = getValidMarginBottom(marginBottomProp)
@@ -415,6 +420,7 @@ function SKUSelector({
             sliderDisplayThreshold={sliderDisplayThreshold}
             sliderArrowSize={sliderArrowSize}
             sliderItemsPerPage={sliderItemsPerPage}
+            hideUnavailableVariations={hideUnavailableVariations}
           />
         )
       })}

react/components/SKUSelector/components/Variation.tsx

@@ -33,6 +33,7 @@ interface Props {
   sliderDisplayThreshold: number
   sliderArrowSize: number
   sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue<number>
+  hideUnavailableVariations?: boolean
 }
 
 const ITEMS_VISIBLE_THRESHOLD = 2
@@ -60,8 +61,13 @@ const Variation: FC<Props> = ({
   sliderArrowSize,
   sliderDisplayThreshold,
   sliderItemsPerPage,
+  hideUnavailableVariations,
 }) => {
-  const { originalName, name, options } = variation
+  const { originalName, name, options: initialOptions } = variation
+
+  const options = hideUnavailableVariations
+    ? initialOptions.filter(option => option.available)
+    : [...initialOptions]
 
   const visibleItemsWhenCollapsed = maxItems - ITEMS_VISIBLE_THRESHOLD
 
@@ -88,6 +94,11 @@ const Variation: FC<Props> = ({
   )
 
   const showAllAction = useCallback(() => setShowAll(true), [setShowAll])
+
+  if (options.length === 0) {
+    return null
+  }
+
   const containerClasses = classnames(
     'flex flex-column',
     containerClassesProp,

react/components/SKUSelector/index.tsx

@@ -187,6 +187,7 @@ interface Props {
   sliderArrowSize?: number
   sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
   sortVariationsByLabel?: boolean
+  hideUnavailableVariations?: boolean
 }
 
 const getNewSelectedVariations = (
@@ -254,6 +255,7 @@ const SKUSelectorContainer: FC<Props> = ({
     tablet: 2,
     phone: 1,
   },
+  hideUnavailableVariations = false,
 }) => {
   const productContext = useProduct()
   const selectedItem = productContext?.selectedItem
@@ -425,6 +427,7 @@ const SKUSelectorContainer: FC<Props> = ({
       sliderArrowSize={sliderArrowSize}
       sliderItemsPerPage={sliderItemsPerPage}
       sortVariationsByLabel={sortVariationsByLabel}
+      hideUnavailableVariations={hideUnavailableVariations}
     />
   )
 }