DiscountBadge.md

Discount Badge

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.

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

Table of Contents

• Usage
  • Configuration
  • Styles API
    • CSS namespaces

Usage

You should follow the usage instruction in the main README.

To import it into your code:

import { DiscountBadge } from 'vtex.store-components'

You can use it in your code like a React component with the jsx tag: <DiscountBadge />.

<DiscountBadge listPrice={commertialOffer.ListPrice}
                sellingPrice={commertialOffer.Price}
                label={badgeText}>
  <img src="" alt="">
</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