This page is about version 3.91.0 of the app, which is not the most recent version. The latest stable version is 3.178.1.

SKUSelector is a VTEX Component that is resposible to handle events of sku selection for a product. This component can be imported and used by any VTEX App.

:loudspeaker: Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

• Usage
  • Blocks API
    • Configuration
  • Styles API
    • CSS Namespaces

You should follow the usage instruction in the main README.

Then, add sku-selector block into your app theme, as we do in our Product Details app.

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within SKUSelector and describes if they are required or optional.

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the SKUSelector behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop name	Type	Description	Default value
skuSelected	SKU!	SKU selected	-
skuItems	Array(SKU)!	List of SKU Items	-
onSKUSelected	Function!	Callback that is called when a SKU is selected	Function that redirects to the page with the product and the selected SKU

SKU

Prop name	Type	Description	Default value
name	String!	Name of the sku	-
itemId	String!	The SKU id	-
images	Array(Image)!	The images of the SKU	-

Image

Prop name	Type	Description	Default value
imageUrl	String!	The URL of the image	-
imageLabel	String	The label of the image	-

Layout API

These are properties that you can customize in your blocks.json file.

Prop name	Type	Description	Default value
hideImpossibleCombinations	boolean	If true, if a variation option leads to a combination that does not exist, that option won't appear. If false, it will appear but won't be pressable and will appear faded, will much less opacity.	true
maxItems	number	The maximum number of items to be displayed of a variation before showing the see more button. If the see more button should appear, it will be displayed maxItems - 2 options before the button	10
showValueNameForImageVariation	boolean	If true, show the name for the selected image variation to the right of the variation name. For example: Color Red, if the red color variation is selected.	false
thumbnailImage	string	If you pass this prop it will show the first image that has this text on the image's attribute imageLabel. If you pass this prop and there is no image with this text in the imageLabel it will show any image of the product.	undefined
visibleVariations	string[]	If you pass this array it will only display the passed names, if you pass a name that doesn't represent a variation it just doesn't show anything, which means that passing a empty array doesn't display any variation	Is undefined, but shows every variation
variationsSpacing	number	This prop represents how much margin-bottom you want to put in all variation blocks. The value is not in px, every value represent a tachyons class, so the value numbers are from 0-11	7
imageHeight	`number	object`	Height of the thumbnail, if you pass an object it expects two attributes, desktop and mobile, and the value of both is the height on each type of device
imageWidth	`number	object`	It works same way as imageHeight
showVariationsLabels	boolean	If should show the variations name	true
initialSelection	InitialSelectionEnum	Control the initial selection chosen for the variations when page is loaded.	complete
showVariationsErrorMessage	boolean	If should show an error message when you click in the BuyButton but didn't select an option of each variation	true
displayMode	DisplayMode	How the variations will be displayed. Doesn't apply to variations of images	default

Values and description for DisplayMode:

Value	Name	Description
default	default	Shows all variations like the images variations
select	select	Shows all variations except for image ones as Selectcomponents

Values and description for InitialSelectionEnum:

Value	Name	Description
complete	Complete	It will selected the variations values for the first SKU available in the product possible items
image	Image	It will select the variation for variations with images (like Color). All other variations will be unselected
empty	Empty	All variations will appear as unselected on first load

Content API

These properties can be set via Storefront

Prop name	Type	Description	Default value
seeMoreLabel	String	Label of see more button that appears when more than maxItems items are available for one variation. The string must have a {quantity} placeholder to show the appropriate remaining items available. Example: "See {quantity} more"	See {quantity} more

You should follow the Styles API instruction in the main README.

CSS Namespaces

ClassName	Description	Component Source
skuSelectorContainer	SKUSelector container	SKUSelectorContainer
skuSelectorSubcontainer	SKUSelector inner container	Variation
skuSelectorName	SKUSelector name	Variation
skuSelectorNameContainer	SKUSelector name container	Variation
skuSelectorTextContainer	SKUSelector Text container, containing name and selected item, if requested	Variation
seeMoreButton	SKUSelector see more button container	Variation
skuSelectorSelectorImageValue	Name of selected image variation beside the variation name	Variation
skuSelectorNameSeparator	Separator of between skuSelectorTextContainer and skuSelectorSelectorImageValue	Variation
skuSelectorOptionsList	Variation
skuSelectorItemTextValue	SelectorItem
skuSelectorItemImageValue	SelectorItem