This page is about version 3.119.6 of the app, which is not the most recent version. The latest stable version is 3.178.2.
Description
Discount Badge is a VTEX component that shows a discount of a product. 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.
To import it into your code:
_10import { DiscountBadge } from 'vtex.store-components'
You can use it in your code like a React component with the jsx tag: <DiscountBadge />.
_10<DiscountBadge listPrice={commertialOffer.ListPrice}_10 sellingPrice={commertialOffer.Price}_10 label={badgeText}>_10 <img src="" alt="" />_10</DiscountBadge>
Configuration
| Prop name | Type | Description |
|---|---|---|
listPrice | Number! | Product's default price |
sellingPrice | Number! | Product's price with discount |
label | String | Label to track the discount percent |
children | Node! | Element where the badge is displayed |
Styles API
This app provides some CSS classes as an API for style customization. You should follow the Styles API instruction in the main README.
CSS namespaces
Below, we describe the namespaces that are defined in the DiscountBadge.
| Class name | Description | Component Source |
|---|---|---|
discountContainer | The discount container | index |
discountInsideContainer | The discount inner container | index |