Product Summary SKU Selector by vtex

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

The product-summary-sku-selector is a VTEX block that's tasked with rendering the SKU Selector component in a Product Summary component, such as the Shelf or the Search Results Page.

{"base64":" ","img":{"width":2224,"height":1302,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":767184,"url":"https://user-images.githubusercontent.com/52087100/68625690-87f9a580-04b8-11ea-835d-009ac768805f.gif"}}

Configuration

Follow the Product Summary app's configuration instruction.
Add the product-summary-sku-selector to the Product Summary's desired block. In the following example, we'll use a Shelf:


_13"product-summary.shelf": {
_13   "children": [
_13     "product-summary-add-to-list-button",
_13     "stack-layout#prodsum",
_13     "product-summary-name",
_13     "product-rating-inline",
_13     "product-summary-space",
_13     "product-summary-sku-selector",
_13     "product-summary-price",
_13     "product-identifier.summary",
_13     "product-summary-buy-button"
_13   ]
_13 },

Below, declare the product-summary-sku-selector block. The props that it uses are the same that are available for the SKU Selector. For example:


_10 "product-summary-sku-selector": {
_10  "props":{
_10    "showVariationsLabels": ["false"]
_10  }
_10},

:warning: This block can only be configured through the source code. You're not yet able to edit using the Site Editor.

Customization

CSS Handles	Description	Component Source
`SKUSelectorContainer`	SKU Selector main container	index