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.
Table of Contents
Usage
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.
Blocks API
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 }
Configuration
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 |
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 yourmanifest.json
:
_10 "builders": {_10 "styles": "1.x"_10 }
- Create a file called
vtex.product-summary.css
inside thestyles/css
folder. Add your custom styles:
_10.priceContainer {_10 margin-top: 10px;_10}
CSS Handles
CSS Handles |
---|
priceContainer |
productPriceClass |
listPriceContainer |
listPriceLabel |
listPrice |
sellingPriceContainer |
sellingPriceLabel |
sellingPrice |
savingsContainer |
savings |
interestRate |
installmentContainer |
listPriceRange |
sellingPriceRange |
priceLoading |