Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
VTEX Product Specification Badges
Official extension
Version: 0.4.0
Latest version: 0.4.0

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

Use this component to show badges based on your product specifications inside your product page.

Configuration

This component must be configured to be able to display the specifications properly. Its props can be configured via blocks.json and they are:

Prop nameTypeDescriptionDefault value
blockClassstringAllows to pass a custom name to be added to component css classesnull
displayValueSPECIFICATION_NAME or SPECIFICATION_VALUE or stringChoose the value that will appear if the specification condition is met and the badge will be showed. Pass SPECIFICATION_NAME if you want to display the specification name. Pass SPECIFICATION_VALUE if you want to display its value. Pass any other custom string to display it.null
multipleValuesSeparatorstringDefine the separator string to be rendered when a specification value has multiple values./
orientationvertical or horizontalDetermines if the group of specifications are showed horizontally or verticallyvertical
specificationGroupNameStringThe name of the specification group in which the desired specifications are""
specificationNameStringPass the name of the specification you want to target. If left empy, will target all of the group""
specificationsOptionsArray<Option>Pass this if you want to control the conditions to show certain specifications. Each value of the array should be a valid object of the Option format.null
visibleWhenStringPass this if you want the specification to be displayed only if it has this exact value. If left empty, the badge will be showed regardless of the specification value.""

Option type:

Prop nameTypeDescriptionDefault value
displayValueSPECIFICATION_NAME or SPECIFICATION_VALUE or stringChoose the value that will appear if the option condition is met and the badge will be showed. Pass SPECIFICATION_NAME if you want to show the specification name. Pass SPECIFICATION_VALUE if you want to show its value. Pass any other custom string to show it.null
specificationNameStringPass the name of the specification you want to target. If empty, option will not be checked.""
visibleWhenstringPass this if you want this option to be applied when the specification has the exactly same value as specified in visibleWhen. If left empty, the badge will be showed regardless of the specification value.null

Important note:

All products come with a default allSpecifications group, that is a group that combines all specifications in your product. If you manually create another group and add a specification in it, this specification will also appear in the allSpecifications group. So, if you want to apply your conditions to all specification, regardless of group, you must pass the value allSpecifications.

Example 1

Let's say your product has this specification groups:


_42
// specificationGroups array
_42
[
_42
{
_42
"name": "Group",
_42
"specifications": [
_42
{
_42
"name": "On Sale",
_42
"values": ["True"]
_42
}
_42
]
_42
},
_42
{
_42
"name": "Group 2",
_42
"specifications": [
_42
{
_42
"name": "Demo",
_42
"values": ["True"]
_42
},
_42
{
_42
"name": "PromoExclusion",
_42
"values": ["1"]
_42
}
_42
]
_42
},
_42
{
_42
"name": "allSpecifications",
_42
"specifications": [
_42
{
_42
"name": "On Sale",
_42
"values": ["True"]
_42
},
_42
{
_42
"name": "Demo",
_42
"values": ["True"]
_42
},
_42
{
_42
"name": "PromoExclusion",
_42
"values": ["1"]
_42
}
_42
]
_42
}
_42
]

If you want to display all specifications with the value True, you could then pass:


_10
"product-specification-badges": {
_10
"props": {
_10
"specificationGroupName": "allSpecifications",
_10
"displayValue": "SPECIFICATION_NAME",
_10
"visibleWhen": "True"
_10
}
_10
},

In this case, it will appear the On Sale and Demo badges (because you passed the SPECIFICATION_NAME in displayValue).

Example 2

Using the specification groups from example 1, we can get the same result with the specificationOptions prop:


_15
"product-specification-badges": {
_15
"props": {
_15
"specificationGroupName": "allSpecifications",
_15
"specificationsOptions": [{
_15
"specificationName": "On Sale",
_15
"displayValue": "SPECIFICATION_NAME",
_15
"visibleWhen": "True"
_15
},
_15
{
_15
"specificationName": "Demo",
_15
"displayValue": "SPECIFICATION_NAME",
_15
"visibleWhen": "True"
_15
}]
_15
}
_15
},

Example 3


_42
// specificationGroups array
_42
[
_42
{
_42
"name": "Group",
_42
"specifications": [
_42
{
_42
"name": "On Sale",
_42
"values": ["True"]
_42
}
_42
]
_42
},
_42
{
_42
"name": "Group 2",
_42
"specifications": [
_42
{
_42
"name": "Demo",
_42
"values": ["True"]
_42
},
_42
{
_42
"name": "PromoExclusion",
_42
"values": ["1"]
_42
}
_42
]
_42
},
_42
{
_42
"name": "allSpecifications",
_42
"specifications": [
_42
{
_42
"name": "On Sale",
_42
"values": ["True"]
_42
},
_42
{
_42
"name": "Demo",
_42
"values": ["My Cool Value"]
_42
},
_42
{
_42
"name": "PromoExclusion",
_42
"values": ["1"]
_42
}
_42
]
_42
}
_42
]

If you want to show the value for the Demo specification, you could pass:


_14
"product-specification-badges": {
_14
"props": {
_14
"specificationGroupName": "allSpecifications",
_14
"specificationsOptions": [{
_14
"specificationName": "On Sale",
_14
"displayValue": "SPECIFICATION_NAME",
_14
"visibleWhen": "True"
_14
},
_14
{
_14
"specificationName": "Demo",
_14
"displayValue": "SPECIFICATION_VALUE",
_14
}]
_14
}
_14
},

Final result: will appear the On Sale badge and a badge with My Cool Value.

Note the use of SPECIFICATION_VALUE in displayValue and the lack of visibleWhen in Demo.

Example 4

Using the example given in example 3.

To show a custom string you could do:


_18
"product-specification-badges": {
_18
"props": {
_18
"specificationGroupName": "allSpecifications",
_18
"specificationsOptions": [{
_18
"specificationName": "On Sale",
_18
"displayValue": "SPECIFICATION_NAME",
_18
"visibleWhen": "True"
_18
},
_18
{
_18
"specificationName": "Demo",
_18
"displayValue": "SPECIFICATION_VALUE",
_18
},
_18
{
_18
"specificationName": "PromoExclusion",
_18
"displayValue": "Cool Promo",
_18
}]
_18
}
_18
},

Final result: will appear the On Sale badge, a badge with My Cool Value and a badge with the string Cool Promo.

Note the usage of a custom value in the displayValue config.

Usage tip

You can use our stack-layout to show the badges over your product image for example.


_18
"stack-layout": {
_18
"children": [
_18
"product-images",
_18
"product-specification-badges"
_18
]
_18
},
_18
_18
"product-specification-badges": {
_18
"props": {
_18
"specificationGroupName": "allSpecifications",
_18
"displayValue": "SPECIFICATION_NAME",
_18
"specificationName": "On Sale",
_18
"visibleWhen": "True"
_18
}
_18
},
_18
"flex-layout.row#product-image": {
_18
"children": ["product-images"]
_18
},

CSS API

CSS classDescription
groupContainerContainer that wrapps the whole badge group
badgeContainerContainer for each badge
badgeTextText displayed inside badge

Note: each badge receives a class badgeContainer with its specification name slug appended to it. Example: with the specification On Sale: true the badge will also have the class badgeContainer--on-sale.

Note: each badge receives a class badgeText with its specification value slug appended to it. Example: with the specification Nationality: Brazilian the badge will also have the class badgeText--brazilian.

See also
VTEX App Store
VTEX IO Apps