Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
B2B components
SKU List
Official extension
Version: 1.3.0
Latest version: 1.3.0

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}

The SKU List app is an essential B2B feature responsible for rendering a SKU list in the product details page.

{"base64":"  ","img":{"width":2846,"height":1262,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":384544,"url":"https://user-images.githubusercontent.com/52087100/85888338-c762d100-b7bf-11ea-9ca0-c808ef9641ea.png"}}

Configuration

  1. Add the vtex.sku-list app to your theme's dependencies in the manifest.json, for example:

_10
"dependencies": {
_10
+ "vtex.sku-list": "1.x"
_10
}

Now, you are able to use all blocks exported by the sku-list app. Check out the full list below:

Block nameDescription
sku-listTop level block in which you will declare as children the SKU List layout blocks according to devices (sku-content.desktop and the sku-content.mobile blocks).
sku-content.desktopDefines the SKU List layout for desktop devices.
sku-content.mobileDefines the SKU List layout for mobile devices.
sku-nameRenders the SKU name.
sku-imageRenders the SKU image.
sku-sellerRenders the SKU sellers (if it has any). It uses the seller-name, seller-inventory and seller-price blocks as children in order to display seller data.
seller-nameRenders the SKU seller name.
seller-inventoryRenders the SKU inventory per seller.
seller-priceRenders the SKU price per seller.
sku-priceRenders the SKU price.
sku-inventoryRenders the SKU inventory.
sku-quantity-selectorRenders a quantity selector.
item-quantityRenders the SKU inventory.
sku-buy-buttonRenders a Buy Button to add a given SKU to the minicart.
item-buy-buttonRenders a Buy Button to add a given Product to the minicart.
sku-specificationsRenders the SKU specifications.
sku-highlightsRenders a highlight disclaimer for a specific SKU.
  1. In the product template (store.product), use the following block structure in order to rebuild the Product Details Page now including the sku-list blocks:

_272
{
_272
"store.product": {
_272
"children": [
_272
"flex-layout.row#product-breadcrumb",
_272
- "flex-layout.row#product-main",
_272
+ "flex-layout.row#images-and-items",
_272
+ "flex-layout.row#buy-button",
_272
"flex-layout.row#description",
_272
"shelf.relatedProducts",
_272
"product-reviews",
_272
"product-questions-and-answers"
_272
]
_272
},
_272
+ "flex-layout.row#images-and-items": {
_272
+ "children": [
_272
+ "product-images",
_272
+ "flex-layout.col#sku-list"
_272
+ ],
_272
+ "props": {
_272
+ "preventHorizontalStretch": false
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-list": {
_272
+ "children": [
_272
+ "flex-layout.row#sku-list-header",
_272
+ "sku-list"
_272
+ ],
_272
+ "props": {
_272
+ "preventVerticalStretch": true,
_272
+ "width": "60%",
_272
+ "blockClass": "skuList"
_272
+ }
_272
+ },
_272
+ "flex-layout.row#sku-list-header": {
_272
+ "props": {
_272
+ "preventHorizontalStretch": false,
_272
+ "blockClass": "skuListHeader"
_272
+ },
_272
+ "children": [
_272
+ "rich-text#certificates",
_272
+ "rich-text#expiry-date",
_272
+ "rich-text#inventory",
_272
+ "rich-text#price",
_272
+ "rich-text#quantity-selector"
_272
+ ]
_272
+ },
_272
+ "rich-text#certificates": {
_272
+ "props": {
_272
+ "text": "**Has Certificates?**",
_272
+ "blockClass": "skuList",
_272
+ "width": "20%"
_272
+ }
_272
+ },
_272
+ "rich-text#expiry-date": {
_272
+ "props": {
_272
+ "text": "**Expires at**",
_272
+ "blockClass": "skuList",
_272
+ "width": "20%"
_272
+ }
_272
+ },
_272
+ "rich-text#inventory": {
_272
+ "props": {
_272
+ "text": "**Stock**",
_272
+ "blockClass": "skuList",
_272
+ "width": "20%"
_272
+ }
_272
+ },
_272
+ "rich-text#price": {
_272
+ "props": {
_272
+ "text": "**Price**",
_272
+ "blockClass": "skuList",
_272
+ "width": "20%"
_272
+ }
_272
+ },
_272
+ "rich-text#quantity-selector": {
_272
+ "props": {
_272
+ "text": "**Quantity**",
_272
+ "blockClass": "skuList",
_272
+ "width": "20%"
_272
+ }
_272
+ },
_272
+ "sku-list": {
_272
+ "blocks": [
_272
+ "sku-content.desktop",
_272
+ "sku-content.mobile"
_272
+ ]
_272
+ },
_272
+ "sku-content.desktop": {
_272
+ "children": [
_272
+ "flex-layout.row#item-main-desktop"
_272
+ ]
_272
+ },
_272
+ "flex-layout.row#item-main-desktop": {
_272
+ "props": {
_272
+ "preventHorizontalStretch": false
_272
+ },
_272
+ "children": [
_272
+ "flex-layout.col#sku-highlight-certificates",
_272
+ "flex-layout.col#sku-highlight-expiry-date",
_272
+ "flex-layout.col#sku-inventory",
_272
+ "flex-layout.col#sku-price",
_272
+ "flex-layout.col#sku-quantity-selector"
_272
+ ]
_272
+ },
_272
+ "flex-layout.col#sku-highlight-certificates": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-highlights#certificates"
_272
+ ]
_272
+ },
_272
+ "sku-highlights#certificates": {
_272
+ "props": {
_272
+ "conditional": {
_272
+ "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
_272
+ "typeSpecifications": "Has Certificates"
_272
+ },
_272
+ "showLabel": false
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-highlight-expiry-date": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-highlights#expiry-date"
_272
+ ]
_272
+ },
_272
+ "sku-highlights#expiry-date": {
_272
+ "props": {
_272
+ "conditional": {
_272
+ "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
_272
+ "typeSpecifications": "Expiry Date"
_272
+ },
_272
+ "showLabel": false
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-inventory": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-inventory#default"
_272
+ ]
_272
+ },
_272
+ "sku-inventory#default": {
_272
+ "props": {
_272
+ "showLabel": false
_272
+ }
_272
+ },
_272
+ "sku-seller#inventory": {
_272
+ "children": [
_272
+ "seller-inventory"
_272
+ ]
_272
+ },
_272
+ "flex-layout.col#sku-price": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-price"
_272
+ ]
_272
+ },
_272
+ "flex-layout.col#sku-quantity-selector": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-quantity-selector"
_272
+ ]
_272
+ },
_272
+ "sku-content.mobile": {
_272
+ "children": [
_272
+ "flex-layout.row#item-main-mobile"
_272
+ ]
_272
+ },
_272
+ "flex-layout.row#item-main-mobile": {
_272
+ "props": {
_272
+ "preventHorizontalStretch": false
_272
+ },
_272
+ "children": [
_272
+ "flex-layout.col#sku-highlight-certificates-mobile",
_272
+ "flex-layout.col#sku-highlight-expiry-date-mobile",
_272
+ "flex-layout.col#sku-inventory-mobile",
_272
+ "flex-layout.col#sku-price-mobile",
_272
+ "flex-layout.col#sku-quantity-selector-mobile"
_272
+ ]
_272
+ },
_272
+ "flex-layout.col#sku-highlight-certificates-mobile": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-highlights#certificates-mobile"
_272
+ ]
_272
+ },
_272
+ "sku-highlights#certificates-mobile": {
_272
+ "props": {
_272
+ "conditional": {
_272
+ "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
_272
+ "typeSpecifications": "Has Certificates"
_272
+ },
_272
+ "showLabel": true
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-highlight-expiry-date-mobile": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-highlights#expiry-date-mobile"
_272
+ ]
_272
+ },
_272
+ "sku-highlights#expiry-date-mobile": {
_272
+ "props": {
_272
+ "conditional": {
_272
+ "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
_272
+ "typeSpecifications": "Expiry Date"
_272
+ },
_272
+ "showLabel": true
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-inventory-mobile": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-inventory#default-mobile"
_272
+ ]
_272
+ },
_272
+ "sku-inventory#default-mobile": {
_272
+ "props": {
_272
+ "showLabel": true
_272
+ }
_272
+ },
_272
+ "sku-seller#inventory-mobile": {
_272
+ "children": [
_272
+ "seller-inventory#mobile"
_272
+ ]
_272
+ },
_272
+ "seller-inventory#mobile": {
_272
+ "props": {
_272
+ "showLabel": true
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-price-mobile": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-price#mobile"
_272
+ ]
_272
+ },
_272
+ "sku-price#mobile": {
_272
+ "props": {
_272
+ "showLabel": true
_272
+ }
_272
+ },
_272
+ "flex-layout.col#sku-quantity-selector-mobile": {
_272
+ "props": {
_272
+ "width": "20%"
_272
+ },
_272
+ "children": [
_272
+ "sku-quantity-selector"
_272
+ ]
_272
+ },
_272
+ "sku-quantity-selector#mobile": {
_272
+ "props": {
_272
+ "showLabel": true
_272
+ }
_272
+ },

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
availableQuantityContainer
buttonDataContainer
buttonItemsPrice
buyButtonContainer
buyButtonText
buyButtonText
colGroupLeadTime
colGroupQuantityBreak
colGroupUnitPrice
highlightContent
highlightTitle
highlightValue
inventory
inventoryContainer
itemHighlight
priceContainer
productPriceBreaksContainer
productPriceBreaksContainer
productPriceQuantityDataColumn
productPriceTable
productPriceTableFooterMultipleColumn
productPriceTableFooterRow
productPriceTableHeader
productPriceTableHeaderRow
productPriceTableHeaderRowData
productPriceTableLeadTimeColumn
productPriceTableMainHeader
productPriceTablePriceColumn
productPriceTableQuantities
productPriceTableRow
productPricingTableTitle
quantitySelectorContainer
quantitySelectorStepper
quantitySelectorTitle
selectedSkuContentWrapper
sellerInventory
sellerInventoryWrapper
sellerName
sellerPriceContainer
skuContentWrapper
skuImage
skuName
specificationItemProperty
specificationItemSpecifications
specificationsTable
specificationsTableContainer
specificationsTablePropertyHeading
specificationsTableSpecificationHeading
specificationsTabsContainer
specificationsTitle
See also
VTEX App Store
VTEX IO Apps