Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Identifier
Official extension
Version: 0.5.0
Latest version: 0.5.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-1-orange.svg?style=flat-square"}}

Product Identifier app is responsible for showing a product identifier, such as: product reference, product ID, sku EAN or sku reference.

{"base64":"  ","img":{"width":208,"height":224,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":15885,"url":"https://user-images.githubusercontent.com/60782333/90151384-0abbd380-dd5d-11ea-9022-69ba4685e1d0.png"}}

Configuration

Add the vtex.product-identifier app to your theme's dependencies in the manifest.json file, as in:


_10
"dependencies": {
_10
"vtex.product-identifier": "0.x"
_10
}

Add product-identifier.product block to your store as a child of product-summary.shelf.


_10
"product-identifier.product": {
_10
"props": {
_10
"label": "default", //'default' | 'custom' | 'hide'
_10
"customLabel": "teste", // text if label is custom
_10
"idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'
_10
}
_10
},

The product-identifier interface is available is also available within the admin's CMS where you can configure this component to show other identifiers, such as:

  • Product Reference
  • Product ID
  • SKU EAN
  • SKU Reference ID
  • Item ID

It's also possible to hide the component label or customize its text. Notice that, in the following example, the "Reference" text was substituted by "Foo".

{"base64":"  ","img":{"width":208,"height":230,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20602,"url":"https://user-images.githubusercontent.com/60782333/90145130-004a0b80-dd56-11ea-9cbd-5ee621da4d69.png"}}

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
product-identifier
product-identifier__label
product-identifier__separator
product-identifier__value
See also
VTEX App Store
VTEX IO Apps