SKU List
The SKU List app is an essential B2B feature responsible for rendering a SKU list in the product details page.
Configuration
-
Add the
vtex.sku-list
app to your theme's dependencies in themanifest.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 name Description sku-list
Top level block in which you will declare as children
the SKU List layout blocks according to devices (sku-content.desktop
and thesku-content.mobile
blocks).sku-content.desktop
Defines the SKU List layout for desktop devices. sku-content.mobile
Defines the SKU List layout for mobile devices. sku-name
Renders the SKU name. sku-image
Renders the SKU image. sku-seller
Renders the SKU sellers (if it has any). It uses the seller-name
,seller-inventory
andseller-price
blocks as children in order to display seller data.seller-name
Renders the SKU seller name. seller-inventory
Renders the SKU inventory per seller. seller-price
Renders the SKU price per seller. sku-price
Renders the SKU price. sku-inventory
Renders the SKU inventory. sku-quantity-selector
Renders a quantity selector. item-quantity
Renders the SKU inventory. sku-buy-button
Renders a Buy Button to add a given SKU to the minicart. item-buy-button
Renders a Buy Button to add a given Product to the minicart. sku-specifications
Renders the SKU specifications. sku-highlights
Renders a highlight disclaimer for a specific SKU. -
In the product template (
store.product
), use the following block structure in order to rebuild the Product Details Page now including thesku-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 |