📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

SKU Selector

The SKU Selector is a Product Details Page block and it is responsible for displaying every SKU available for a given product.

image

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the skuselector block to any block below store.product(Product template). For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "sku-selector"
    ]
  },
  "sku-selector": {
    "props": {
      "hideImpossibleCombinations": false
    }
  },
Prop nameTypeDescriptionDefault value
hideImpossibleCombinationsbooleanWhen set to true a variation option that leads to a impossible product combination won't be displayed. If false, the variation will be displayed faded (with less opacity), but the user won't be able to select it.true
maxItemsnumberThe maximum number of variation items to be displayed before a See more button be triggered. The See more button will be displayed 2 items before the number set in maxItems.10
showValueNameForImageVariationboolean
Deprecated
Use showValueForVariation instead
false
showValueForVariationShowValueForVariationIf it should show the value of the selected variation. The possible values of this prop are the ones defined by ShowValueForVariation'none'
thumbnailImagestringThe value set in the string will define which image will be displayed firts, according to the value in the image's imageLabel. If you pass this prop and no image with this text in the imageLabel can be found, it will show any image of the product.undefined
visibleVariationsstring[]If you pass this array it will only display the passed names. If you pass a name that doesn't represent a variation, the block will not show anything. This means that passing an empty array doesn't display any variation-
variationsSpacingnumberThis prop represents how much of margin-bottom you want to put in all variation blocks. The value is not in px, every value represent a tachyons class. The value numbers are from 0-117
imageHeightnumber | objectHeight of the thumbnail. If you pass an object it will expect two attributes: desktop and mobile. The value of both should be the height of each device'auto'
imageWidthnumber | objectIt works same way as imageHeight'auto'
showVariationsLabelsbooleanIf the variation names should be displayedtrue
initialSelectionEnumControl the user initial selection for available variations when product page is loadedcomplete
showVariationsErrorMessagebooleanIf an error message should be displayed when the BuyButton is clicked on but didn't select an option for each available variationtrue
displayModeEnumHow the variations will be displayed. It doesn't apply to image variations. Notice that this prop is responsive, so you can specify a value for each breakpoint.default
sliderDisplayThresholdNumberControls the maximum number of SKUs that should be displayed using 'default' displayMode before using displayMode 'slider'. Notice this prop only takes effect you displayMode is set to slider.3
sliderArrowSizeEnumControls the size (height and width) in pixels of the navigation arrows rendered when displayMode is set to "slider".12
sliderItemsPerPage{ desktop: Number, tablet: Number, phone: Number }Controls how many slides should be shown on each type of device when displayMode is set to slider.{desktop: 3, tablet: 2, phone: 1}
  • Possible values for ShowValueForVariation:
ValueDescription
'none'It won't show any value
'image'Will show the value of the selected variation by the side of image variations
'all'Show the value of all the variations
  • Possible values for displayMode:
ValueNameDescription
"default"defaultDisplays all variations like the image variations
"select"selectDisplays all variations, except for image variations as Selectcomponents
"slider"sliderDisplays all variations in a slider when the number of available options in greater then the the value of sliderDisplayThreshold
  • Possible values for initialSelection:
ValueNameDescription
completeCompleteIt will select the variations values of the first SKU available
imageImageIt will select the first image variation (like Color). All other variations will be unselected
emptyEmptyAll variations will appear as unselected when the page is loaded

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
skuSelectorContainer
skuSelectorSubcontainer
skuSelectorName
skuSelectorNameContainer
skuSelectorTextContainer
seeMoreButton
skuSelectorSelectorImageValue
skuSelectorNameSeparator
skuSelectorOptionsList
skuSelectorItemTextValue
skuSelectorItemImageValue