The Product Specification Badges block has been deprecated in favor of the VTEX Product Specification Badges app. Although support for this block is still available, we strongly recommend that you update your store theme with the VTEX Product Specification Badges app to stay up with the component's evolution.
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 name | Type | Description | Default value |
---|---|---|---|
specificationGroupName | String | The name of the specification group in which the desired specifications are | "" |
specificationName | String | Pass the name of the specification you want to target. If left empy, will target all of the group | "" |
visibleWhen | String | Pass 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. | "" |
displayValue | SPECIFICATION_NAME or SPECIFICATION_VALUE or string | Choose 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 |
specificationsOptions | Array<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 |
orientation | vertical or horizontal | Determines if the group of specifications are showed horizontally or vertically | vertical |
blockClass | string | Allows to pass a custom name to be added to component css classes | null |
Option
type:
Prop name | Type | Description | Default value |
---|---|---|---|
specificationName | String | Pass the name of the specification you want to target. If empty, option will not be checked. | "" |
visibleWhen | string | Pass 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 |
displayValue | SPECIFICATION_NAME or SPECIFICATION_VALUE or string | Choose 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 |
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 },
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.
CSS Handles |
---|
groupContainer |
badgeContainer |
badgeText |
Note: each badge also receives a class badgeContainer
with its specification name slug appended to it.
Example: on specification On Sale
the badge will also have the class badgeContainer--on-sale
.