Documentation
Feedback
Guides
Storefront Development

Storefront Development
Sku Selector

The SkuSelector component is mainly used in Product Details Pages (PDPs) to display all the available variants for a given product.

The SkuSelector component is mainly used in Product Details Pages (PDPs) to display all the available variants for a given product.

Overview

This is a product related component, we recommend testing it using a product mock.
Example
Code

Import

Import the component from @faststore/ui

_10
import { SkuSelector } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/SkuSelector/styles.scss'


Usage


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).
idstringID of the current instance of the component.
availableVariations*Record<string, SkuOption[]>SKU options that should be rendered.
skuPropertyName*stringName of the SKU property that this selector is relative to.
activeVariations*Record<string, string>Currently active variation's value.
variant"label" | "image" | "color"Optional variant type, when is not passed the type is inferred based on options properties
linkPropsPartial<LinkProps<LinkElementType>>Extends all Link Props.
getItemHref(option: SkuOption) => stringOptional function to determines the href string.
slugsMap*Record<string, string>Maps property value combinations to their respective SKU's slug
ImageComponentFunctionComponent<{ src: string; alt: string; }>Function that returns a React component that will be used to render images.({ src, alt, ...otherProps }) => <img src={src} alt={alt} {...otherProps} />

SkuOptions

NameTypeDescriptionDefault
altstringAlternative text description of the image.
srcstringLabel to describe the option when selected. This is mandatory if you want to use the `image` variant.
label*stringCurrent value for this option.
value*stringSpecifies that this option should be disabled.
disabledbooleanSpecifies that this option should be disabled.
hexColorstringHex color code for this option. This is mandatory if you want to use the `color` variant.

Design Tokens

Local tokenDefault value/Global token linked
--fs-sku-selector-row-gapvar(--fs-spacing-2)
--fs-sku-selector-column-gapvar(--fs-sku-selector-row-gap)
--fs-sku-selector-text-sizevar(--fs-text-size-1)

Nested Elements

Option

Local tokenDefault value/Global token linked
--fs-sku-selector-option-widthvar(--fs-spacing-7)
--fs-sku-selector-option-heightvar(--fs-sku-selector-option-width)
--fs-sku-selector-option-bkg-color-hover
var(--fs-color-primary-bkg-light)
--fs-sku-selector-option-transition-timingvar(--fs-transition-timing)
--fs-sku-selector-option-transition-functionease
--fs-sku-selector-option-border-widthvar(--fs-border-width-thick)
--fs-sku-selector-option-border-color
var(--fs-color-neutral-7)
--fs-sku-selector-option-border-radiusvar(--fs-border-radius)
--fs-sku-selector-option-border-color-hover
var(--fs-border-color-active)
--fs-sku-selector-option-checked-border-widthvar(--fs-sku-selector-option-border-width)
--fs-sku-selector-option-checked-border-color
var(--fs-sku-selector-option-border-color-hover)
--fs-sku-selector-option-checked-box-shadow0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring-outline)
--fs-sku-selector-option-checked-bkg-color
var(--fs-sku-selector-option-bkg-color-hover)
--fs-sku-selector-option-disabled-widthvar(--fs-border-width)
--fs-sku-selector-option-disabled-color
var(--fs-color-disabled-text)
--fs-sku-selector-option-disabled-border-color
var(--fs-border-color-disabled)
--fs-sku-selector-option-disabled-bkg-color
var(--fs-sku-selector-option-disabled-border-color)

Variants

Image

Local tokenDefault value/Global token linked
--fs-sku-selector-image-widthvar(--fs-spacing-6)
--fs-sku-selector-image-heightvar(--fs-sku-selector-image-width)
--fs-sku-selector-image-border-radiusvar(--fs-border-radius-small)

Label

Example
Code

Color

Local tokenDefault value/Global token linked
--fs-sku-selector-color-widthvar(--fs-sku-selector-image-width)
--fs-sku-selector-color-heightvar(--fs-sku-selector-color-width)
--fs-sku-selector-color-border-radiusvar(--fs-sku-selector-image-border-radius)

Customization

data-fs-sku-selector
data-fs-sku-selector-variant= "image" | "label" | "color"
data-fs-sku-selector-title
data-fs-sku-selector-list
data-fs-sku-selector-disabled="true"
data-fs-sku-selector-checked="true"
data-fs-sku-selector-option
data-fs-sku-selector-option-image
data-fs-sku-selector-option-color
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page