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

Release	Status	Initial Release	Maintenance LTS Start	End-of-life	Store Compatibility
[2.x]	Current Release	2018-11-28			2.x
[1.x]	Maintenance LTS	2018-08-21	2018-11-28	March 2019	1.x

See our LTS policy for more information.

VTEX Product Summary

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 name	Type	Description
`showListPrice`	`Boolean`	Shows the product list price
`isOneClickBuy`	`Boolean`	Should redirect to checkout after clicking on buy
`showLabels`	`Boolean`	Set pricing labels' visibility
`showInstallments`	`Boolean`	Set installments' visibility
`showBorders`	`Boolean`	Set product's borders visibility
`showBadge`	`Boolean`	Set the discount badge's visibility
`showDescription`	`Boolean`	Set product's description visibility
`labelSellingPrice`	`String`	Text of selling price's label
`labelListPrice`	`String`	Text of list price's label
`badgeText`	`String`	Text shown on badge
`buyButtonText`	`String`	Custom buy button text
`displayBuyButton`	`Enum`	Set display mode of buy button (displayButtonAlways, displayButtonHover, displayButtonNone)
`hideBuyButton`	`Boolean`	Hides the buybutton completely
`showCollections`	`Boolean`	Set collection badges' visibility
`displayMode`	`Enum`	Set display mode of product summary (normal, small, inline or inlinePrice)
`showQuantitySelector`	`Boolean`	Set the quantity selector visibility

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.

Add the styles builder to your manifest.json:

  "builders": {
    "styles": "1.x"
  }

Create a file called vtex.product-summary.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

CSS Namespaces

Below, we describe the namespaces that are defined in the product-summary.

Token name	Component	Description
`container`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The main container of `ProductSummary`
`containerNormal`	ProductSummaryNormal	The main container of `ProductSummary` in normal display mode
`containerSmall`	ProductSummarySmall	The main container of `ProductSummary` in small display mode
`containerInline`	ProductSummaryInline	The main container of `ProductSummary` in inline display mode
`element`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The subcontainer of `ProductSummary`
`clearLink`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The link container of `ProductSummary`
`information`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The information container of `ProductSummary`
`imageContainer`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The image container
`image`	ProductImage	The product image
`aspectRatio`	Image	The image aspect ratio
`nameContainer`	ProductSummaryName	The product name container
`priceContainer`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The product price container
`buyButtonContainer`	ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline	The buy button container
`buyButton`	ProductSummaryBuyButton	The buy button
`isHidden`	ProductSummaryBuyButton	Style used when buy button is hidden
`description`	ProductSummaryNormal	The product description
`quantityStepperContainer`	ProductSummaryInlinePrice	The quantity stepper container
`imagePlaceholder`	ProductImage	Product image placeholder class

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

victorcolombo / product-summary