Product Summary is an app for summarizing product information (such as name, price, and image) in other store blocks, such as the Shelf and the Minicart.
Configurating the product summary
- Import the
vtex.product-summary
app to your theme's dependencies in themanifest.json
:
_10 "dependencies": {_10 "vtex.product-summary": "2.x"_10 }
Now, you can use all blocks exported by the product-summary
app. See the full list below:
Block name | Description |
---|---|
list-context.product-list | Renders the list of products in the Product Summary component. It fetches product information and provides it to the product-summary.shelf block. Then, this block provides its child blocks with the product information. |
product-summary.shelf | Logical block that provides the needed structure for the Product Summary component through its child blocks (listed below). |
product-summary-attachment-list | Renders a list for product attachments. |
product-summary-brand | Renders the product brand. |
product-summary-buy-button | Renders the Buy button. This block must only be configured if your store uses the Minicart v1. If your store uses the Minicart v2, please configure the Add to Cart button instead. |
product-summary-description | Renders the product description. |
product-summary-image | Renders the product image. |
product-summary-name | Renders the product name. |
product-summary-sku-name | Renders the selected SKU name. |
product-summary-price | Renders the product price. This block has been deprecated in favor of the Product Price app. Although support for this block is still available, we strongly recommend using the Product Price app. |
product-summary-sku-selector | Renders the SKU Selector block. |
product-specification-badges | Renders badges based on product specifications. |
- Add the
list-context.product-list
block to a store template of your choice, and declare theproduct-summary.shelf
in its block list. For example:
_10{_10 "list-context.product-list": {_10 "blocks": ["product-summary.shelf"]_10 },
Although the block name 'product-summary.shelf' alludes to the Shelf component, it is not necessary to use this block in order to create a shelf component. The Product Summary Shelf displays a summary of the product information in other components, such as the Minicart and the Search Results pages.
- Add the blocks from the list above as children of the
product-summary.shelf
, considering the product information you want to display in the product list. Take the following example in which the product name, description, image, price, SKU selector, and Buy button are all displayed in the Product Summary:
_16{_16 "list-context.product-list": {_16 "blocks": ["product-summary.shelf"]_16 },_16_16 "product-summary.shelf": {_16 "children": [_16 "product-summary-name",_16 "product-summary-description",_16 "product-summary-image",_16 "product-summary-price",_16 "product-summary-sku-selector",_16 "product-summary-buy-button"_16 ]_16 }_16}
Customization
To apply CSS customizations to this and other blocks, follow the instructions given in the recipe on Using CSS handles for store customization.
CSS handles |
---|
aspectRatio |
buyButton |
buyButtonContainer |
clearLink |
column |
container |
containerNormal |
containerSmall |
containerInline |
description |
element |
image |
imageContainer |
imagePlaceholder |
information |
isHidden |
nameContainer |
priceContainer |
quantityStepperContainer |
spacer |