Product Price

Description

ProductPrice is a VTEX component that shows the price of a product. This Component can be imported and used by any VTEX app.

📢 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-price block into your app theme, as we do in our Product Details app.

Blocks API

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

1
2
3
  "product-price": {
    "component": "ProductPrice"
  }

For now this block does not have any required or optional blocks.

Configuration

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

Prop nameTypeDescriptionDefault value
labelSellingPriceStringProduct selling price labelnull
labelListPriceStringProduct list price labelnull
showListPriceBooleanSet visibility of list pricetrue
sellingPricesArrayProduct list of selling prices[]
showSellingPriceRangeBooleanSet visibility of selling price rangefalse
showListPriceRangeBooleanSet visibility of list price rangefalse
showLabelsBooleanSet visibility of labelstrue
showInstallmentsBooleanSet visibility of installmentsfalse
showSavingsBooleanSet visibility of savingsfalse

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the ProductPrice.

Class nameDescriptionComponent Source
priceContainerThe main container of ProductPriceindex
listPriceThe list price containerindex
listPriceLabelThe list price labelindex
listPriceValueThe list price valueindex
sellingPriceDEPRECATED Use sellingPriceContainer insteadindex
sellingPriceContainerThe selling price containerindex
sellingPriceLabelThe selling price labelindex
sellingPriceValueThe selling price valueindex
sellingPriceValue--rangeClass added when is showing the selling price rangeindex
savingPriceThe saving price containerindex
savingPriceValueThe saving price valueindex
installmentsPriceThe installments price containerInstallments
interestRatePriceThe interest rate priceInstallments
priceLoaderContainerThe container of the ProductPrice loaderindex
listPriceLoaderThe list price loaderindex
sellingPriceLabelLoaderThe selling price loader labelindex
sellingPriceLoaderThe selling price loaderindex
installmentsPriceLoaderThe installments price loaderindex
savingsPriceLoaderThe savings price loaderindex