ProductPriceInfo

Component

Storybook

Figma Demo

Guidelines

Variations

ProductPriceInfo has multiple variants, any of which can be displayed in a standard or “frontline” view or discounted view.

Variants include unit, case, sleeve, and minimum bottle treatments.

Discounted views of the above variants will have a strikethrough treatment of the standard “frontline” price and render the discounted price (both unit/case/sleeve and price per oz) in success green.

Usage

Use ProductPriceInfo to display pricing information in places such as cards or tables.

Component Specs

API

• sizeUnitLabel: string | Default: undefined
  The size unit label of the product.
• pricePerOz: string | Default: undefined The price per oz of the product.
• frontlinePrice: string | Default: undefined The frontline or original price of the product.
• hasDiscount: boolean | Default: false Whether the product has a discount.
• discountPrice: string | Default: undefined Used with hasDiscount to display the discount price.
• minBottle: boolean | Default: false Whether the product has a minimum bottle requirement.
• pricePerBottle: string | Default: undefined The price per bottle of the product (used with CardDiscount).

Example

<script>
	import { ProductPriceInfo } from '@getprovi/craft-svelte';
</script>

<ProductPriceInfo sizeUnitLabel="12oz Can" pricePerOz="$0.10" frontlinePrice="$1.20" />
<ProductPriceInfo
	hasDiscount
	discountPrice="$1.00"
	sizeUnitLabel="12oz Can"
	pricePerOz="$0.10"
	frontlinePrice="$1.20"
	minBottle
/>
<ProductPriceInfo sizeUnitLabel="12oz Can" pricePerOz="$0.10" frontlinePrice="$1.20" minBottle />

Types

interface Props {
	discountPrice?: string;
	frontlinePrice: string;
	hasDiscount?: boolean;
	minBottle?: boolean;
	pricePerOz: string;
	sizeUnitLabel: string;
	pricePerBottle?: string;
}