VTEX Developer Portal

All ContributorsAll Contributors

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.

imageimage

Configuration

  1. Import the vtex.product-summary app to your theme's dependencies in the manifest.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 nameDescription
list-context.product-listhttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Renders the list of products in the Product Summary component. It is responsible for fetching product data and providing it to the product-summary.shelf block. The last one, in turn, provides the product data to its children blocks.
product-summary.shelfhttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Logical block responsible for providing the needed structure for the Product Summary component through its child blocks (listed below).
product-summary-attachment-listRenders a list for the product attachments.
product-summary-brandRenders the product brand.
product-summary-buy-buttonRenders 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-descriptionRenders the product description.
product-summary-imageRenders the product image.
product-summary-nameRenders the product name.
product-summary-sku-nameRenders the selected sku name.
product-summary-pricehttps://img.shields.io/badge/-Deprecated-redhttps://img.shields.io/badge/-Deprecated-red The Product Summary Price block, responsible for rendering the product price, has been deprecated in favor of the Product Price app. Although support for this block is still granted, we strongly recommend you to use the Product Price app's blocks instead.
product-summary-sku-selectorRenders the SKU Selector block.
product-specification-badgesRenders badges based on the product specifications.
  1. Add the list-context.product-list block to the store theme template where you desire to display a product list and declare the product-summary.shelf in its block list. For example:
{
  "list-context.product-list": {
    "blocks": ["product-summary.shelf"]
  },

:information_source: *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.

  1. 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"
    ]
  }
}

:information_source: In order to configure and better understand each of the Product Summary exported blocks, go through their respective documentation.

Customization

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

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!

Updated about a month ago


Product Summary


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.