VTEX Product Summary

Description

The VTEX Product Summary summarises the product informations such as name, price and picture. This is a VTEX app that is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request

Release schedule

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
2.xCurrent Release2018-11-282.x
1.xMaintenance LTS2018-08-212018-11-28March 20191.x

See our LTS policy for more information.

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.

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

Then, add product-summary block into our app theme, as we do in our Minicart app.

Now, you can change the behavior of the product-summary block that is in the minicart. See an example of how to configure:

"product-summary": {
  "props": {
    "isOneClickBuy": false,
    "showBadge": true,
    "badgeText": "OFF",
    "displayBuyButton": "displayButtonHover",
    "showCollections": false,
    "showListPrice": true,
    "showLabels": false,
    "showInstallments": true,
    "showSavings": true
  }
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within product summary and describes if they are required or optional.

{
  "product-summary": {
    "component": "index",
    "allowed": ["add-to-list-btn#product-summary"]
  },
  "add-to-list-btn#product-summary": {
    "component": "*"
  }
}

This block has as allowed block the add-to-list-btn#product-summary one.

Configuration

Through the Storefront, you can change the product-summary's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescription
showListPriceBooleanShows the product list price
isOneClickBuyBooleanShould redirect to checkout after clicking on buy
showLabelsBooleanSet pricing labels' visibility
showInstallmentsBooleanSet installments' visibility
showBordersBooleanSet product's borders visibility
showBadgeBooleanSet the discount badge's visibility
showDescriptionBooleanSet product's description visibility
labelSellingPriceStringText of selling price's label
labelListPriceStringText of list price's label
badgeTextStringText shown on badge
buyButtonTextStringCustom buy button text
displayBuyButtonEnumSet display mode of buy button (displayButtonAlways, displayButtonHover, displayButtonNone)
hideBuyButtonBooleanHides the buybutton completely
showCollectionsBooleanSet collection badges' visibility
displayModeEnumSet display mode of product summary (normal, small, inline or inlinePrice)
showQuantitySelectorBooleanSet the quantity selector visibility

| | priceAlignLeft | Boolean | Set the price to be left aligned
|

Also, you can configure the block add-to-list-btn#product-summary defined on product-summary.

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.product-summary.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;
}

CSS Handles

CSS Handles
container
containerNormal
containerSmall
containerInline
element
clearLink
information
imageContainer
image
aspectRatio
nameContainer
priceContainer
buyButtonContainer
buyButton
isHidden
description
quantityStepperContainer
imagePlaceholder
column
spacer

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status
Coverage Status

Upcoming documentation: