ProductDetailBadges

Component

Storybook

Figma Demo

Guidelines

Variations

The ProductDetailBadges component has two variations: stack and row. The stack variation displays the badges in a vertical stack, while the row variation displays the badges in a horizontal row.

Note that logged-out users won’t see In Stock or Out of Stock status, but will see No Longer Available or Ineligible status.

Usage

The ProductDetailBadges component is used to display the product details ‘basic’ badges that show material/container type, packagingDetail, sku, and stock status.

Component Specs

API

• containerType: string | Default: undefined
  The type of container the product is in.
• materialType: string | Default: undefined The type of material the product is made of.
• packagingDetail: boolean | Default: false Whether the product has packaging details.
• sku: string | Default: undefined The SKU of the product.
• stockStatus: 'in' | 'out' | Default: 'in' The stock status of the product.
• variant: 'stack' | 'row' | Default: 'stack' Whether the badges should be displayed in a stack or row.

Example

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

<ProductDetailBadges containerType="keg" sku="123456789" packagingDetail stockStatus="in" />
<ProductDetailBadges
	variant="row"
	containerType="can"
	sku="123456789"
	packagingDetail
	stockStatus="out"
/>

Types

interface Props {
	containerType?: 'can' | 'bottle' | 'keg' | 'other';
	materialType?: 'aluminum' | 'glass' | 'plastic' | 'ceramic';
	packagingDetail?: boolean;
	sku?: string;
	stockStatus?: 'in' | 'out';
	variant?: 'stack' | 'row';
}