Feature displayMode select for Color Variation

vtex-apps · Sep 3, 2024 · f3d7054 · f3d7054
1 parent aae143e
commit f3d7054
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 1 deletion.
diff --git 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.175.0] - 2024-08-15
 
 ### Added

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

diff --git 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<number>
   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
@@ -33,6 +33,7 @@ interface Props {
   sliderDisplayThreshold: number
   sliderArrowSize: number
   sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue<number>
+  displayModeSelectForColorVariation?: boolean
 }
 
 const ITEMS_VISIBLE_THRESHOLD = 2
@@ -60,6 +61,7 @@ const Variation: FC<Props> = ({
   sliderArrowSize,
   sliderDisplayThreshold,
   sliderItemsPerPage,
+  displayModeSelectForColorVariation,
 }) => {
   const { originalName, name, options } = variation
 
@@ -177,7 +179,10 @@ const Variation: FC<Props> = ({
         <div
           className={`${styles.skuSelectorOptionsList} w-100 inline-flex flex-wrap ml2 items-center`}
         >
-          {mode === 'select' && !displayImage ? (
+          {(mode === 'select' && !displayImage) ||
+          (mode === 'select' &&
+            displayImage &&
+            displayModeSelectForColorVariation) ? (
             <SelectModeVariation
               selectedItem={selectedItem}
               displayOptions={displayOptions}

diff --git a/react/components/SKUSelector/index.tsx b/react/components/SKUSelector/index.tsx
@@ -187,6 +187,7 @@ interface Props {
   sliderArrowSize?: number
   sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue<number>
   sortVariationsByLabel?: boolean
+  displayModeSelectForColorVariation?: boolean
 }
 
 const getNewSelectedVariations = (
@@ -254,6 +255,7 @@ const SKUSelectorContainer: FC<Props> = ({
     tablet: 2,
     phone: 1,
   },
+  displayModeSelectForColorVariation,
 }) => {
   const productContext = useProduct()
   const selectedItem = productContext?.selectedItem
@@ -425,6 +427,7 @@ const SKUSelectorContainer: FC<Props> = ({
       sliderArrowSize={sliderArrowSize}
       sliderItemsPerPage={sliderItemsPerPage}
       sortVariationsByLabel={sortVariationsByLabel}
+      displayModeSelectForColorVariation={displayModeSelectForColorVariation}
     />
   )
 }