ProductSpecifications.md

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Product Specifications

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

Configuration

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

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

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

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

⚠️ 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