⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Sku Selector

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.


Import

Import the component from @faststore/ui

import { SkuSelector } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.


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.
srcstringImage URL
label*stringLabel to describe the option when selected. This is mandatory if you want to use the `image` variant.
value*stringCurrent value for this option.
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

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