Product Specifications

Description

ProductSpecifications is a VTEX component that shows the technical specifications of a product. This Component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

Then, add product-specifications block into your app theme, as we do in our Product Details app.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within ProductSpecifications and describes if they are required or optional.

1
2
3
 "product-specifications":{
   "component": "ProductSpecifications"
 }

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the ProductSpecifications's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescriptionDefault value
specificationsArray(Specification)Specifications of a product[]
tabsModeBooleanDisplays the technical specifications in tab mode. Else displays in table modefalse

Specification:

Prop nameTypeDescription
nameString!Specification name
valuesArray(String)!Specification values

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the ProductSpecifications.

Class nameDescriptionComponent Source
specificationsTitleThe title of the specifications sectionindex
specificationsTableContainerThe main container of the product specifications in table view including the specificationsTable and the specificationTitleindex
specificationsTableThe table of specificationsindex
specificationsTabsContainerThe main container of the product specifications in tabs view including the specificationsTable and the specificationTitleindex
specificationsTabThe content inside a tab of the productindex