Product Specifications by vtex

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

{"base64":" ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}

:warning: The Product Specifications block has been deprecated in favor of the Product Specifications app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Specification's blocks in order to keep up with the component's evolution.

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