SkuSelector
Displays all the available variants for a given product. The SkuSelector component is mainly used in Product Details Pages (PDPs).
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
_10import { 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:
_10@import '@faststore/ui/src/components/molecules/SkuSelector/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | |
| id | string | ID of the current instance of the component. | |
| availableVariations* | Record<string, SkuOption[]> | SKU options that should be rendered. | |
| skuPropertyName* | string | Name 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 | |
| linkProps | Partial<LinkProps<LinkElementType>> | Extends all Link Props. | |
| getItemHref | (option: SkuOption) => string | Optional function to determines the href string. | |
| slugsMap* | Record<string, string> | Maps property value combinations to their respective SKU's slug | |
| ImageComponent | FunctionComponent<{ 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
| Name | Type | Description | Default |
|---|---|---|---|
| alt | string | Alternative text description of the image. | |
| src | string | Label to describe the option when selected. This is mandatory if you want to use the `image` variant. | |
| label* | string | Current value for this option. | |
| value* | string | Specifies that this option should be disabled. | |
| disabled | boolean | Specifies that this option should be disabled. | |
| hexColor | string | Hex color code for this option. This is mandatory if you want to use the `color` variant. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-row-gap | var(--fs-spacing-2) |
--fs-sku-selector-column-gap | var(--fs-sku-selector-row-gap) |
--fs-sku-selector-text-size | var(--fs-text-size-1) |
Nested Elements
Option
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-option-width | var(--fs-spacing-7) |
--fs-sku-selector-option-height | var(--fs-sku-selector-option-width) |
--fs-sku-selector-option-bkg-color-hover | var(--fs-color-primary-bkg-light) |
--fs-sku-selector-option-transition-timing | var(--fs-transition-timing) |
--fs-sku-selector-option-transition-function | ease |
--fs-sku-selector-option-border-width | var(--fs-border-width-thick) |
--fs-sku-selector-option-border-color | var(--fs-color-neutral-7) |
--fs-sku-selector-option-border-radius | var(--fs-border-radius) |
--fs-sku-selector-option-border-color-hover | var(--fs-border-color-active) |
--fs-sku-selector-option-checked-border-width | var(--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-shadow | 0 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-width | var(--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
Example
Code
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-image-width | var(--fs-spacing-6) |
--fs-sku-selector-image-height | var(--fs-sku-selector-image-width) |
--fs-sku-selector-image-border-radius | var(--fs-border-radius-small) |
Label
Color
Example
Code
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-color-width | var(--fs-sku-selector-image-width) |
--fs-sku-selector-color-height | var(--fs-sku-selector-color-width) |
--fs-sku-selector-color-border-radius | var(--fs-sku-selector-image-border-radius) |
Customization
data-fs-sku-selectordata-fs-sku-selector-variant= "image" | "label" | "color"data-fs-sku-selector-titledata-fs-sku-selector-listdata-fs-sku-selector-disabled="true"data-fs-sku-selector-checked="true"data-fs-sku-selector-optiondata-fs-sku-selector-option-imagedata-fs-sku-selector-option-color