Product Specifications by vtex

This page is about version 1.1.1 of the app, which is not the most recent version. The latest stable version is 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 data.

{"base64":" ","img":{"width":780,"height":318,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19580,"url":"https://user-images.githubusercontent.com/284515/90801619-859c6580-e2ec-11ea-9a7d-6e80d8f3d315.png"}}

Configuration

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

In your theme's 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. Check out the full list below:

Block name	Description
`product-specification-group`	Renders the product specification group.
`product-specification`	Renders the product specification. It should be declared as a children of `product-specification-group`.
`product-specification-value`	Renders the product specification value. It should be declared as a children of `product-specification`. It is possible to render with `HTML`.
`product-specification-text`	Mandatory children of `product-specification-group`, `product-specification` and `product-specification-value`. Depending on which block it is declared, the `product-specification-text` renders data regarding a specification group, a specification, or a specification value.

Step 2 - Adding the Product Specifications' blocks to your theme's templates

Copy the example stated below and paste it into your theme's desired template, making the necessary changes according to your desire. Remember to add the product-specification-group block to the template's block list if needed.


_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}

:warning: Notice that the Product Specifications' blocks necessarily need a Product context in order to work properly since they handle product data. Therefore, when declaring them, be sure that they are in a theme template in which this context is available, such as the store.product.

You also can 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 name	Type	Description	Default value
`filter`	`object`	Filters the specifications that should be displayed by the block.	`undefined`

filter object:

Prop name	Type	Description	Default value
`specificationGroups`	`[string]`	Array of specification group names to be hidden or shown (according to what is defined in the `type` property) by the `product-specification-group` block.	`undefined`
`type`	`enum`	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 name	Type	Description	Default value
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`
`message`	`string`	Defines the block's default text message to be rendered on the UI. You can also define which text message a block will render on the UI using the admin's Site Editor and the `markers` prop.	`undefined`
`markers`	`[string]`	IDs of your choosing to identify the block's rendered text message and customize it using the admin's Site Editor. Learn how to use them accessing the documentation on Using the Markers prop to customize a block's message. Notice the following: a block's message can also be customized in the Store Theme source code using the `message` prop.	`[]`

Step 3 - Editing the `product-specification-text`'s 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 won't need to perform any advanced configurations: declare the prop directly in your Store Theme app, passing to it the desired text value to be rendered with the block.

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

Message variable	Type	Description
`groupName`	`string`	Specification group name.
`specificationName`	`string`	Speficiation name.
`specificationValue`	`string`	Specification value.
`isFirstSpecificationValue`	`boolean`	Whether it is the first specification value (`true`) or not (`false`).
`isLastSpecificationValue`	`boolean`	Whether it is the last specification value (`true`) or not (`false`).

Customization

To apply CSS customization 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`