ProductPriceGroup

ProductPriceGroup combines ProductPriceInfo with the add to cart widget. It displays either the product price (unit, case, sleeve) and add to cart widget or a message when the product is unavailable or ineligible for purchase.

Component

750ml
$10.00 ($0.50/oz)
Case of 12 $10.00
$8.00 ($0.40/oz)

Storybook

Storybook - ProductPriceGroup Documentation

Figma Demo

Guidelines

Variations

Currently, ProductPriceGroup may display pricing in the following combinations:

  • Both unit and case

  • Unit only

  • Case only

Usage

Use ProductPriceGroup in settings where a user needs to see pricing and add to (or adjust) cart, such as product cards or within a PDP table.

Component Specs

API

  • priceDetails: PriceDetails | Default: undefined
    The price details of the product.
  • message: string | Default: undefined
  • messageDescription: string | Default: undefined

Example

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

<ProductPriceGroup />
<ProductPriceGroup {priceDetails} />
<ProductPriceGroup
	message="Header copy goes here"
	messageDescription="Additional context goes here"
/>

Types

interface ProductPriceGroupProps {
	priceDetails: PriceDetails;
	message: string;
	messageDescription: string;
}