Product Summary Name by vtex

Product Summary Name is a block exported by the Product Summary app responsible for rendering the product name.

{"base64":" ","img":{"width":1883,"height":772,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":377119,"url":"https://user-images.githubusercontent.com/67270558/156374478-42cc320d-8aa9-432a-95c1-cf884534cbb1.png"}}

Configuration

Import the vtex.product-summary app to your theme's dependencies in the manifest.json:


_10  dependencies: {
_10    "vtex.product-summary": "2.x"
_10  }

Add the product-summary-name block to your store theme as a child of product-summary.shelf. For example:


_10   "product-summary.shelf": {
_10    "children": [
_10      "product-summary-image",
_10+     "product-summary-name",
_10      "product-summary-space",
_10      "product-summary-column#1"
_10    ]
_10  },

Then, declare the product-summary-name and configure its behavior using the props stated below.

Prop name	Type	Description	Default value
`showFieldsProps`	`object`	Defines the visibility on certain properties.	`{ showProductReference: false, showBrandName: false, showSku: false }`
`tag`	`string`	HTML tag used. It can be: `div`, `h1`, `h2`, `h3`.	`h1`

showFieldsProps object:

Prop name	Type	Description	Default value
`showSku`	`Boolean`	Show product SKU	`false`
`showProductReference`	`Boolean`	Show product reference	`false`
`showBrandName`	`Boolean`	Show brand name	`false`

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.

CSS Handles
`nameContainer`
`nameWrapper`
`brandName`
`skuName`
`productReference`
`productNameLoader`