Product Summary Price by vtex

This page is about version 2.52.3 of the app, which is not the most recent version. The latest stable version is 2.90.2.

Description

ProductSummaryPrice is a VTEX Component that renders the product's price. This Component can be imported and used by any VTEX App.

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

You should follow the usage instruction in the main README.

Then, add product-summary-price block into your app theme, as we do in our Product Summary app.

This component has an interface that describes which rules must be implemented by a block when you want to use the ProductSummaryPrice.


_10  "product-summary-price": {
_10    "component": "ProductSummaryPrice"
_10  }

Through the Storefront, you can change the ProductSummaryPrice's behavior and interface. However, you also can make in your theme app.

Prop name	Type	Description	Default value
`showListPrice`	`Boolean`	Shows the product list price	`true`
`showInstallments`	`Boolean`	Set installments' visibility	`true`
`showDiscountValue`	`Boolean`	Set discount value's visibility	`false`
`showLabels`	`Boolean`	Set pricing labels' visibility	`true`
`labelSellingPrice`	`String`	Text of selling price's label
`labelListPrice`	`String`	Text of list price's label
`showBorders`	`Boolean`	Set product's borders visibility	`false`
`showListPriceRange`	`Boolean`	Set if you want to see list price as range (lowest - highest) when available	`false`
`showSellingPriceRange`	`Boolean`	Set if you want to see selling price as range (lowest - highest) when available	`false`

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.


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

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


_10.priceContainer {
_10  margin-top: 10px;
_10}