Skip to content

Latest commit

 

History

History
86 lines (60 loc) · 3.94 KB

README.md

File metadata and controls

86 lines (60 loc) · 3.94 KB
Raw

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.

  "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
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

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

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
seeMoreButton SKUSelector see more button container Variation