README.md

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
  • Blocks API
    • Configuration
  • Styles API
    • CSS Namespaces

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.

  "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 name	Type	Description	Default value
productSlug	String!	Product's slug	-
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	-

Styles API

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