Product Specifications by vtex

This page is about version 3.119.6 of the app, which is not the most recent version. The latest stable version is 3.178.3.

ProductSpecifications is a block that shows the technical specifications of a product.

{"base64":" ","img":{"width":1265,"height":367,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":72299,"url":"https://user-images.githubusercontent.com/27777263/71525823-4bd8a380-28b2-11ea-8d5c-7678426ec1ab.png"}}

Configuration

Import the vtex.store-components app to your theme's dependencies in the manifest.json;


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the product-specifications block to any block below store.product (Product template). For example:


_16  "store.product": {
_16    "children": [
_16      "flex-layout.row#product",
_16    ]
_16  },
_16  "flex-layout.row#product": {
_16    "children": [
_16      "product-specifications#product"
_16    ]
_16  },
_16   "product-specifications#product": {
_16    "props": {
_16      "shoudCollapseOnTabChange": true,
_16      "collapsible": "desktopOnly"
_16    }
_16  },

⚠️ The block consumes data from the product-context therefore it should only be used in the store.product block i.e. in the product template.

Prop name	Type	Description	Default value
hiddenSpecifications	`String[]`	Type names of specifications you want to hide	`[]`
visibleSpecifications	`String[]`	Type names of specifications you want to appear. Only provide one of `hiddenSpecifications` or `visibleSpecifications`	`[]`
showSpecificationsTab	`Boolean`	Choose if you want to show the component with tabs mode	`false`
shoudCollapseOnTabChange	`Boolean`	If it should collapse if you change the tab	`false`
collapsible	`mobileOnly`\|`desktopOnly`\|`always`\|`never`	Control when should the content of the specifications be collapsible	`always`

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
`specificationsTitle`
`specificationsTableContainer`
`specificationsTable`
`specificationsTabsContainer`
`specificationsTab`
`specificationsTablePropertyHeading`
`specificationsTableSpecificationHeading`
`specificationItemProperty[data-specification="{specificationName}"]`
`specificationItemSpecifications`