SKU Selector

Description

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.

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

Table of Contents

Usage

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.

Blocks API

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.

1
2
3
  "sku-selector": {
    "component": "SKUSelector"
  }

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 nameTypeDescriptionDefault value
skuSelectedSKU!SKU selected-
skuItemsArray(SKU)!List of SKU Items-
onSKUSelectedFunction!Callback that is called when a SKU is selectedFunction that redirects to the page with the product and the selected SKU

SKU

Prop nameTypeDescriptionDefault value
nameString!Name of the sku-
itemIdString!The SKU id-
imagesArray(Image)!The images of the SKU-

Image

Prop nameTypeDescriptionDefault value
imageUrlString!The URL of the image-
imageLabelStringThe label of the image-

Layout API

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

Prop nameTypeDescriptionDefault value
hideImpossibleCombinationsBooleanIf 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
maxItemsNumberThe 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 button10
showValueNameForImageVariationBooleanIf 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

Content API

These properties can be set via Storefront

Prop nameTypeDescriptionDefault value
seeMoreLabelStringLabel 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

Styles API

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

CSS Namespaces

ClassNameDescriptionComponent Source
skuSelectorContainerSKUSelector containerSKUSelectorContainer
skuSelectorSubcontainerSKUSelector inner containerVariation
skuSelectorNameSKUSelector nameVariation
skuSelectorNameContainerSKUSelector name containerVariation
skuSelectorTextContainerSKUSelector Text container, containing name and selected item, if requestedVariation
seeMoreButtonSKUSelector see more button containerVariation
skuSelectorSelectorImageValueName of selected image variation beside the variation nameVariation
skuSelectorNameSeparatorSeparator of between skuSelectorTextContainer and skuSelectorSelectorImageValueVariation