Skip to content

README.md

Latest commit

 

History

History
75 lines (58 loc) · 4.05 KB

README.md

File metadata and controls

75 lines (58 loc) · 4.05 KB

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.

  "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 name Type Description Default value
labelSellingPrice String Product selling price label null
labelListPrice String Product list price label null
showListPrice Boolean Set visibility of list price true
sellingPrices Array Product list of selling prices []
showSellingPriceRange Boolean Set visibility of selling price range false
showListPriceRange Boolean Set visibility of list price range false
showLabels Boolean Set visibility of labels true
showInstallments Boolean Set visibility of installments false
showSavings Boolean Set visibility of savings false

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 name Description Component Source
priceContainer The main container of ProductPrice index
listPrice The list price container index
listPriceLabel The list price label index
listPriceValue The list price value index
sellingPrice The selling price container index
sellingPriceLabel The selling price label index
sellingPriceValue The selling price value index
savingPrice The saving price container index
savingPriceValue The saving price value index
installmentsPrice The installments price container Installments
interestRatePrice The interest rate price Installments
priceLoaderContainer The container of the ProductPrice loader index
listPriceLoader The list price loader index
sellingPriceLabelLoader The selling price loader label index
sellingPriceLoader The selling price loader index
installmentsPriceLoader The installments price loader index
savingsPriceLoader The savings price loader index