Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Specifications
Official extension
Version: 1.1.2
Latest version: 1.1.2

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

The Product Specifications app provides blocks to render product specification information.

{"base64":"  ","img":{"width":780,"height":318,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19580,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-specifications-0.png"}}

Configuration

Step 1 - Adding the Product Specifications app to your theme dependencies

In your theme manifest.json, add the Product Specification app as a dependency:


_10
"dependencies": {
_10
"vtex.product-specifications": "1.x"
_10
}

Now, you can use all the blocks exported by the product-specifications app. See the full list below:

Block nameDescription
product-specification-groupRenders the product specification group.
product-specificationRenders the product specification. It should be declared as a child of product-specification-group.
product-specification-valueRenders the product specification value. It should be declared as a child of product-specification. It can be rendered with HTML.
product-specification-textMandatory children of product-specification-group, product-specification, and product-specification-value. Depending on which block is declared, the product-specification-text renders information regarding a specification group, a specification, or a specification value.

Step 2 - Adding the Product Specification blocks to your theme templates

Copy the example below and paste it in the desired theme template, modifying it as necessary for your use case. If necessary, add the product-specification-group block to the template block list.


_29
{
_29
"product-specification-group": {
_29
"children": ["product-specification-text#group", "product-specification"]
_29
},
_29
"product-specification": {
_29
"children": [
_29
"product-specification-text#specification",
_29
"product-specification-values"
_29
]
_29
},
_29
"product-specification-values": {
_29
"children": ["product-specification-text#value"]
_29
},
_29
"product-specification-text#group": {
_29
"props": {
_29
"message": "{groupName}"
_29
}
_29
},
_29
"product-specification-text#specification": {
_29
"props": {
_29
"message": "{specificationName}"
_29
}
_29
},
_29
"product-specification-text#value": {
_29
"props": {
_29
"message": "{specificationValue}"
_29
}
_29
}
_29
}

The Product Specification blocks need a Product context to work properly because they handle product information. Therefore, when declaring them, be sure that they are in a theme template in which this context is available, such as store.product.

You can also use other blocks to wrap the blocks provided by the Product Specifications app, such as the ones exported by the Flex Layout app. For example:


_63
{
_63
"product-specification-group#table": {
_63
"children": ["flex-layout.row#spec-group"]
_63
},
_63
"flex-layout.row#spec-group": {
_63
"props": {
_63
"blockClass": "productSpecificationGroup"
_63
},
_63
"children": ["flex-layout.col#spec-group"]
_63
},
_63
"flex-layout.col#spec-group": {
_63
"children": ["flex-layout.row#spec-group-name", "product-specification"]
_63
},
_63
"flex-layout.row#spec-group-name": {
_63
"props": {
_63
"blockClass": "productSpecificationGroupName"
_63
},
_63
"children": ["product-specification-text#group"]
_63
},
_63
"product-specification": {
_63
"children": ["flex-layout.row#spec-item"]
_63
},
_63
"flex-layout.row#spec-item": {
_63
"props": {
_63
"blockClass": "productSpecification"
_63
},
_63
"children": ["flex-layout.col#spec-name", "flex-layout.col#spec-value"]
_63
},
_63
"flex-layout.col#spec-name": {
_63
"props": {
_63
"blockClass": "productSpecificationName",
_63
"width": {
_63
"mobile": "50%",
_63
"desktop": "25%"
_63
}
_63
},
_63
"children": ["product-specification-text#specification"]
_63
},
_63
"flex-layout.col#spec-value": {
_63
"props": {
_63
"blockClass": "productSpecificationValue"
_63
},
_63
"children": ["product-specification-values"]
_63
},
_63
"product-specification-values": {
_63
"children": ["product-specification-text#value"]
_63
},
_63
"product-specification-text#group": {
_63
"props": {
_63
"message": "{groupName}"
_63
}
_63
},
_63
"product-specification-text#specification": {
_63
"props": {
_63
"message": "{specificationName}"
_63
}
_63
},
_63
"product-specification-text#value": {
_63
"props": {
_63
"message": "{specificationValue}"
_63
}
_63
}
_63
}

product-specification-group props

Prop nameTypeDescriptionDefault value
filterobjectFilters the specifications that the block should display.undefined
  • filter object:
Prop nameTypeDescriptionDefault value
specificationGroups[string]Array of specification group names to be hidden or shown (depending on what is defined in the type property) by the product-specification-group block.undefined
typeenumDetermines whether the specification group names passed to the specificationGroups prop should be displayed or hidden on the UI. Possible values are: hide (hides specification groups declared in the specificationGroups prop) or show (only shows the specification groups declared in the specificationGroups prop).undefined

product-specification-text props

Prop nameTypeDescriptionDefault value
blockClassstringBlock ID of your choice to be used in CSS customizations.undefined
messagestringDefines the block default text message to be rendered on the UI. You can also define the text message a block will render on the UI using the Site Editor in the Admin and the markers prop.undefined
markers[string]IDs of your choice to identify the block's rendered text message and customize it using the Site Editor in the Admin. Learn how to use them by reading the documentation on Using the Markers prop to customize a block message. Note that a block message can also be customized in the Store Theme source code using the message prop.[]

Step 3 - Editing the product-specification-text messages

As stated in the previous step, the product-specification-text uses the ICU Message Format, making it possible to fully edit the block's rendered text messages.

When using the message prop, you will not need to create an advanced configuration: declare the prop directly in your Store Theme app and pass to it the desired text value to be rendered with the block.

The markers prop, in turn, requires you to add an extra configuration in the Site Editor of the Admin to properly work. When using this prop, do not forget to check out the block message variables (shown in the table below) and the Using the Markers prop to customize a block's message documentation.

Message variableTypeDescription
groupNamestringSpecification group name.
specificationNamestringSpecification name.
specificationValuestringSpecification value.
isFirstSpecificationValuebooleanDetermines whether it is the first specification value (true) or not (false).
isLastSpecificationValuebooleanDetermines whether it is the last specification value (true) or not (false).

Customization

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
groupName
specificationName
specificationValue
specificationValue--first
specificationValue--last
See also
VTEX App Store
VTEX IO Apps