đĸ Use this project, contribute to it or open issues to help evolve it using Store Discussion.
Product Summary is an app responsible for summarizing product information (such as name, price and image) in other store blocks, such as the Shelf and the Minicart.
- Import the
vtex.product-summary
app to your theme's dependencies in themanifest.json
:
"dependencies": {
"vtex.product-summary": "2.x"
}
Now, you are able to use all blocks exported by the product-summary
app. Check out the full list below:
Block name | Description |
---|---|
list-context.product-list |
product-summary.shelf block. The last one, in turn, provides the product data to its children blocks. |
product-summary.shelf |
|
product-summary-attachment-list |
Renders a list for the product attachments. |
product-summary-brand |
Renders the product brand. |
product-summary-buy-button |
Renders the Buy Button. Notice that this block should only be configured if your store still uses the Minicart v1. When using the Minicart v2, you should 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 |
|
product-summary-sku-selector |
Renders the SKU Selector block. |
product-specification-badges |
Renders badges based on the product specifications. |
- Add the
list-context.product-list
block to the store theme template where you desire to display a product list and declare theproduct-summary.shelf
in its block list. For example:
{
"list-context.product-list": {
"blocks": ["product-summary.shelf"]
},
âšī¸ *Notice that although the product-summary.shelf
refers to the shelf component in its name, the block does not need to be necessarily used when building a Shelf component. It can and should be used whenever you want to render summarizing product information in other components as well, such as the Minicart and those found on the Search Results page.
- Then, based on the product information you desire to have rendered in the product list, choose which blocks from the exported list above will be sent as the
product-summary.shelf
children. In a scenario in which we want to display the product name, description, image, price, a SKU selector and then a Buy Button, it would go as follows:
{
"list-context.product-list": {
"blocks": ["product-summary.shelf"]
},
"product-summary.shelf": {
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
]
}
}
âšī¸ In order to configure and better understand each of the Product Summary exported blocks, go through their respective documentation.
In order to apply CSS customizations in 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 |
Thanks goes to these wonderful people:
gustavopvasconcellos đģ |
Daniel Piva đģ |
This project follows the all-contributors specification. Contributions of any kind are welcome!