SKU List by vtex

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

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 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 the `sku-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` and `seller-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 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`